From 83e2c0da2e88ae4cf5e27d85df1f63c27dda5732 Mon Sep 17 00:00:00 2001 From: zcj <18137693952@163.com> Date: Wed, 7 Sep 2022 17:07:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?style(checkbox):=20checkbox=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20size=20=E5=A4=A7=E5=B0=8F=E4=BD=BF=E7=94=A8scss?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=90=91=E6=A0=87=E5=87=86=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=20#1199?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/checkbox/src/checkbox-button.scss | 26 +++++++++++++------ .../devui/checkbox/src/checkbox-types.ts | 2 +- .../devui/checkbox/src/checkbox.scss | 18 ++++++------- 3 files changed, 27 insertions(+), 19 deletions(-) diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-button.scss b/packages/devui-vue/devui/checkbox/src/checkbox-button.scss index 382ffcd6d0..83bdeb3747 100644 --- a/packages/devui-vue/devui/checkbox/src/checkbox-button.scss +++ b/packages/devui-vue/devui/checkbox/src/checkbox-button.scss @@ -1,19 +1,27 @@ @import '../../styles-var/devui-var.scss'; +$devui-btn-sm-padding: var(--devui-btn-sm-padding, 0 16px); +$devui-btn-padding: var(--devui-btn-padding, 0 20px); +$devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px); + $font-size-map: ( lg: $devui-font-size-lg, - md: $devui-font-size-lg, + md: $devui-font-size-md, sm: $devui-font-size-sm, - xs: $devui-font-size-sm, ); $button-padding-map: ( - lg: 12px 20px, - md: 10px 20px, - sm: 9px 15px, - xs: 7px 15px, + lg: $devui-btn-lg-padding, + md: $devui-btn-padding, + sm: $devui-btn-sm-padding, +); +$checkbox-label-height-map: ( + lg: $devui-size-lg, + md: $devui-size-md, + sm: $devui-size-sm, ); .#{$devui-prefix}-checkbox-button { - display: inline-block; + display: flex; + align-items: center; position: relative; &__input { @@ -39,10 +47,12 @@ $button-padding-map: ( line-height: 1; user-select: none; box-shadow: -1px 0 0 0 $devui-disabled-line; - @each $size in ('lg', 'md', 'sm', 'xs') { + @each $size in ('lg', 'md', 'sm') { &.#{$devui-prefix}-checkbox-button--#{$size} { font-size: map-get($font-size-map, #{$size}); padding: map-get($button-padding-map, #{$size}); + height: map-get($checkbox-label-height-map, #{$size}); + line-height: map-get($checkbox-label-height-map, #{$size}); } } } diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts index 4a15055ffd..ebf4f8edec 100644 --- a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts +++ b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts @@ -1,7 +1,7 @@ import { PropType, InjectionKey, Ref, ExtractPropTypes, ComputedRef } from 'vue'; type Direction = 'row' | 'column'; -type Size = 'lg' | 'md' | 'sm' | 'xs'; +type Size = 'lg' | 'md' | 'sm'; const commonProps = { name: { diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.scss b/packages/devui-vue/devui/checkbox/src/checkbox.scss index 7e59c51e16..ed3ed978d0 100644 --- a/packages/devui-vue/devui/checkbox/src/checkbox.scss +++ b/packages/devui-vue/devui/checkbox/src/checkbox.scss @@ -2,21 +2,18 @@ $font-size-map: ( lg: $devui-font-size-lg, - md: $devui-font-size-lg, + md: $devui-font-size-md, sm: $devui-font-size-sm, - xs: $devui-font-size-sm, ); $checkbox-width-map: ( - lg: 16px, + lg: 18px, md: 16px, sm: 14px, - xs: 14px, ); $checkbox-label-height-map: ( - lg: 40px, - md: 36px, - sm: 32px, - xs: 28px, + lg: $devui-size-lg, + md: $devui-size-md, + sm: $devui-size-sm, ); .#{$devui-prefix}-checkbox { position: relative; @@ -184,8 +181,10 @@ $checkbox-label-height-map: ( color: $devui-text; margin: 0; display: block; - @each $size in ('lg', 'md', 'sm', 'xs') { + @each $size in ('lg', 'md', 'sm') { &.#{$devui-prefix}-checkbox--#{$size} { + display: flex; + align-items: center; font-size: map-get($font-size-map, #{$size}); .#{$devui-prefix}-checkbox__material { @@ -200,7 +199,6 @@ $checkbox-label-height-map: ( &.#{$devui-prefix}-checkbox--bordered { height: map-get($checkbox-label-height-map, #{$size}); - line-height: map-get($checkbox-label-height-map, #{$size}); padding: 0 15px 0 10px; } } From 3622ea276ea96cb3498dda1c0e5cbbf1cc9a1ba7 Mon Sep 17 00:00:00 2001 From: zcj <18137693952@163.com> Date: Wed, 7 Sep 2022 17:08:47 +0800 Subject: [PATCH 2/3] =?UTF-8?q?style(checkbox-group):=20checkbox-group=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=20direction=E6=8E=92=E5=88=97=E6=96=B9?= =?UTF-8?q?=E5=90=91=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/checkbox/src/checkbox-group.scss | 27 ++++++++++--------- .../devui/checkbox/src/checkbox-group.tsx | 13 +++++++-- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-group.scss b/packages/devui-vue/devui/checkbox/src/checkbox-group.scss index b02345dba7..7cbe2622ee 100644 --- a/packages/devui-vue/devui/checkbox/src/checkbox-group.scss +++ b/packages/devui-vue/devui/checkbox/src/checkbox-group.scss @@ -1,23 +1,24 @@ @import '../../styles-var/devui-var.scss'; .#{$devui-prefix}-checkbox__group { - display: inline-block; -} - -.#{$devui-prefix}-checkbox--list-inline { - min-height: 28px; - line-height: 28px; - display: flex; + display: inline-flex; flex-wrap: wrap; justify-content: flex-start; - align-items: center; - margin: -8px 0 0 0; - - & div:not(:last-child) { - margin-right: 20px; - } + align-items: flex-start; & > * { margin-top: 8px; } + + &.is-row { + flex-direction: row; + + & div:not(:last-child) { + margin-right: 20px; + } + } + + &.is-column { + flex-direction: column; + } } diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-group.tsx b/packages/devui-vue/devui/checkbox/src/checkbox-group.tsx index f8756447e2..a7c29db57b 100644 --- a/packages/devui-vue/devui/checkbox/src/checkbox-group.tsx +++ b/packages/devui-vue/devui/checkbox/src/checkbox-group.tsx @@ -41,9 +41,18 @@ export default defineComponent({ } }; + return ( -
-
{getContent()}
+
+ {getContent()}
); }; From 84934d5acf2e7149b91ee2af4e23e6660523db29 Mon Sep 17 00:00:00 2001 From: zcj <18137693952@163.com> Date: Wed, 7 Sep 2022 17:09:14 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs(checkbox):=20checkbox=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0=20=E5=8E=BB?= =?UTF-8?q?=E9=99=A4=E7=BB=84=E4=BB=B6=20size=20xs=20=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=EF=BC=8C=E6=8C=89=E9=92=AE=E5=BD=A2=E6=80=81=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/checkbox/index.md | 120 ++++++++++-------- 1 file changed, 65 insertions(+), 55 deletions(-) diff --git a/packages/devui-vue/docs/components/checkbox/index.md b/packages/devui-vue/docs/components/checkbox/index.md index 091d9413ba..632c2b5907 100644 --- a/packages/devui-vue/docs/components/checkbox/index.md +++ b/packages/devui-vue/docs/components/checkbox/index.md @@ -97,6 +97,7 @@ export default defineComponent({ .checkbox-basic-demo .devui-checkbox { margin-bottom: 10px; } + .checkbox-basic-demo .inline-row .devui-select { width: 150px; margin-right: 10px; @@ -111,6 +112,7 @@ export default defineComponent({ :::demo ```vue +