PricingToggle
一个可自定义的切换按钮，用于切换付款频率。
用法
建立在 Headless UI Switch 组件之上，使用 v-model 绑定切换按钮的值。
<script setup lang="ts">
const isYearly = ref(false)
</script>
<template>
<UPricingToggle v-model="isYearly" class="max-w-xs" />
</template>
插槽
left
{}
right
{}
属性
ui
DeepPartial<{ wrapper: string; marker: string; active: string; inactive: string; base: string; left: string; right: string; }>
{}left
string
"每月"right
string
"每年"modelValue
boolean
false配置
{
wrapper: 'ring-1 ring-gray-300 dark:ring-gray-700 flex items-center relative h-8 w-auto flex-shrink-0 cursor-pointer rounded-full p-1 w-full focus:outline-none',
marker: 'w-1/2 text-white dark:text-gray-900 pointer-events-none inline-block h-6 transform rounded-full bg-gray-900 dark:bg-white shadow transition duration-200 ease-in-out z-0 relative',
active: 'text-white dark:text-gray-900',
inactive: 'text-gray-500 dark:text-gray-400',
base: 'absolute inset-y-0 w-1/2 flex items-center justify-center pointer-events-none z-[1] transition-colors duration-200 select-none text-xs font-semibold flex-shrink-0',
left: 'left-0',
right: 'right-0'
}