SwitchIcon 图标开关

图标开关组件在两个图标之间平滑过渡切换，常用于收藏、点赞、暗黑模式切换等场景。

基础用法

通过 v-model 双向绑定控制开关状态。iconOff 为关闭态图标，iconOn 为开启态图标，均传入 @tabler/icons-vue 的图标组件引用。

<script setup lang="ts">
import { ref } from 'vue'
import { TSwitchIcon } from '@gulcc/tabler-vue'
import { IconHeart } from '@tabler/icons-vue'

const active = ref(false)
</script>

<template>
  <TSwitchIcon v-model="active" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" />
</template>

不同图标切换

iconOff 和 iconOn 可使用完全不同的图标组件，适合暗黑模式、通知开关等场景。

<TSwitchIcon
  v-model="active"
  :iconOff="IconSun"
  :iconOn="IconMoon"
  colorOff="yellow"
  colorOn="indigo"
  aria-label="切换暗黑模式"
/>

颜色定制

通过 colorOff 和 colorOn 分别控制关闭态和开启态的 Tabler 文本颜色类名。

<TSwitchIcon v-model="active" :iconOff="IconStar" :iconOn="IconStar" colorOff="secondary" colorOn="yellow" />
<TSwitchIcon v-model="active" :iconOff="IconBulb" :iconOn="IconBell" colorOff="muted" colorOn="orange" />

动画变体

通过 variant 属性设置切换动画。Tabler 提供以下 9 种动画效果。

<TSwitchIcon variant="fade" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" />
<TSwitchIcon variant="scale" :iconOff="IconStar" :iconOn="IconStar" colorOff="secondary" colorOn="yellow" />
<TSwitchIcon variant="flip" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" />
<TSwitchIcon variant="slide-up" :iconOff="IconCircle" :iconOn="IconCircleFilled" colorOff="secondary" colorOn="primary" />
<TSwitchIcon variant="slide-down" :iconOff="IconCircle" :iconOn="IconCircleFilled" colorOff="secondary" colorOn="primary" />

禁用状态

设置 disabled 属性后，图标开关变为不可交互，鼠标和键盘操作均被阻止。

<TSwitchIcon v-model="active" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" disabled />

API

Props

参数	类型	默认值	说明
v-model / modelValue	boolean	false	当前开关状态
iconOff	Component	—	关闭（未选中）状态图标组件，来自 @tabler/icons-vue
iconOn	Component	—	开启（选中）状态图标组件，来自 @tabler/icons-vue
colorOff	string	'secondary'	关闭状态的 Tabler 文本颜色类名
colorOn	string	'red'	开启状态的 Tabler 文本颜色类名
variant	'fade' | 'scale' | 'flip' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-start' | 'slide-right' | 'slide-end'	—	切换动画变体（若不设置则为默认的无动画切换）
disabled	boolean	false	是否禁用
ariaLabel	string	'Toggle switch'	无障碍 aria-label 标签

Emits

事件名	参数	说明
update:modelValue	(value: boolean)	v-model 更新事件

Slots

无。图标通过 Props 传入组件引用。