Skip to content

Commit

Permalink
fix: [Switch] 修复@kdcloudjs/kdesign中未导出ISwitch选项 #963
Browse files Browse the repository at this point in the history
  • Loading branch information
@hidden7123 @albyben
hidden7123 authored and albyben committed Dec 13, 2024
1 parent 92ca19a commit e67d1ed
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 57 deletions.
1 change: 1 addition & 0 deletions components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export { default as Rate } from './rate'
export { default as Select } from './select'

export { default as Switch } from './switch'
export type { ISwitchProps } from './switch'

export { default as Steps, Step } from './steps'
export type { StepsProps as IStepsProps, StepProps as IStepProps } from './steps'
Expand Down
5 changes: 3 additions & 2 deletions components/switch/demo/basic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ title: 基本
import React from 'react'
import ReactDOM from 'react-dom'
import { Switch } from '@kdcloudjs/kdesign'
import type { ISwitchProps } from '@kdcloudjs/kdesign'

const Demo: React.FC = () => {
function onChange(checked) {
function onChange(checked: boolean): ISwitchProps['onChange'] {
console.log(`switch to ${checked}`)
}

Expand All @@ -26,4 +27,4 @@ const Demo: React.FC = () => {
}

ReactDOM.render(<Demo />, mountNode)
```
```
37 changes: 18 additions & 19 deletions components/switch/demo/toggle.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ title: 切换
import React from 'react'
import ReactDOM from 'react-dom'
import { Switch, Button } from '@kdcloudjs/kdesign'
import type { ISwitchProps } from '@kdcloudjs/kdesign'

const Demo: React.FC = () => {

const [checked,setChecked] = React.useState<boolean>(true)
const [loading,setLoading] = React.useState<boolean>(false)
const [checked, setChecked] = React.useState<ISwitchProps['checked']>(true)
const [loading, setLoading] = React.useState<ISwitchProps['loading']>(false)

const toggle = () => {
setChecked(!checked)
Expand All @@ -20,28 +20,27 @@ const Demo: React.FC = () => {
setLoading(!loading)
}

const onChange = (checked) => {
const onChange: ISwitchProps['onChange'] = (checked) => {
console.log(`switch to ${checked}`)
}

return (
<>
<br />
<Switch checked={checked} defaultChecked onChange={onChange} />
<br />
<Button type="primary" onClick={toggle}>
Toggle
</Button>
<br />
<Switch loading={loading} checked={checked} defaultChecked onChange={onChange} />
<br />
<Button type="primary" onClick={toggleToLoading}>
Toggle to loading
</Button>
</>
<br />
<Switch checked={checked} defaultChecked onChange={onChange} />
<br />
<Button type="primary" onClick={toggle}>
Toggle
</Button>
<br />
<Switch loading={loading} checked={checked} defaultChecked onChange={onChange} />
<br />
<Button type="primary" onClick={toggleToLoading}>
Toggle to loading
</Button>
</>
)

}

ReactDOM.render(<Demo />, mountNode)
```
```
72 changes: 36 additions & 36 deletions components/switch/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,49 @@ title: Switch
subtitle: 开关
---


开关是一种用于两种互斥状态之间进行切换的组件。

## 使用场景

需要触发激活或停用某些功能时，例如：“启用”和“不启用”。

## API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------------- | --------------------------------- | ---------------------------------------- | ------ | ---- |
| className | Switch 器类名 | string | - | |
| checked | 指定当前是否选中 | boolean | false | |
| checkedChildren | 选中时的内容 | string\|ReactNode | | |
| defaultChecked | 初始是否选中 | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| loading | 加载中的开关 | boolean | false | |
| size | 开关大小，可选值：`large` `small` | string | small | |
| unCheckedChildren | 非选中时的内容 | string\|ReactNode | | |
| onClick | 点击时回调函数 | Function(checked: boolean, event: Event) | | |
| onChange | 变化时回调函数 | Function(checked: boolean, event: Event) | | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------------- | --------------------------------- | ---------------------------------------- | ------ | ----- |
| className | Switch 器类名 | string | - | 1.0.0 |
| checked | 指定当前是否选中 | boolean | false | 1.0.0 |
| checkedChildren | 选中时的内容 | string\|ReactNode | | 1.0.0 |
| defaultChecked | 初始是否选中 | boolean | false | 1.0.0 |
| disabled | 是否禁用 | boolean | false | 1.0.0 |
| loading | 加载中的开关 | boolean | false | 1.0.0 |
| size | 开关大小，可选值：`large` `small` | string | small | 1.0.0 |
| unCheckedChildren | 非选中时的内容 | string\|ReactNode | | 1.0.0 |
| onClick | 点击时回调函数 | Function(checked: boolean, event: Event) | | 1.0.0 |
| onChange | 变化时回调函数 | Function(checked: boolean, event: Event) | | 1.0.0 |

## Design Token

| 分类 | 组件token | 全局token | 默认值 |
| --- | --- | --- | --- |
| color | --kd-c-switch-color-on | --kd-g-color-theme-6 | rgb(85, 130, 243) |
| | --kd-c-switch-color-off | - | #B2B2B2 |
| | --kd-c-switch-color-on-background-disabled | --kd-g-color-theme-4 | rgb(181, 207, 255) |
| | --kd-c-switch-color-off-background-disabled | - | #D9D9D9 |
| | --kd-c-switch-color-loading | --kd-g-color-ongoing | #276ff5 |
| | --kd-c-switch-color-font | --kd-g-color-white | #fff |
| font | --kd-c-switch-small-font-size | --kd-g-font-size-small | 12px |
| | --kd-c-switch-large-font-size | --kd-g-font-size-small | 12px |
| | --kd-c-switch-inner-font-size-small | --kd-g-font-size-small | 12px |
| line-height | --kd-c-switch-large-line-height | - | 20px |
| | --kd-c-switch-small-line-height | - | 16px |
| radius | --kd-c-switch-small-radius-border | - | 8px |
| sizing | --kd-c-switch-small-sizing-height | - | 16px |
| | --kd-c-switch-small-sizing-width | - | 32px |
| | --kd-c-switch-large-sizing-height | - | 20px |
| | --kd-c-switch-large-sizing-width | - | 40px |
| | --kd-c-switch-large-sizing-border-radius | - | 10px |
| spacing | --kd-c-switch-inner-spacing-margin | - | 0 5px 0 17px |
| | --kd-c-switch-inner-spacing-margin-checked | - | 0 17px 0 5px |
| | --kd-c-switch-inner-spacing-margin-large | - | 0 5px 0 21px |
| | --kd-c-switch-inner-spacing-margin-large-checked | - | 0 21px 0 5px |
| 分类 | 组件 token | 全局 token | 默认值 |
| ----------- | ------------------------------------------------ | ---------------------- | ------------------ |
| color | --kd-c-switch-color-on | --kd-g-color-theme-6 | rgb(85, 130, 243) |
| | --kd-c-switch-color-off | - | #B2B2B2 |
| | --kd-c-switch-color-on-background-disabled | --kd-g-color-theme-4 | rgb(181, 207, 255) |
| | --kd-c-switch-color-off-background-disabled | - | #D9D9D9 |
| | --kd-c-switch-color-loading | --kd-g-color-ongoing | #276ff5 |
| | --kd-c-switch-color-font | --kd-g-color-white | #fff |
| font | --kd-c-switch-small-font-size | --kd-g-font-size-small | 12px |
| | --kd-c-switch-large-font-size | --kd-g-font-size-small | 12px |
| | --kd-c-switch-inner-font-size-small | --kd-g-font-size-small | 12px |
| line-height | --kd-c-switch-large-line-height | - | 20px |
| | --kd-c-switch-small-line-height | - | 16px |
| radius | --kd-c-switch-small-radius-border | - | 8px |
| sizing | --kd-c-switch-small-sizing-height | - | 16px |
| | --kd-c-switch-small-sizing-width | - | 32px |
| | --kd-c-switch-large-sizing-height | - | 20px |
| | --kd-c-switch-large-sizing-width | - | 40px |
| | --kd-c-switch-large-sizing-border-radius | - | 10px |
| spacing | --kd-c-switch-inner-spacing-margin | - | 0 5px 0 17px |
| | --kd-c-switch-inner-spacing-margin-checked | - | 0 17px 0 5px |
| | --kd-c-switch-inner-spacing-margin-large | - | 0 5px 0 21px |
| | --kd-c-switch-inner-spacing-margin-large-checked | - | 0 21px 0 5px |

0 comments on commit e67d1ed

Please sign in to comment.