mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
按钮新增类型，layout补全文档
This commit is contained in:
niunai
parent
7bbb53e5f5
commit
874df43df0
@ -44,7 +44,7 @@ module.exports = {
|
||||
'generator-star-spacing': [2, { 'before': true, 'after': true }],
|
||||
'handle-callback-err': [2, '^(err|error)$' ],
|
||||
'indent': [2, 2, { 'SwitchCase': 1 }],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'jsx-quotes': [2, 'prefer-double'],
|
||||
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
|
||||
'keyword-spacing': [2, { 'before': true, 'after': true }],
|
||||
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
|
||||
|
||||
@ -7,10 +7,6 @@
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -53,7 +49,7 @@
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
@ -62,15 +58,19 @@
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block>normal</zan-button>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block>small</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block>mini</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
@ -107,6 +107,27 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 页面底部操作按钮
|
||||
一般用于fixed在底部的区域或是popup弹层的底部，一般只使用`primary`和`normal`两种状态。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" bottom-action>立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="12">
|
||||
<zan-button bottom-action>加入购物车</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="12">
|
||||
<zan-button type="primary" bottom-action>立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
@ -114,6 +135,7 @@
|
||||
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
|
||||
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
|
||||
| tag | 按钮标签 | `string` | `button` | `a`, `span`, ... |
|
||||
| diabled | 按钮是否禁用 | `boolean` | | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | | |
|
||||
| diabled | 按钮是否禁用 | `boolean` | false | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | false | |
|
||||
| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | false | |
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<zan-icon name="like"></zan-icon>
|
||||
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
background: #666;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
|
||||
|
||||
### 常规用法
|
||||
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<div class="gray"></div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="white"></div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray"></div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col offset="12" span="12">
|
||||
<div class="gray"></div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 在列元素之间增加间距
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<div class="gray"></div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="white"></div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray"></div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
@ -52,6 +52,10 @@
|
||||
"path": "/loading",
|
||||
"title": "Loading 加载"
|
||||
},
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout 布局"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps 步骤条"
|
||||
|
||||
@ -21,6 +21,7 @@ export default {
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
block: Boolean,
|
||||
bottomAction: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
@ -49,8 +50,8 @@ export default {
|
||||
},
|
||||
|
||||
render(h) {
|
||||
let { type, nativeType, size, disabled, loading, block } = this;
|
||||
let Tag = this.tag;
|
||||
const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
|
||||
const Tag = this.tag;
|
||||
|
||||
return (
|
||||
<Tag
|
||||
@ -63,19 +64,20 @@ export default {
|
||||
{
|
||||
'zan-button--disabled': disabled,
|
||||
'zan-button--loading': loading,
|
||||
'zan-button--block': block
|
||||
'zan-button--block': block,
|
||||
'zan-button--bottom-action': bottomAction
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<zan-loading
|
||||
class="zan-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}>
|
||||
</zan-loading> :
|
||||
null
|
||||
loading
|
||||
? <zan-loading
|
||||
class="zan-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}>
|
||||
</zan-loading>
|
||||
: null
|
||||
}
|
||||
<span class="zan-button__text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
|
||||
@ -76,8 +76,9 @@ export default {
|
||||
this.$emit('change', val);
|
||||
},
|
||||
value(val) {
|
||||
if (val) {
|
||||
this.currentValue = this.correctValue(+val);
|
||||
val = this.correctValue(+val);
|
||||
if (val !== this.currentValue) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
@ -28,12 +27,11 @@
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
& + .zan-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
& + .zan-button--block {
|
||||
margin-left: 0;
|
||||
@e icon-loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@m default {
|
||||
@ -62,7 +60,7 @@
|
||||
}
|
||||
|
||||
@m normal {
|
||||
padding: 0 10px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -105,11 +103,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
@e icon-loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
@m bottom-action {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: $bottom-action-button-default-background-color;
|
||||
color: $bottom-action-button-default-color;
|
||||
font-size: 16px;
|
||||
|
||||
&.zan-button--primary {
|
||||
background-color: $bottom-action-button-primary-background-color;
|
||||
color: $bottom-action-button-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,3 +32,9 @@ $button-danger-border-color: #e33;
|
||||
$button-disabled-color: $c-gray-dark;
|
||||
$button-disabled-background-color: $c-gray-light;
|
||||
$button-disabled-border-color: #cacaca;
|
||||
|
||||
$bottom-action-button-default-color: $c-white;
|
||||
$bottom-action-button-default-background-color: #f85;
|
||||
|
||||
$bottom-action-button-primary-color: $c-white;
|
||||
$bottom-action-button-primary-background-color: #f44;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user