开关

变体

默认

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="switch bw" type="checkbox" />
	<input checked="{true}" class="switch success" type="checkbox" />
	<input checked="{true}" class="switch warn" type="checkbox" />
	<input checked="{true}" class="switch danger" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch bw'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch warn'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch danger'
    type='checkbox' />
</div>

Bordered 有色边框

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input class="switch bordered bw" type="checkbox" />
	<input class="switch bordered success" type="checkbox" />
	<input class="switch bordered warn" type="checkbox" />
	<input class="switch bordered danger" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input className='switch bordered bw'
    type='checkbox' />
  <input className='switch bordered success'
    type='checkbox' />
  <input className='switch bordered warn'
    type='checkbox' />
  <input className='switch bordered danger'
    type='checkbox' />
</div>

Ghost 幽灵

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input class="switch ghost bw" type="checkbox" />
	<input class="switch ghost success" type="checkbox" />
	<input class="switch ghost warn" type="checkbox" />
	<input class="switch ghost danger" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input className='switch ghost bw'
    type='checkbox' />
  <input className='switch ghost success'
    type='checkbox' />
  <input className='switch ghost warn'
    type='checkbox' />
  <input className='switch ghost danger'
    type='checkbox' />
</div>

尺寸

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="switch success xs" type="checkbox" />
	<input checked="{true}" class="switch success sm" type="checkbox" />
	<input checked="{true}" class="switch success md" type="checkbox" />
	<input checked="{true}" class="switch success lg" type="checkbox" />
	<input checked="{true}" class="switch success xl" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch success xs'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success sm'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success md'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success lg'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success xl'
    type='checkbox' />
</div>

形状

默认圆形。接受以下值:

square

方形

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="switch success xs square" type="checkbox" />
	<input checked="{true}" class="switch success sm square" type="checkbox" />
	<input checked="{true}" class="switch success md square" type="checkbox" />
	<input checked="{true}" class="switch success lg square" type="checkbox" />
	<input checked="{true}" class="switch success xl square" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch success xs square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success sm square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success md square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success lg square'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success xl square'
    type='checkbox' />
</div>

禁用状态

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input class="switch success" disabled="{true}" type="checkbox" />
	<input
		checked="{true}"
		class="switch success"
		disabled="{true}"
		type="checkbox"
	/>
</div>

<div className='flex gap-4'>
  <input className='switch success'
    disabled={true}
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success'
    disabled={true}
    type='checkbox' />
</div>

自定义内容

您还可以自定义开关滑块的内容。只需在其上添加 data-content 属性即可。

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<input
		checked="{true}"
		class="switch success xs"
		data-content="✓"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success sm"
		data-content="a"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success md"
		data-content="★"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success lg"
		data-content="☀"
		type="checkbox"
	/>
	<input
		checked="{true}"
		class="switch success xl"
		data-content="💪"
		type="checkbox"
	/>
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='switch success xs'
    data-content='✓'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success sm'
    data-content='a'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success md'
    data-content='★'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success lg'
    data-content='☀'
    type='checkbox' />
  <input defaultChecked={true}
    className='switch success xl'
    data-content='💪'
    type='checkbox' />
</div>

步骤条表格