diff --git a/docs/mobile/api_v2/switch.md b/docs/mobile/api_v2/switch.md index adc38318d6..f2afd3507c 100644 --- a/docs/mobile/api_v2/switch.md +++ b/docs/mobile/api_v2/switch.md @@ -16,8 +16,12 @@ toc: false 使用场景:需要通过描述解释、提示结果时,可用带描述开关 -{{ desc }} +{{ label }} -### 禁用状态 +### 组件状态 -{{ disabled }} +{{ status }} + +### 开关尺寸 + +{{ size }} \ No newline at end of file diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less index f6953a8b51..201368ee26 100644 --- a/style/mobile/components/switch/v2/_index.less +++ b/style/mobile/components/switch/v2/_index.less @@ -5,8 +5,39 @@ .@{prefix}-switch { display: flex; align-items: center; + vertical-align: middle; + width: @switch-width; + height: @switch-height; + border-radius: @switch-radius; + background-color: @switch-unchecked-color; + position: relative; + transition: all .3s ease; overflow: hidden; + &--checked { + background-color: @switch-checked-color; + } + + &--disabled { + background-color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + background-color: @switch-checked-disabled-color; + } + + &--large { + width: @switch-large-width; + height: @switch-large-height; + border-radius: @switch-large-radius; + } + + &--small { + width: @switch-small-width; + height: @switch-small-height; + border-radius: @switch-small-radius; + } + &__label { position: absolute; top: 0; @@ -62,41 +93,6 @@ color: @switch-label-checked-color; } - &__body { - vertical-align: middle; - width: @switch-width; - height: @switch-height; - border-radius: @switch-radius; - background-color: @switch-unchecked-color; - position: relative; - transition: all .3s ease; - overflow: hidden; - - &--checked { - background-color: @switch-checked-color; - } - - &--disabled { - background-color: @switch-unchecked-disabled-color; - } - - &--checked&--disabled { - background-color: @switch-checked-disabled-color; - } - - &--large { - width: @switch-large-width; - height: @switch-large-height; - border-radius: @switch-large-radius; - } - - &--small { - width: @switch-small-width; - height: @switch-small-height; - border-radius: @switch-small-radius; - } - } - &__dot { position: absolute; left: @switch-dot-horizontal-margin;