Button add circle shape and dashed、text type

Button add circle shape and dashed、text type
This commit is contained in:
梁灏 2016-11-01 20:22:38 +08:00
parent 698e3b614d
commit f1b3ed30ab
6 changed files with 119 additions and 19 deletions

View file

@ -1,4 +1,88 @@
<template>
<h4>基本</h4>
<br><br>
<Button-group>
<i-button>取消</i-button>
<i-button type="primary">确定</i-button>
</Button-group>
<Button-group>
<i-button disabled>昨日</i-button>
<i-button disabled>今日</i-button>
<i-button disabled>明日</i-button>
</Button-group>
<Button-group>
<i-button type="primary">L</i-button>
<i-button>M</i-button>
<i-button type="ghost">M</i-button>
<i-button type="dashed">R</i-button>
</Button-group>
<br><br>
<h4>配合图标</h4>
<br><br>
<Button-group>
<i-button type="primary">
<Icon type="chevron-left"></Icon>
前进
</i-button>
<i-button type="primary">
后退
<Icon type="chevron-right"></Icon>
</i-button>
</Button-group>
<Button-group>
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group>
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<br><br>
<h4>圆角</h4>
<br><br>
<Button-group shape="circle">
<i-button type="primary">
<Icon type="chevron-left"></Icon>
前进
</i-button>
<i-button type="primary">
后退
<Icon type="chevron-right"></Icon>
</i-button>
</Button-group>
<Button-group shape="circle">
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group shape="circle">
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<Button-group shape="circle" size="large">
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group shape="circle" size="large">
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<Button-group shape="circle" size="small">
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group shape="circle" size="small">
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<br><br>
<i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
<i-button type="primary" icon="ios-search" shape="circle"></i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>