Commit f308dcac80f46abadccdf8da16e408a214c3dc3f
1 parent
b778e4ff
fixed #4415
Showing
3 changed files
with
16 additions
and
3 deletions
Show diff stats
examples/routers/divider.vue
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | iView is a set of UI components and widgets built on Vue.js. | 17 | iView is a set of UI components and widgets built on Vue.js. |
| 18 | </p> | 18 | </p> |
| 19 | 19 | ||
| 20 | - <Divider>iView </Divider> | 20 | + <Divider size="small">iView</Divider> |
| 21 | 21 | ||
| 22 | <p> | 22 | <p> |
| 23 | iView is a set of UI components and widgets built on Vue.js. | 23 | iView is a set of UI components and widgets built on Vue.js. |
| @@ -31,7 +31,7 @@ | @@ -31,7 +31,7 @@ | ||
| 31 | iView is a set of UI components and widgets built on Vue.js. | 31 | iView is a set of UI components and widgets built on Vue.js. |
| 32 | iView is a set of UI components and widgets built on Vue.js. | 32 | iView is a set of UI components and widgets built on Vue.js. |
| 33 | </p> | 33 | </p> |
| 34 | - <Divider dashed orientation="left">iView Developer</Divider> | 34 | + <Divider dashed orientation="left" size="small">iView Developer</Divider> |
| 35 | <p> | 35 | <p> |
| 36 | iView is a set of UI components and widgets built on Vue.js. | 36 | iView is a set of UI components and widgets built on Vue.js. |
| 37 | iView is a set of UI components and widgets built on Vue.js. | 37 | iView is a set of UI components and widgets built on Vue.js. |
src/components/divider/divider.vue
| @@ -31,6 +31,12 @@ | @@ -31,6 +31,12 @@ | ||
| 31 | dashed: { | 31 | dashed: { |
| 32 | type: Boolean, | 32 | type: Boolean, |
| 33 | default: false, | 33 | default: false, |
| 34 | + }, | ||
| 35 | + size: { | ||
| 36 | + validator (value) { | ||
| 37 | + return oneOf(value, ['small', 'default']); | ||
| 38 | + }, | ||
| 39 | + default: 'default' | ||
| 34 | } | 40 | } |
| 35 | }, | 41 | }, |
| 36 | computed: { | 42 | computed: { |
| @@ -41,6 +47,7 @@ | @@ -41,6 +47,7 @@ | ||
| 41 | return [ | 47 | return [ |
| 42 | `${prefixCls}`, | 48 | `${prefixCls}`, |
| 43 | `${prefixCls}-${this.type}`, | 49 | `${prefixCls}-${this.type}`, |
| 50 | + `${prefixCls}-${this.size}`, | ||
| 44 | { | 51 | { |
| 45 | [`${prefixCls}-with-text`]: this.hasSlot && this.orientation === 'center', | 52 | [`${prefixCls}-with-text`]: this.hasSlot && this.orientation === 'center', |
| 46 | [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot, | 53 | [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot, |
src/styles/components/divider.less
| @@ -45,9 +45,15 @@ | @@ -45,9 +45,15 @@ | ||
| 45 | } | 45 | } |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | + &-horizontal&-small&-with-text-center, | ||
| 49 | + &-horizontal&-small&-with-text-left, | ||
| 50 | + &-horizontal&-small&-with-text-right{ | ||
| 51 | + font-size: @font-size-base; | ||
| 52 | + margin: 8px 0; | ||
| 53 | + } | ||
| 54 | + | ||
| 48 | &-horizontal&-with-text-left, | 55 | &-horizontal&-with-text-left, |
| 49 | &-horizontal&-with-text-right { | 56 | &-horizontal&-with-text-right { |
| 50 | - font-size: @font-size-base; | ||
| 51 | .@{divider-prefix-cls}-inner-text { | 57 | .@{divider-prefix-cls}-inner-text { |
| 52 | display: inline-block; | 58 | display: inline-block; |
| 53 | padding: 0 10px; | 59 | padding: 0 10px; |