diff --git a/examples_src/src/auto-ui/components/switch/index.tsx b/examples_src/src/auto-ui/components/switch/index.tsx index 506a8686..c0d6c0fe 100644 --- a/examples_src/src/auto-ui/components/switch/index.tsx +++ b/examples_src/src/auto-ui/components/switch/index.tsx @@ -11,6 +11,7 @@ interface IProps { type?: 'primary' | 'secondary' | 'danger' icon?: boolean mini?: boolean + minimum?: boolean disabled?: boolean className?: string children?: null @@ -29,6 +30,7 @@ const Switch: React.FC = props => { className, onChange, mini, + minimum, ...otherProps } = props @@ -40,6 +42,7 @@ const Switch: React.FC = props => { 'x-switch--io': !mini && i && o, 'x-switch--disabled': disabled, 'x-switch--mini': mini, + 'x-switch--minimum': minimum, }, className, ) diff --git a/examples_src/src/auto-ui/components/switch/style/index.scss b/examples_src/src/auto-ui/components/switch/style/index.scss index f59275a6..541df0b3 100644 --- a/examples_src/src/auto-ui/components/switch/style/index.scss +++ b/examples_src/src/auto-ui/components/switch/style/index.scss @@ -3,25 +3,25 @@ @import '../../theme.scss'; .x-switch { + position: relative; display: inline-flex; width: px(100); height: px(54); background-color: var(--x-switch-bg-color); border-radius: px(27); transition: all 0.3s ease-out; - position: relative; > em { + position: absolute; + top: px(4); + left: px(4); display: flex; align-items: center; justify-content: center; - border-radius: 50%; width: px(46); height: px(46); - position: absolute; - left: px(4); - top: px(4); background-color: #fff; + border-radius: 50%; transition: all 0.3s ease-out; svg { @@ -77,20 +77,20 @@ sub, sup { + position: absolute; + top: 0; + left: 0; display: flex; align-items: center; justify-content: flex-start; - position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; - font-style: normal; - color: #fff; padding: 0 px(20); + color: #fff; font-size: px(24); - transition: opacity 0.2s ease-out; + font-style: normal; opacity: 0; + transition: opacity 0.2s ease-out; } sub { @@ -128,4 +128,20 @@ } } } + + &--minimum { + width: px(64); + height: px(34); + + > em { + width: px(26); + height: px(26); + } + + &.x-switch--active { + em { + transform: translate(px(30), 0); + } + } + } } diff --git a/examples_src/src/pages/index.tsx b/examples_src/src/pages/index.tsx index a5b3871a..e364dc4d 100644 --- a/examples_src/src/pages/index.tsx +++ b/examples_src/src/pages/index.tsx @@ -32,6 +32,7 @@ const routes = [ 'switch_icon', 'switch_io', 'switch_mini', + 'switch_minimum', 'toast', 'toast_close', 'toast_duration', diff --git a/examples_src/src/pages/switch_minimum.tsx b/examples_src/src/pages/switch_minimum.tsx new file mode 100644 index 00000000..ffac76d3 --- /dev/null +++ b/examples_src/src/pages/switch_minimum.tsx @@ -0,0 +1,24 @@ +import * as React from 'react' +import { Layout, Space, Switch } from '../auto-ui' + +class Demo extends React.PureComponent { + state = { active: true } + + render() { + return ( + + + + + + + + ) + } + + private onChange = () => { + this.setState({ active: !this.state.active }) + } +} + +export default Demo diff --git a/examples_src/src/routes/index.tsx b/examples_src/src/routes/index.tsx index e5239de1..4c3ddec2 100644 --- a/examples_src/src/routes/index.tsx +++ b/examples_src/src/routes/index.tsx @@ -78,6 +78,7 @@ import PageSwitchDisabled from '../pages/switch_disabled' import PageSwitchIcon from '../pages/switch_icon' import PageSwitchIO from '../pages/switch_io' import PageSwitchMini from '../pages/switch_mini' +import PageSwitchMinimum from '../pages/switch_minimum' import PageSwitchType from '../pages/switch_type' import PageTabs from '../pages/tabs' import PageTimePicker from '../pages/time_picker' @@ -119,6 +120,7 @@ const routes: any[] = [ ['switch_icon', PageSwitchIcon], ['switch_io', PageSwitchIO], ['switch_mini', PageSwitchMini], + ['switch_minimum', PageSwitchMinimum], ['toast', PageToast], ['toast_callback', PageToastCallback], ['toast_close', PageToastClose],