Collapsible

Collapsible elements are used to show and hide content using a smooth reveal transition.

Example

Collapsing an element will animate the height from zero to its default value. This component is useful for creating clearly separated content sections such as FAQ pages.

Item 1

Item 2

Item 3

Item Title

You can use the title slot to provide a custom title for the collapsible panel's heading.

Item 1

Item 2

Item 3

Default Open Panels

Panels can be opened by default, on page load, using the v-model directive of the <i-collapsible> component. First, you'll need to assign an id to the <i-collapsible-item> components which will identify the open panels.

Item 1

Item 1 content

Item 2

Item 3

Accordion

Accordion collapsible groups can have only one content panel open at a single time. This behaviour can be set using the accordion property.

Item 1

Item 2

Item 3

Color Variants

Inkline includes basic predefined collapsible styles that you can use within your application. You can apply a style using the variant property.

Component API

Here you can find a list of the various customization options you can use for the collapsible component as props, as well as available slots and events.

Property accordion

Type Boolean

Accepted true, false

Default false

Description Sets the collapsible in accordion mode.

Property value

Type Array

Default []

Description Sets the default active collapsible item and stores opened collapsible panels. To be used together with the v-model directive.

Property variant

Type String

Accepted light, dark, unstyled

Default light

Description Sets the color variant of the collapsible component.

Property title

Type String

Description Sets the title of the collapsible panel. Replaceable using the title slot.

Property id

Type String

Default collapsible-item-<uid>

Description Sets the identifier of the collapsible item.

Sass Variables

Here you can find a list of the Sass variables you can use for the collapsible components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Property $collapsible-border-radius

Default $border-radius-md

Property $collapsible-item-padding

Default $spacer

Property $collapsible-color-for-light-variant

Default $color-for-light-variant

Property $collapsible-color-for-dark-variant

Default $color-for-dark-variant

Property $collapsible-variant-{variant}

Default collapsible-variant($color-{variant})

Property $collapsible-variants

Default

(
    light: $collapsible-variant-light,
    dark: $collapsible-variant-dark
)

Function collapsible-variant

Default

@function collapsible-variant($variant) {
    $collapsible-variant-background: $variant;
    $collapsible-variant-color: variant-color-by-luminance($variant, $collapsible-color-for-light-variant, $collapsible-color-for-dark-variant);
    $collapsible-variant-border-color: variant-color-by-luminance($variant, $border-color-dark, darken($border-color-light, 10%));
    $collapsible-variant-body-background: variant-color-by-luminance($variant, $color-gray-90, $color-white);

    $variant-map: (
        background: $collapsible-variant-background,
        color: $collapsible-variant-color,
        border-color: $collapsible-variant-border-color,
        body-background: $collapsible-variant-body-background
    );

    @return $variant-map;
}