CollapsibleDivider

Make everything collapsable

Example

Props

    🕹ī¸ standard props
    collapsed
    boolean
    Controls whether the divider is collapsed
    $bindable(false)
    openedIconName
    string
    Icon name when the divider is opened
    "mdi-chevron-left"
    collapsedIconName
    string
    Icon name when the divider is collapsed
    "mdi-chevron-right"
    disabled
    boolean
    Disables the collapsible button
    false
    🎨 style props
    --collapsible-divider-margin-right
    size
    Margin on the right side
    0rem
    --collapsible-divider-margin-left
    size
    Margin on the left side
    0.5rem
    --collapsible-divider-margin-top
    size
    Margin on the top
    0.5rem
    --collapsible-divider-margin-bottom
    size
    Margin on the bottom
    0.5rem
    --collapsible-divider-background-color
    color
    Background color of the divider
    rgb(var(--global-color-contrast-500), .5)
    --collapsible-divider-line-border-radius
    size
    Border radius of the divider line
    0.5rem
    --collapsible-divider-line-height
    size
    Height of the divider line
    0.1rem
    --collapsible-divider-button-border-radius
    size
    Border radius of the button
    9999px
    --collapsible-divider-button-border
    size
    Border size of the button
    0.1rem solid
    --collapsible-divider-button-border-color
    color
    Border color of the button
    rgb(var(--global-color-contrast-500), .5)
    --collapsible-divider-button-height
    size
    Height of the button
    25px
    --collapsible-divider-button-width
    size
    Width of the button
    25px

Slots

    No data available

Events

    onchange
    Triggered when the collapsed state changes
    AttributeTypeDescription
    collapsedbooleanThe new collapsed state
    onkeydown
    Triggered when a key is pressed down
    onkeyup
    Triggered when a key is released
    onkeypress
    Triggered when a key is pressed