PricingToggle
A customizable Toggle to switch the payment frequency.
Take a look at the SaaS template to see how you can build your own pricing page! (view source)
Usage
Built on top of the Headless UI Switch component, use a v-model to bind the value of the toggle.
<script setup lang="ts">
const isYearly = ref(false)
</script>
<template>
<UPricingToggle v-model="isYearly" class="max-w-xs" />
</template>
Slots
left
{}
right
{}
Props
ui
DeepPartial<{ wrapper: string; marker: string; active: string; inactive: string; base: string; left: string; right: string; }>
{}left
string
"Monthly"right
string
"Yearly"modelValue
boolean
falseConfig
{
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'
}