Switch 开关

行内tailwind/unocss用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

基础开关小型开关大型开关禁用状态 即默认状态增加disabled属性带文字开启状态

查看代码

<label>基础开关</label>
<input type="checkbox" class="relative h-7 w-[52px] cursor-pointer appearance-none rounded-full bg-gray-300 transition-colors duration-200 ease-in-out before:absolute before:left-1 before:top-1 before:size-5 before:rounded-full before:bg-white before:transition-all before:duration-200 before:content-[''] checked:bg-primary checked:before:translate-x-6 disabled:cursor-not-allowed disabled:bg-gray-200">

<label>小型开关</label>
<input type="checkbox" class="relative h-6 w-11 cursor-pointer appearance-none rounded-full bg-gray-300 transition-colors duration-200 ease-in-out before:absolute before:left-1 before:top-1 before:size-4 before:rounded-full before:bg-white before:transition-all before:duration-200 before:content-[''] checked:bg-primary checked:before:translate-x-5 disabled:cursor-not-allowed disabled:bg-gray-200">

<label>大型开关</label>
<input type="checkbox" class="relative h-8 w-14 cursor-pointer appearance-none rounded-full bg-gray-300 transition-colors duration-200 ease-in-out before:absolute before:left-1 before:top-1 before:size-6 before:rounded-full before:bg-white before:transition-all before:duration-200 before:content-[''] checked:bg-primary checked:before:translate-x-6 disabled:cursor-not-allowed disabled:bg-gray-200">

<label>禁用状态 <span class="text-sm text-gray-500">即默认状态增加disabled属性</span></label>
<input type="checkbox" disabled class="relative h-7 w-[52px] cursor-pointer appearance-none rounded-full bg-gray-300 transition-colors duration-200 ease-in-out before:absolute before:left-1 before:top-1 before:size-5 before:rounded-full before:bg-white before:transition-all before:duration-200 before:content-[''] checked:bg-primary checked:before:translate-x-6 disabled:cursor-not-allowed disabled:bg-gray-200">

<label>带文字</label>
<label class="flex items-center gap-3" for="switch">
  <input type="checkbox" class="relative h-7 w-[52px] cursor-pointer appearance-none rounded-full bg-gray-300 transition-colors duration-200 ease-in-out before:absolute before:left-1 before:top-1 before:size-5 before:rounded-full before:bg-white before:transition-all before:duration-200 before:content-[''] checked:bg-primary checked:before:translate-x-6 disabled:cursor-not-allowed disabled:bg-gray-200">
  <span class="text-sm font-medium">开启状态</span>
</label>

css 类用法

复制下面的index.css的class定义，并粘贴到组件或全局中使用

基础开关小型开关大型开关禁用状态带文字

开启状态

查看代码

html

<label>基础开关</label>
<input type="checkbox" class="switch">

<label>小型开关</label>
<input type="checkbox" class="switch switch-sm">

<label>大型开关</label>
<input type="checkbox" class="switch switch-lg">

<label>禁用状态</label>
<input type="checkbox" class="switch" disabled>

<label>带文字</label>
<div class="switch-wrapper">
  <input type="checkbox" class="switch">
  <span class="switch-label">开启状态</span>
</div>

index.css

.switch {
  @apply appearance-none w-[52px] h-7 rounded-full bg-gray-300 cursor-pointer checked:bg-primary relative transition-colors ease-in-out duration-200;
  @apply before:content-[''] before:absolute before:w-5 before:h-5 before:rounded-full before:top-1 before:left-1 before:bg-white before:transition-all before:duration-200;
  @apply checked:before:translate-x-6;

  &.switch-sm {
    @apply w-11 h-6;
    @apply before:w-4 before:h-4;
    @apply checked:before:translate-x-5;
  }

  &.switch-lg {
    @apply w-14 h-8;
    @apply before:w-6 before:h-6;
    @apply checked:before:translate-x-6;
  }

  &:disabled {
    @apply cursor-not-allowed opacity-50;
  }
}

.switch-wrapper {
  @apply flex items-center gap-3;
}

.switch-label {
  @apply text-sm font-medium;
}

/* Dark mode */
.dark {
  .switch {
    @apply bg-gray-600 checked:bg-primary;
  }
}