other / mew-iview

Commit fd6512a92e918a095def3c7514766d46f577cda5

Authored by Rijn
1 parent 39311a50

implemented vertical align mode of button

Showing 4 changed files with 155 additions and 9 deletions   Show diff stats
Inline Side-by-side
src/components/button/button-group.vue
  Show/Hide comments   View file @fd6512a
... ... @@ -19,6 +19,10 @@
19 19 validator (value) {
20 20 return oneOf(value, ['circle', 'circle-outline']);
21 21 }
  22 + },
  23 + vertical: {
  24 + type: Boolean,
  25 + default: false
22 26 }
23 27 },
24 28 computed: {
... ... @@ -27,7 +31,8 @@
27 31 `${prefixCls}`,
28 32 {
29 33 [`${prefixCls}-${this.size}`]: !!this.size,
30   - [`${prefixCls}-${this.shape}`]: !!this.shape
  34 + [`${prefixCls}-${this.shape}`]: !!this.shape,
  35 + [`${prefixCls}-vertical`]: this.vertical
31 36 }
32 37 ]
33 38 }
... ...
src/styles/components/button.less
  Show/Hide comments   View file @fd6512a
... ... @@ -15,12 +15,12 @@
15 15 &-primary {
16 16 .btn-primary;
17 17  
18   - .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
  18 + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
19 19 border-right-color: @btn-group-border;
20 20 border-left-color: @btn-group-border;
21 21 }
22 22  
23   - .@{btn-prefix-cls}-group &:first-child {
  23 + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
24 24 &:not(:last-child) {
25 25 border-right-color: @btn-group-border;
26 26 &[disabled] {
... ... @@ -29,13 +29,35 @@
29 29 }
30 30 }
31 31  
32   - .@{btn-prefix-cls}-group &:last-child:not(:first-child),
33   - .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
  32 + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
  33 + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
34 34 border-left-color: @btn-group-border;
35 35 &[disabled] {
36 36 border-left-color: @btn-default-border;
37 37 }
38 38 }
  39 +
  40 + .@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
  41 + border-top-color: @btn-group-border;
  42 + border-bottom-color: @btn-group-border;
  43 + }
  44 +
  45 + .@{btn-prefix-cls}-group-vertical &:first-child {
  46 + &:not(:last-child) {
  47 + border-bottom-color: @btn-group-border;
  48 + &[disabled] {
  49 + border-top-color: @btn-default-border;
  50 + }
  51 + }
  52 + }
  53 +
  54 + .@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
  55 + .@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
  56 + border-top-color: @btn-group-border;
  57 + &[disabled] {
  58 + border-bottom-color: @btn-default-border;
  59 + }
  60 + }
39 61 }
40 62  
41 63 &-ghost {
... ... @@ -99,4 +121,8 @@
99 121 &-group {
100 122 .btn-group(@btn-prefix-cls);
101 123 }
  124 +
  125 + &-group-vertical {
  126 + .btn-group-vertical(@btn-prefix-cls);
  127 + }
102 128 }
... ...
src/styles/mixins/button.less
  Show/Hide comments   View file @fd6512a
... ... @@ -108,6 +108,17 @@
108 108 }
109 109 }
110 110  
  111 +.button-group-vertical-base(@btnClassName) {
  112 + display: inline-block;
  113 + vertical-align: middle;
  114 + > .@{btnClassName} {
  115 + display: block;
  116 + width: 100%;
  117 + max-width: 100%;
  118 + float: none;
  119 + }
  120 +}
  121 +
111 122 .btn() {
112 123 display: inline-block;
113 124 margin-bottom: 0;
... ... @@ -303,7 +314,7 @@
303 314 border-radius: 0;
304 315 }
305 316  
306   - > .@{btnClassName}:first-child {
  317 + &:not(&-vertical) > .@{btnClassName}:first-child {
307 318 margin-left: 0;
308 319 &:not(:last-child) {
309 320 border-bottom-right-radius: 0;
... ... @@ -311,7 +322,7 @@
311 322 }
312 323 }
313 324  
314   - > .@{btnClassName}:last-child:not(:first-child) {
  325 + &:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
315 326 border-bottom-left-radius: 0;
316 327 border-top-left-radius: 0;
317 328 }
... ... @@ -324,7 +335,7 @@
324 335 border-radius: 0;
325 336 }
326 337  
327   - & > &:first-child:not(:last-child) {
  338 + &:not(&-vertical) > &:first-child:not(:last-child) {
328 339 > .@{btnClassName}:last-child {
329 340 border-bottom-right-radius: 0;
330 341 border-top-right-radius: 0;
... ... @@ -332,9 +343,48 @@
332 343 }
333 344 }
334 345  
335   - & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
  346 + &:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
336 347 border-bottom-left-radius: 0;
337 348 border-top-left-radius: 0;
338 349 padding-left: 8px;
339 350 }
340 351 }
  352 +
  353 +.btn-group-vertical(@btnClassName: ivu-btn) {
  354 + .button-group-vertical-base(@btnClassName);
  355 +
  356 + .@{btnClassName} + .@{btnClassName},
  357 + .@{btnClassName} + &,
  358 + & + .@{btnClassName},
  359 + & + & {
  360 + margin-top: -1px;
  361 + margin-left: 0px;
  362 + }
  363 +
  364 + > .@{btnClassName}:first-child {
  365 + margin-top: 0;
  366 + &:not(:last-child) {
  367 + border-bottom-left-radius: 0;
  368 + border-bottom-right-radius: 0;
  369 + }
  370 + }
  371 +
  372 + > .@{btnClassName}:last-child:not(:first-child) {
  373 + border-top-left-radius: 0;
  374 + border-top-right-radius: 0;
  375 + }
  376 +
  377 + & > &:first-child:not(:last-child) {
  378 + > .@{btnClassName}:last-child {
  379 + border-bottom-left-radius: 0;
  380 + border-bottom-right-radius: 0;
  381 + padding-bottom: 8px;
  382 + }
  383 + }
  384 +
  385 + & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
  386 + border-bottom-right-radius: 0;
  387 + border-bottom-left-radius: 0;
  388 + padding-top: 8px;
  389 + }
  390 +}
... ...
test/routers/button.vue
  Show/Hide comments   View file @fd6512a
... ... @@ -92,6 +92,71 @@
92 92 <i-button type="ghost" icon="ios-crop"></i-button>
93 93 <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
94 94 </Button-group>
  95 +
  96 + <br><br>
  97 + <h4>Vertical</h4>
  98 + <br><br>
  99 +
  100 + <Button-group vertical>
  101 + <i-button>取消</i-button>
  102 + <i-button type="primary">确定</i-button>
  103 + </Button-group>
  104 + <Button-group vertical>
  105 + <i-button>取消</i-button>
  106 + <i-button type="primary">确定</i-button>
  107 + </Button-group>
  108 + <Button-group vertical>
  109 + <i-button disabled>昨日</i-button>
  110 + <i-button disabled>今日</i-button>
  111 + <i-button disabled>明日</i-button>
  112 + </Button-group>
  113 + <Button-group vertical>
  114 + <i-button type="primary">L</i-button>
  115 + <i-button>M</i-button>
  116 + <i-button type="ghost">M</i-button>
  117 + <i-button type="dashed">R</i-button>
  118 + </Button-group>
  119 + <Button-group vertical>
  120 + <i-button type="primary">
  121 + <Icon type="chevron-left"></Icon>
  122 + 前进
  123 + </i-button>
  124 + <i-button type="primary">
  125 + 后退
  126 + <Icon type="chevron-right"></Icon>
  127 + </i-button>
  128 + </Button-group>
  129 + <Button-group vertical>
  130 + <i-button type="primary" icon="ios-skipbackward"></i-button>
  131 + <i-button type="primary" icon="ios-skipforward"></i-button>
  132 + </Button-group>
  133 + <Button-group vertical>
  134 + <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
  135 + <i-button type="ghost" icon="ios-sunny-outline"></i-button>
  136 + <i-button type="ghost" icon="ios-crop"></i-button>
  137 + <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
  138 + </Button-group>
  139 + <Button-group vertical size="large">
  140 + <i-button type="primary" icon="ios-skipbackward"></i-button>
  141 + <i-button type="primary" icon="ios-skipforward"></i-button>
  142 + </Button-group>
  143 + <Button-group shape="circle" vertical size="large">
  144 + <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
  145 + <i-button type="ghost" icon="ios-sunny-outline"></i-button>
  146 + <i-button type="ghost" icon="ios-crop"></i-button>
  147 + <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
  148 + </Button-group>
  149 + <Button-group shape="circle" vertical size="small">
  150 + <i-button type="primary" icon="ios-skipbackward"></i-button>
  151 + <i-button type="primary" icon="ios-skipforward"></i-button>
  152 + </Button-group>
  153 + <Button-group shape="circle" vertical size="small">
  154 + <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
  155 + <i-button type="ghost" icon="ios-sunny-outline"></i-button>
  156 + <i-button type="ghost" icon="ios-crop"></i-button>
  157 + <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
  158 + </Button-group>
  159 +
95 160 <br><br>
96 161 <i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
97 162 <i-button type="primary" icon="ios-search" shape="circle"></i-button>
... ...