ToggleView
A control that switches between on and off states.
ts
interface ToggleViewSignature {
Attributes: {
label?: string
name?: string
value?: string
'is-on'?: boolean
required?: boolean
disabled?: boolean
}
Slots: {
label: HTMLElement[]
'validity-options': HTMLOptionElement[]
}
}
class ToggleView extends HTMLElement<ToggleViewSignature> {
static formAssociated = true
readonly toggleStyle: 'button' | 'switch'
isOn: boolean
readonly name: string // Form participation property
value: string | null
setValidity(): void
setCustomValidity(): void
}
interface GlobalEventMap<Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap> {
'toggle:change': CustomEvent // User toggled the control
}
declare global {
interface HTMLElementTagNameMap {
'toggle-view': ToggleView // <toggle-view></toggle-view>
}
}Overview
You create a toggle by providing an is-on attribute and a label attribute.
View code
html
<toggle-view is-on>
<label-view slot="label" title="Vibrate on Ring" system-image="vibrate"></label-view>
<label-view slot="label" title="Enable vibration when the phone rings"></label-view>
</toggle-view>html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="stylesheet" href="https://unpkg.com/@swiftwc/ui@dev/css" />
<script type="module" src="https://unpkg.com/@swiftwc/ui@dev/client"></script>
</head>
<body>
<v-keyboard system-font="Inter"></v-keyboard>
<navigation-stack>
<scroll-view>
<v-stack>
<toggle-view is-on>
<label-view slot="label" title="Vibrate on Ring" system-image="vibrate"></label-view>
<label-view slot="label" title="Enable vibration when the phone rings"></label-view>
</toggle-view>
</v-stack>
</scroll-view>
</navigation-stack>
</body>
</html>Topics
Creates a toggle that displays a custom label:
html
<toggle-view label="Custom Label"></toggle-view>Relationships
Conforms To
HTMLElement