Toggle Icons
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- 带图标的开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带图标的开关</h3>
<div class="space-y-6">
<!-- 基础图标开关 (太阳/月亮) -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<span class="mr-3 text-sm font-medium text-gray-900">切换主题</span>
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:flex after:justify-center after:items-center after:transition-all peer-checked:bg-blue-600">
<!-- 太阳图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-yellow-500 peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<!-- 月亮图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-blue-200 opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</div>
</label>
</div>
<!-- 开/关图标开关 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-green-600">
<!-- 关闭图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-gray-400 peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<!-- 开启图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">系统状态</span>
</label>
</div>
<!-- 音频开关 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-purple-600">
<!-- 静音图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-gray-400 peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"></path>
</svg>
<!-- 音量图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">静音/取消静音</span>
</label>
</div>
</div>
</div>
<!-- 带文本标签的图标开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">带文本标签的图标开关</h3>
<div class="space-y-6">
<!-- 在按钮上显示文本 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-16 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600">
<span class="absolute left-1 text-[10px] font-medium text-gray-900 peer-checked:opacity-0">关闭</span>
<span class="absolute right-1 text-[10px] font-medium text-white opacity-0 peer-checked:opacity-100">开启</span>
</div>
</label>
</div>
<!-- 英文ON/OFF文本 -->
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-16 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-green-600">
<span class="absolute left-1 text-[10px] font-medium text-gray-900 peer-checked:opacity-0">OFF</span>
<span class="absolute right-1 text-[10px] font-medium text-white opacity-0 peer-checked:opacity-100">ON</span>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">电源</span>
</label>
</div>
</div>
</div>
<!-- 双色图标开关 -->
<div class="space-y-4">
<h3 class="text-lg font-medium text-gray-900">双色图标开关</h3>
<div class="flex items-center gap-2">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="relative w-14 h-7 bg-red-500 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 rounded-full peer peer-checked:bg-green-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all">
<!-- 红灯图标 (未选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute left-[3px] top-[3px] h-5 w-5 text-white peer-checked:opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<!-- 绿灯图标 (选中状态) -->
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-[3px] top-[3px] h-5 w-5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<span class="ml-3 text-sm font-medium text-gray-900">系统状态</span>
</label>
</div>
</div>
</div>
</section>
Copied to clipboard