切换器/开关

基础使用

Loading...

function Demo() {
  const [openNotify, setOpenNotify] = useState(false)
  return (
    <CToggle
      value={openNotify}
      onChange={setOpenNotify}
      label={openNotify ? '点击关闭通知' : '点击打开通知'}
    />
  )
}

折叠/展开 代码

尺寸

Loading...

function Demo() {
  const [toggleStatus, setToggleStatus] = useState({
    xs: false,
    sm: false,
    md: false,
    lg: false,
    xl: false,
  })

  return (
    <>
      <div className="c-row c-items-center c-gutter-x-md">
        {Object.keys(toggleStatus).map(size => (
          <div key={size} className="">
            <CToggle
              size={size}
              value={toggleStatus[size]}
              onChange={v => setToggleStatus({ ...toggleStatus, [size]: v })}
              label={size}
            />
            <p>状态：{toggleStatus[size] ? 'true' : 'false'}</p>
          </div>
        ))}
      </div>
    </>
  )
}

折叠/展开 代码

禁用态

Loading...

function Demo() {
  return (
    <>
      <CToggle value={false} disabled label="禁用态" />
      <CToggle value={true} disabled label="禁用态" />
    </>
  )
}

折叠/展开 代码

Props

名称 (*代表必须)	描述	类型	默认值

No Data