完成按钮组件的文档
parent
afb9f5041b
commit
a548620931
|
|
@ -3,12 +3,11 @@
|
|||
|
||||
|
||||
<style>
|
||||
.flex,.flex-free { display:flex;align-items:center;flex-wrap:wrap }
|
||||
.flex > *,.flex-free > *{margin:0 16px}
|
||||
.flex-free { display:flex;align-items:center;flex-wrap:wrap }
|
||||
.flex-free > *{margin:0 16px}
|
||||
.flex-free > div {display:flex;flex-direction:column;align-items:center;width:96px;height:72px;--size:28px;margin:16px;padding:12px 4px;border:1px solid var(--color-plain-1);border-radius:3px}
|
||||
.flex-free > div:hover {box-shadow:0 0 10px rgba(0,0,0,.1)}
|
||||
.flex-free > div h3 {margin:auto;line-height:1.5;font-size:12px;font-weight:normal}
|
||||
.flex > *{flex:1}
|
||||
</style>
|
||||
|
||||
### 使用
|
||||
|
|
|
|||
|
|
@ -1,121 +1,132 @@
|
|||
<style>
|
||||
.flex,.flex-free { display:flex;align-items:center;margin-top:16px }
|
||||
.flex > *,.flex-free > *{margin:0 16px}
|
||||
.flex > *{flex:1}
|
||||
</style>
|
||||
|
||||
## WC-BUTTON
|
||||
> 常用的按钮组件。
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
<section class="flex">
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/button.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-button type="primary">Primary Button</wc-button>
|
||||
<wc-button type="info">Info Button</wc-button>
|
||||
<wc-button type="success">Success Button</wc-button>
|
||||
<wc-button type="warning">Warning Button</wc-button>
|
||||
</section>
|
||||
<section class="flex">
|
||||
</wc-space>
|
||||
<wc-space>
|
||||
<wc-button>Normal Button</wc-button>
|
||||
<wc-button type="help">Help Button</wc-button>
|
||||
<wc-button type="secondary">Secondary Button</wc-button>
|
||||
<wc-button type="danger">Danger Button</wc-button>
|
||||
</section>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
### 尺寸大小
|
||||
|
||||
5种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。
|
||||
6种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。
|
||||
|
||||
```html
|
||||
<wc-button size="xxxl">xxxl Size</wc-button>
|
||||
<wc-button size="xxl">xxl Size</wc-button>
|
||||
<wc-button size="xl">xl Size</wc-button>
|
||||
<wc-button>Deault Size</wc-button>
|
||||
<wc-button size="m">Medium Size</wc-button>
|
||||
<wc-button size="s">small Size</wc-button>
|
||||
```
|
||||
|
||||
<section class="flex">
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/button.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-button size="xxxl">xxxl Size</wc-button>
|
||||
<wc-button size="xxl">xxl Size</wc-button>
|
||||
<wc-button size="xl">xl Size</wc-button>
|
||||
<wc-button>Deault Size</wc-button>
|
||||
<wc-button size="m">Medium Size</wc-button>
|
||||
<wc-button size="s">small Size</wc-button>
|
||||
</section>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
### 颜色&样式&形状
|
||||
可通过设置`type`属性修改按钮样式, 还可通过`solid`属性将按钮改成实心, 另外, `round`和`circle`这2个属性, 可以让按钮变成圆角和圆形。
|
||||
|
||||
如果有其他半径需求, 可以直接通过css设置`border-radius`。
|
||||
|
||||
|
||||
`注:` circle属性会让移除掉按钮内文字, 只能用图标
|
||||
|
||||
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/button.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-button type="info">type=info</wc-button>
|
||||
<wc-button type="danger">type=info</wc-button>
|
||||
<wc-button solid type="info">type=info</wc-button>
|
||||
<wc-button solid type="danger">type=info</wc-button>
|
||||
</wc-space>
|
||||
<wc-space>
|
||||
<wc-button type="info" round>圆角矩形</wc-button>
|
||||
<wc-button type="secondary" circle icon="edit"></wc-button>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
|
||||
### 状态
|
||||
按钮有2种状态, `loading` 和 `disabled`, 这2种状态下, 都不能点击, 也无法获取焦点。
|
||||
|
||||
```html
|
||||
<wc-button loading>Loading Status</wc-button>
|
||||
<wc-button disabled>Disabled Status</wc-button>
|
||||
<wc-button type="info" loading>Loading Status</wc-button>
|
||||
<wc-button type="info" disabled>Disabled Status</wc-button>
|
||||
```
|
||||
|
||||
|
||||
<section class="flex">
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/button.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-button loading>Loading Status</wc-button>
|
||||
<wc-button disabled>Disabled Status</wc-button>
|
||||
<wc-button type="info" loading>Loading Status</wc-button>
|
||||
<wc-button type="info" disabled>Disabled Status</wc-button>
|
||||
</section>
|
||||
<wc-button solid loading>Loading Status</wc-button>
|
||||
<wc-button solid disabled>Disabled Status</wc-button>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
|
||||
### 图标
|
||||
按钮可通过`icon`属性, 增加前置图标, 图标的名字, 参考前面的章节。
|
||||
|
||||
```html
|
||||
<wc-button icon="edit">编辑</wc-button>
|
||||
<wc-button type="danger" icon="trash">删除</wc-button>
|
||||
<wc-button type="info" icon="load">静态菊花图标</wc-button>
|
||||
<wc-button type="success" icon="loading">动态加载图标</wc-button>
|
||||
<wc-button type="success" icon="fly">提交</wc-button>
|
||||
```
|
||||
|
||||
<section class="flex">
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/button.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-button icon="edit">编辑</wc-button>
|
||||
<wc-button type="danger" icon="trash">删除</wc-button>
|
||||
<wc-button type="info" icon="load">静态菊花图标</wc-button>
|
||||
<wc-button type="success" icon="loading">动态加载图标</wc-button>
|
||||
<wc-button type="success" icon="fly">提交</wc-button>
|
||||
</section>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
### 特殊属性
|
||||
有2个特殊属性`round`和`circle`, 可以控制按钮的圆角半径, 如果有其他半径需求, 可以直接通过css设置`border-radius`。
|
||||
|
||||
`注:` circle属性会让移除掉按钮内文字, 只能用图标
|
||||
|
||||
```html
|
||||
<wc-button type="info" size="xxl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" size="xl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" round>圆角矩形</wc-button>
|
||||
<wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
|
||||
<wc-button type="info" size="xl" circle icon="plus"></wc-button>
|
||||
<wc-button type="secondary" circle icon="edit"></wc-button>
|
||||
```
|
||||
|
||||
<section class="flex-free">
|
||||
<wc-button type="info" size="xxl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" size="xl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" round>圆角矩形</wc-button>
|
||||
<wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
|
||||
<wc-button type="info" size="xl" circle icon="plus"></wc-button>
|
||||
<wc-button type="secondary" circle icon="edit"></wc-button>
|
||||
</section>
|
||||
|
||||
|
||||
### 完整APIs
|
||||
|
||||
| 属性 | 值类型 | 默认值 | 描述 |
|
||||
| :-: | :-: | :-: | - |
|
||||
| type | String | 无 | 按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、inverse、danger |
|
||||
| size | String | default | 按钮尺寸, 可选值有: large、medium、small、mini |
|
||||
| loading | Boolean | false | 按钮的加载状态, 为true时, 按钮会呈现loading动画, 且按钮点击事件无效 |
|
||||
| disbaled | Boolean | false | 按钮的禁用状态, 为true时, 按钮点击事件无效 |
|
||||
| type | String | 无 | 按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger` |
|
||||
| size | String | default | 按钮尺寸, 可选值有: `xxxl、xxl、xl、l、m、s` |
|
||||
| loading | Boolean | false | 按钮的加载状态, 为`true`时, 按钮会呈现loading动画, 且按钮点击事件无效 |
|
||||
| disbaled | Boolean | false | 按钮的禁用状态, 为`true`时, 按钮点击事件无效 |
|
||||
| icon | String | 无 | 为按钮设置前置图标 |
|
||||
| round | 无 | 无 | 为按钮设置大圆角半径。 不需要赋值 |
|
||||
| circle | 无 | 无 | 设置为正圆按钮, 且会让文字失效。 不需要赋值 |
|
||||
|
|
|
|||
|
|
@ -68,10 +68,12 @@ a {
|
|||
|
||||
.content {
|
||||
flex: 1;
|
||||
/* max-width: 1024px; */
|
||||
height: 100%;
|
||||
}
|
||||
.detail {
|
||||
width: calc(100vw - 284px);
|
||||
max-width: 960px;
|
||||
margin: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue