import React from 'react'; import { Switch } from '@douyinfe/semi-ui'; () => ( <div> <Switch onChange={(v, e) => console.log(v)} aria-label="a switch for demo"></Switch> <br /> <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label="a switch for semi demo"></Switch> </div> );

import React from 'react'; import { Switch } from '@douyinfe/semi-ui'; () => ( <div> <Space style={{ marginBottom: 10, display: 'block' }}> <Switch size="small" aria-label="a switch for demo"></Switch> <Switch defaultChecked={true} size="small" aria-label="a switch for demo"></Switch> <Switch size="small" loading aria-label="a switch for demo" /> <Switch size="small" loading defaultChecked={true} aria-label="a switch for demo" /> </Space> <Space style={{ marginBottom: 10, display: 'block' }}> <Switch></Switch> <Switch defaultChecked={true} aria-label="a switch for demo"></Switch> <Switch loading aria-label="a switch for demo" /> <Switch loading defaultChecked={true} aria-label="a switch for demo" /> </Space> <Space> <Switch size="large"></Switch> <Switch defaultChecked={true} size="large"></Switch> <Switch size="large" loading /> <Switch size="large" loading defaultChecked={true} /> </Space> </div> );

import React from 'react'; import { Switch } from '@douyinfe/semi-ui'; () => ( <div> <Switch disabled aria-label="a switch for demo"></Switch> <br /> <Switch disabled checked={true} aria-label="a switch for demo"></Switch> </div> );

import React from 'react'; import { Switch } from '@douyinfe/semi-ui'; () => ( <div> <Switch checkedText="开" uncheckedText="关" /> <Switch checkedText="｜" uncheckedText="〇" style={{ marginLeft: 5 }} /> <br /> <br /> <Switch defaultChecked checkedText="开" uncheckedText="关" /> <Switch defaultChecked checkedText="｜" uncheckedText="〇" style={{ marginLeft: 5 }} /> <br /> <br /> <Switch checkedText="开" uncheckedText="关" size="large" /> <Switch checkedText="｜" uncheckedText="〇" size="large" style={{ marginLeft: 5 }} /> <br /> <br /> <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" /> <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" style={{ marginLeft: 5 }} /> </div> );

import React, { useState } from 'react'; import { Switch, Typography } from '@douyinfe/semi-ui'; () => { const [open, setOpen] = useState(); const { Title } = Typography; return ( <div style={{ display: 'flex', alignItems: 'center' }}> <Title heading={6} style={{ margin: 8 }}> {open ? '已开启' : '已关闭'} </Title> <Switch checked={open} onChange={setOpen} aria-label="a switch for demo" /> </div> ); };

import React from 'react'; import { Switch } from '@douyinfe/semi-ui'; () => { const [checked, setChecked] = useState(true); const onChange = checked => { setChecked(checked); }; return <Switch checked={checked} aria-label="a switch for demo" onChange={onChange} />; };

import React from 'react'; import { Switch } from '@douyinfe/semi-ui'; () => ( <div> <Switch loading /> <br /> <Switch loading defaultChecked={true} /> </div> );