From 7c3d3db63043886ffd52dc8a35e55549445546a7 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 9 Jul 2018 21:11:08 +0800 Subject: [PATCH] [Improvement] Button: add plain prop (#1444) --- packages/button/demo/index.vue | 28 ++++++++----------- packages/button/en-US.md | 27 +++++++----------- packages/button/index.vue | 2 ++ .../test/__snapshots__/demo.spec.js.snap | 22 ++++++--------- packages/button/zh-CN.md | 24 ++++++---------- packages/vant-css/src/button.css | 12 ++++++++ 6 files changed, 52 insertions(+), 63 deletions(-) diff --git a/packages/button/demo/index.vue b/packages/button/demo/index.vue index 4b6dfbfec..932c70f3d 100644 --- a/packages/button/demo/index.vue +++ b/packages/button/demo/index.vue @@ -6,6 +6,12 @@ {{ $t('danger') }} + + {{ $t('default') }} + {{ $t('primary') }} + {{ $t('danger') }} + + {{ $t('large') }} {{ $t('normal') }} @@ -27,19 +33,6 @@ {{ $t('button') }} - - - {{ $t('button') }} - - - - {{ $t('button') }} - - - {{ $t('button') }} - - - @@ -58,7 +51,8 @@ export default { large: '大号按钮', normal: '普通按钮', small: '小型按钮', - mini: '迷你按钮' + mini: '迷你按钮', + plain: '朴素按钮' }, 'en-US': { title1: 'Type', @@ -72,7 +66,8 @@ export default { large: 'Large', normal: 'Normal', small: 'Small', - mini: 'Mini' + mini: 'Mini', + plain: 'Plain' } } }; @@ -83,8 +78,7 @@ export default { .van-button { user-select: none; - &--large, - &--bottom-action { + &--large { margin-bottom: 15px; } diff --git a/packages/button/en-US.md b/packages/button/en-US.md index 3aacaa54d..00b0a1a19 100644 --- a/packages/button/en-US.md +++ b/packages/button/en-US.md @@ -17,6 +17,14 @@ Vue.use(Button); Danger ``` +#### Plain + +```html +Default +Primary +Danger +``` + #### Size ```html @@ -48,21 +56,6 @@ Use `tag` prop to custom button tag ``` -#### Action Button - -```html -Button - - - - Button - - - Button - - -``` - ### API | Attribute | Description | Type | Default | @@ -72,10 +65,10 @@ Use `tag` prop to custom button tag | text | Text | `String` | - | | tag | Tag | `String` | `button` | | native-type | Native Type Attribute | `String` | `''` | -| disabled | Whether disable button | `Boolean` | `false` | +| plain | Whether to be plain button | `Boolean` | `false` | +| disabled | Whether to disable button | `Boolean` | `false` | | loading | Whether show loading status | `Boolean` | `false` | | block | Whether to set display block | `Boolean` | `false` | -| bottom-action | Whether to be action button | `Boolean` | `false` | ### Event diff --git a/packages/button/index.vue b/packages/button/index.vue index 7e90898a2..d787a912d 100644 --- a/packages/button/index.vue +++ b/packages/button/index.vue @@ -8,6 +8,7 @@ size, { block, + plain, loading, disabled, unclickable: disabled || loading, @@ -32,6 +33,7 @@ export default create({ props: { text: String, block: Boolean, + plain: Boolean, loading: Boolean, disabled: Boolean, nativeType: String, diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap index b3e35085f..3ce6f429b 100644 --- a/packages/button/test/__snapshots__/demo.spec.js.snap +++ b/packages/button/test/__snapshots__/demo.spec.js.snap @@ -10,6 +10,14 @@ exports[`renders demo correctly 1`] = ` +
+ + + +
@@ -37,19 +45,5 @@ exports[`renders demo correctly 1`] = ` 按钮
-
- -
-
- -
-
- -
-
-
`; diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md index 8f21a12be..ead549c32 100644 --- a/packages/button/zh-CN.md +++ b/packages/button/zh-CN.md @@ -18,6 +18,14 @@ Vue.use(Button); 危险按钮 ``` +#### 朴素按钮 + +```html +默认按钮 +主要按钮 +危险按钮 +``` + #### 按钮尺寸 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` @@ -52,20 +60,6 @@ Vue.use(Button); ``` -#### 页面底部操作按钮 - -```html -按钮 - - - - 按钮 - - - 按钮 - - -``` ### API @@ -76,10 +70,10 @@ Vue.use(Button); | text | 按钮文字 | `String` | - | | tag | 按钮 HTML 标签 | `String` | `button` | | native-type | 按钮类型（原生） | `String` | - | +| plain | 是否为朴素按钮 | `Boolean` | `false` | | disabled | 是否禁用 | `Boolean` | `false` | | loading | 是否显示为加载状态 | `Boolean` | `false` | | block | 是否为块级元素 | `Boolean` | `false` | -| bottom-action | 是否为底部行动按钮 | `Boolean` | `false` | ### Event diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css index b2a991256..4323009d1 100644 --- a/packages/vant-css/src/button.css +++ b/packages/vant-css/src/button.css @@ -53,6 +53,18 @@ border: 1px solid $button-danger-border-color; } + &--plain { + background-color: $white; + + &.van-button--primary { + color: $button-primary-background-color; + } + + &.van-button--danger { + color: $button-danger-background-color; + } + } + &--large { width: 100%; height: 50px;