Toggle 开关

用于开/关状态的二元切换控件。

导入

import { Toggle } from 'asterui'

示例

基础开关

简单的切换开关。

</>

import { Toggle } from 'asterui'

function App() {
  return (
      <Toggle />
    )
}

export default App

尺寸

开关可用的四种尺寸。

</>

import { Toggle, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Toggle size="xs" defaultChecked />
        <Toggle size="sm" defaultChecked />
        <Toggle size="md" defaultChecked />
        <Toggle size="lg" defaultChecked />
      </Space>
    )
}

export default App

颜色

不同上下文的颜色变体。

</>

import { Toggle, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Toggle color="primary" defaultChecked />
        <Toggle color="secondary" defaultChecked />
        <Toggle color="accent" defaultChecked />
        <Toggle color="info" defaultChecked />
        <Toggle color="success" defaultChecked />
        <Toggle color="warning" defaultChecked />
        <Toggle color="error" defaultChecked />
      </Space>
    )
}

export default App

禁用

非交互式禁用开关。

</>

import { Toggle, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Toggle disabled />
        <Toggle disabled defaultChecked />
      </Space>
    )
}

export default App

受控

带有受控状态的开关。

</>

Toggle is OFF

import { Toggle } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState(false)
  
  return (
      <div className="flex items-center gap-4">
        <Toggle checked={checked} onChange={(e) => setChecked(e.target.checked)} color="primary" />
        <span>Toggle is {checked ? 'ON' : 'OFF'}</span>
      </div>
    )
}

export default App

在表单中

使用 valuePropName 与 Form 组件集成的开关。

</>

Enable notifications

 

Dark mode

 

Save Settings

import { Toggle, Form, Button } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    alert(JSON.stringify(values, null, 2))
  }
  
  return (
      <Form onFinish={handleSubmit} className="max-w-md">
        <Form.Item name="notifications" label="Enable notifications" valuePropName="checked">
          <Toggle color="primary" />
        </Form.Item>
  
        <Form.Item name="darkMode" label="Dark mode" valuePropName="checked">
          <Toggle color="secondary" />
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Save Settings
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Toggle

属性	描述	类型	默认值
checked	受控勾选状态	boolean	-
defaultChecked	默认勾选状态(非受控)	boolean	false
onChange	开关状态更改时的回调	(e: ChangeEvent) => void	-
size	开关大小	'xs' | 'sm' | 'md' | 'lg'	'md'
color	开关颜色	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	禁用开关	boolean	false
className	额外的 CSS 类	string	-

可访问性

• 使用原生复选框输入以获得可访问性
• 支持使用空格键进行键盘激活
• 勾选/未勾选状态由屏幕阅读器宣布
• 禁用状态得到正确传达