The UiOverlay is an overlay component, best used as a base component for other components that should behave as an overlay. Eg Menus, Dialogs, Sheets
- Teleports to anywhere in the DOM
- Renders no wrapper element
- Traps focus within itself
- Keeps track of all active overlays
- Focuses on next active overlay when closed
- Supports transition
Name | Type | Default | Description |
---|---|---|---|
modelValue | Boolean |
undefined | Used internally by v-model |
disabled | Boolean |
undefined | This prop closes the <UiOverlay> if openedm and disallows any attempt to open |
to | String |
'body' | A valid querySelector to render the overlay. Throws an error if an invalid value is recieved |
restoreScroll | Boolean |
true | Use this if you want the previous window scroll positions to be restored when the <UiOverlay> is closed |
restoreFocus | Boolean |
true | Use this if you want to save the activeElement before the UiOverlay is opened, so the saved activeElement can be focused on when the UiOverlay is closed |
<slot name='prepend'/>
<props.tag data-ui-switch='' class='root'>
<div class='track'>
<slot name='track'/>
</div>
<div class='thumb'>
<input/>
<slot name='thumb' />
</div>
</props.tag>
<slot name='append'/>
Name | Payload | Description |
---|---|---|
prepend |
| Use this slot to render something else before the root component, commonly used for prepending a <label/> |
track | Same as prepend | Use this slot to render anything inside the .track element |
thumb | Same as prepend | Use this slot to render anything inside the .thumb element |
default | Same as prepend | Use this slot to render anything inside the root element |
append | Same as prepend | Use this slot to render something else after the root component, commonly used for appending a <label/> |
All slots are optional, and can accept multiple elements
<div id='app'>
<UiSwitch/>
</div>
<div id='app'>
<UiSwitch v-model='switch'/>
</div>
<div id='app'>
<label for='switch'>
Toggle UiSwitch
</label>
<UiSwitch id='switch' v-model='switch'/>
</div>
<div id='app'>
<UiSwitch id='switch'>
<template v-slot:prepend='{active}'>
<label for='switch'>
Selected: {{active}}
</label>
</template>
<template v-slot:append='{validation, toggle}'>
<span v-if='validation.message' @click='toggle'>
Error!
</span>
</template>
</UiSwitch>
</div>
Name | Default value | Description |
---|---|---|
--ui-height | 28px | Use this variable to set the root element's height |
--ui-width | 44px | Use this variable to set the root element's width |
--ui-track-height | 100% | Sets the height of the track |
--ui-track-radius | 100% | Sets the border-radius of the track |
--ui-track-background | #999 | Sets the background of the track |
--ui-track-background-checked | #007bff | Sets the background of the track when the component is active |
--ui-thumb-size | 25px | Sets the height and width of the .thumb element |
--ui-thumb-radius | 50% | Sets the border-radius of the .thumb element |
--ui-thumb-offset | 1.5px | The gap between the thumb and the edges |
--ui-thumb-translatex |
| Computes the active state transformation |
--ui-thumb-background | #fff | The background of the thumb |