使用
使用 v-model 使切换响应式。
<script setup lang="ts">
const selected = ref(false)
</script>
<template>
<UToggle v-model="selected" />
</template>
样式
使用 color 属性更改切换的样式。
<template>
<UToggle color="primary" />
</template>
尺寸
使用 size 属性更改切换的尺寸。
<template>
<UToggle size="md" />
</template>
图标
使用 Iconify 中的任何图标，通过设置 on-icon 和 off-icon 属性来实现，使用此模式：i-{collection_name}-{icon_name} 或在 ui.toggle.default.onIcon 和 ui.toggle.default.offIcon 中全局更改。
<template>
<UToggle
on-icon="i-heroicons-check-20-solid"
off-icon="i-heroicons-x-mark-20-solid"
/>
</template>
加载
使用 loading 属性显示加载图标并禁用切换。
使用 loading-icon 属性设置不同的图标，或在 ui.toggle.default.loadingIcon 中全局更改。默认值为 i-heroicons-arrow-path-20-solid。
<template>
<UToggle loading />
</template>
禁用
使用 disabled 属性禁用切换。
<template>
<UToggle disabled />
</template>
属性
名称
字符串
null尺寸
切换尺寸
config.default.size"md""2xs""xs""sm""lg""xl""2xl"颜色
字符串
config.default.colorui
{ base?: string; rounded?: string; ring?: string; active?: string; inactive?: string; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }, any>; container?: DeepPartial<...>; icon?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}id
字符串
null加载图标
字符串
config.default.loadingIcon关闭图标
字符串
config.default.offIcon模型值
布尔值
false禁用
布尔值
false加载
布尔值
false配置
{
base: 'relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
rounded: 'rounded-full',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
active: 'bg-{color}-500 dark:bg-{color}-400',
inactive: 'bg-gray-200 dark:bg-gray-700',
size: {
'2xs': 'h-3 w-5',
xs: 'h-3.5 w-6',
sm: 'h-4 w-7',
md: 'h-5 w-9',
lg: 'h-6 w-11',
xl: 'h-7 w-[3.25rem]',
'2xl': 'h-8 w-[3.75rem]'
},
container: {
base: 'pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
active: {
'2xs': 'translate-x-2 rtl:-translate-x-2',
xs: 'translate-x-2.5 rtl:-translate-x-2.5',
sm: 'translate-x-3 rtl:-translate-x-3',
md: 'translate-x-4 rtl:-translate-x-4',
lg: 'translate-x-5 rtl:-translate-x-5',
xl: 'translate-x-6 rtl:-translate-x-6',
'2xl': 'translate-x-7 rtl:-translate-x-7'
},
inactive: 'translate-x-0 rtl:-translate-x-0',
size: {
'2xs': 'h-2 w-2',
xs: 'h-2.5 w-2.5',
sm: 'h-3 w-3',
md: 'h-4 w-4',
lg: 'h-5 w-5',
xl: 'h-6 w-6',
'2xl': 'h-7 w-7'
}
},
icon: {
base: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
active: 'opacity-100 ease-in duration-200',
inactive: 'opacity-0 ease-out duration-100',
size: {
'2xs': 'h-2 w-2',
xs: 'h-2 w-2',
sm: 'h-2 w-2',
md: 'h-3 w-3',
lg: 'h-4 w-4',
xl: 'h-5 w-5',
'2xl': 'h-6 w-6'
},
on: 'text-{color}-500 dark:text-{color}-400',
off: 'text-gray-400 dark:text-gray-500',
loading: 'animate-spin text-{color}-500 dark:text-{color}-400'
},
default: {
onIcon: null,
offIcon: null,
loadingIcon: 'i-heroicons-arrow-path-20-solid',
color: 'primary',
size: 'md'
}
}