Toggle

Usage

Use a v-model to make the Toggle reactive.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color prop to change the style of the Toggle.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the Toggle.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "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": {},
  "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": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Toggle.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}