Usage
Use a v-model to make the Toggle reactive.
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}Style
Use the color prop to change the style of the Toggle.
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}Size
Use the size prop to change the size of the Toggle.
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}Icon
Use any icon from Iconify by setting the on-icon and off-icon props by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.toggle.default.onIcon and ui.toggle.default.offIcon.
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}Loading
Use the loading prop to show a loading icon and disable the Toggle.
Use the loading-icon prop to set a different icon or change it globally in ui.toggle.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}Disabled
Use the disabled prop to disable the Toggle.
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}Props
name
string
nullsize
ToggleSize
config.default.size"md""2xs""xs""sm""lg""xl""2xl"color
string
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
string
nullloadingIcon
string
config.default.loadingIconoffIcon
string
config.default.offIconmodelValue
boolean
falsedisabled
boolean
falseloading
boolean
falseConfig
{
"message": "You should use slots with <ContentRenderer>",
"value": null,
"excerpt": false,
"tag": "div"
}