VerticalSwitch

Switching sides vertically.

Example

1
0

Props

    🕹ī¸ standard props
    value
    boolean
    The current state of the switch (true or false)
    false
    rounded
    boolean
    If true, the switch will have rounded corners
    false
    🎨 style props
    --vertical-switch-height
    size
    Height of the vertical switch
    60px
    --vertical-switch-width
    size
    Width of the vertical switch
    30px
    --vertical-switch-container-border-radius
    size
    Border radius of the switch container
    4px
    --vertical-switch-slider-border-radius
    size
    Border radius of the slider
    4px
    --vertical-switch-background-color
    color
    Background color of the switch
    #90CAF9
    --vertical-switch-selected-option-color
    color
    Color of the selected option
    #90CAF9
    --vertical-switch-slider-color
    color
    Color of the slider
    white
    --vertical-switch-option-color
    color
    Color of the options (1 and 0)
    white
    --vertical-switch-font-size
    size
    Font size for the options
    11px
    --vertical-switch-animation-duration
    time
    Duration of the switch animation
    0.1s

Slots

    falseOptionSnippet
    Snippet for the false option
    Default content:
    0
    trueOptionSnippet
    Snippet for the true option
    Default content:
    1

Events

    onchange
    Event triggered when the value of the switch changes