Collapsible

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

Basic 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.

<i-collapsible>
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

Item Header

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

<i-collapsible>
    <i-collapsible-item>
        <template #header>Item 1</template>
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item>
        <template #header>Item 2</template>
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item>
        <template #header>Item 3</template>
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

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
<i-collapsible v-model="open">
    <i-collapsible-item name="collapsible-item-1" title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item name="collapsible-item-2" title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item name="collapsible-item-3" title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

Accordion

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

<i-collapsible accordion>
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

Color Variants

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

<i-collapsible color="light">
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

<i-collapsible color="dark">
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

<i-collapsible color="blank">
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

Size Variants

You’re able to use the size modifier to control the text and spacing size of your collapsible, using one of the available sizes: sm, md, and lg. The default size is set to md.

<i-collapsible size="sm">
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

<i-collapsible size="md">
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

<i-collapsible size="lg">
    <i-collapsible-item title="Item 1">
        Item 1 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 2">
        Item 2 content
    </i-collapsible-item>
    <i-collapsible-item title="Item 3">
        Item 3 content
    </i-collapsible-item>
</i-collapsible>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    accordion
    TypeBoolean
    Defaultfalse
    Description Display the collapsible as an accordion, keeping a maximum of one open collapsible item
  • Property
    color
    Type'light' | 'dark' | 'blank'
    Default'light'
    Description The color variant of the button
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the collapsible
  • Property
    modelValue
    TypeString[]
    Default''
    Description Used to determine which collapsible item is open

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default collapsible content

Events

Use events to react to something happening inside the component.

  • Property
    update:modelValue
    Description Event emitted for setting the modelValue

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----background
    Valuecolor('light')
    Description The background of the collapsible component
  • Property
    ----border-top-color
    Valuecolor('light-60')
    Description The border top color of the collapsible component
  • Property
    ----border-right-color
    Valuecolor('light-60')
    Description The border right color of the collapsible component
  • Property
    ----border-bottom-color
    Valuecolor('light-60')
    Description The border bottom color of the collapsible component
  • Property
    ----border-left-color
    Valuecolor('light-60')
    Description The border left color of the collapsible component
  • Property
    ----border-color
    Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
    Description The border color of the collapsible component
  • Property
    ----border-style
    Valuevar(--border-style)
    Description The border style of the collapsible component
  • Property
    ----border-top-width
    Valuevar(--border-top-width)
    Description The border top width of the collapsible component
  • Property
    ----border-right-width
    Valuevar(--border-right-width)
    Description The border right width of the collapsible component
  • Property
    ----border-bottom-width
    Valuevar(--border-bottom-width)
    Description The border bottom width of the collapsible component
  • Property
    ----border-left-width
    Valuevar(--border-left-width)
    Description The border left width of the collapsible component
  • Property
    ----border-width
    Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
    Description The border width of the collapsible component
  • Property
    ----border-top-left-radius
    Valuevar(--border-top-left-radius)
    Description The border top left radius of the collapsible component
  • Property
    ----border-top-right-radius
    Valuevar(--border-top-right-radius)
    Description The border top right radius of the collapsible component
  • Property
    ----border-bottom-right-radius
    Valuevar(--border-bottom-right-radius)
    Description The border bottom right radius of the collapsible component
  • Property
    ----border-bottom-left-radius
    Valuevar(--border-bottom-left-radius)
    Description The border bottom left radius of the collapsible component
  • Property
    ----border-radius
    Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
    Description The border radius of the collapsible component
  • Property
    ----box-shadow-offset-x
    Valuevar(--box-shadow-offset-x)
    Description The box shadow horizontal offset of the collapsible component
  • Property
    ----box-shadow-offset-y
    Valuevar(--box-shadow-offset-y)
    Description The box shadow vertical offset of the collapsible component
  • Property
    ----box-shadow-blur-radius
    Valuevar(--box-shadow-blur-radius)
    Description The box shadow blur radius of the collapsible component
  • Property
    ----box-shadow-spread-radius
    Valuevar(--box-shadow-spread-radius)
    Description The box shadow spread radius of the collapsible component
  • Property
    ----box-shadow-color
    Valuevar(--box-shadow-color)
    Description The box shadow spread radius of the collapsible component
  • Property
    ----box-shadow
    Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
    Description The box shadow of the collapsible component
  • Property
    ----color
    Valuecontrast-color($color-light)
    Description The color of the collapsible component
  • Property
    ----font-size
    Valuefont-size()
    Description The font size of the collapsible component
  • Property
    ----padding-top
    Valuevar(--padding-top)
    Description The padding top of the collapsible component
  • Property
    ----padding-right
    Valuevar(--padding-right)
    Description The padding right of the collapsible component
  • Property
    ----padding-bottom
    Valuevar(--padding-bottom)
    Description The padding bottom of the collapsible component
  • Property
    ----padding-left
    Valuevar(--padding-left)
    Description The padding left of the collapsible component
  • Property
    ----padding
    Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
    Description The padding of the collapsible component
  • Property
    ----header--background
    Valuevar(----background)
    Description The background of the collapsible component header
  • Property
    ----header--border-color
    Valuevar(----border-color)
    Description The border color of the collapsible component header
  • Property
    ----header--border-style
    Valuevar(----border-style)
    Description The border style of the collapsible component header
  • Property
    ----header--border-top-width
    Valuevar(----border-top-width)
    Description The border top width of the collapsible component header
  • Property
    ----header--border-right-width
    Valuevar(----border-right-width)
    Description The border right width of the collapsible component header
  • Property
    ----header--border-bottom-width
    Valuevar(----border-bottom-width)
    Description The border bottom width of the collapsible component header
  • Property
    ----header--border-left-width
    Valuevar(----border-left-width)
    Description The border left width of the collapsible component header
  • Property
    ----header--border-width
    Valuevar(----header--border-top-width) var(----header--border-right-width) var(----header--border-bottom-width) var(----header--border-left-width)
    Description The border width of the collapsible component header
  • Property
    ----header--color
    Valuevar(----color)
    Description The color of the collapsible component header
  • Property
    ----header--padding-top
    Valuevar(----padding-top)
    Description The padding top of the collapsible component header
  • Property
    ----header--padding-right
    Valuevar(----padding-right)
    Description The padding right of the collapsible component header
  • Property
    ----header--padding-bottom
    Valuevar(----padding-bottom)
    Description The padding bottom of the collapsible component header
  • Property
    ----header--padding-left
    Valuevar(----padding-left)
    Description The padding left of the collapsible component header
  • Property
    ----header--padding
    Valuevar(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)
    Description The padding of the collapsible component header
  • Property
    ----body--background
    Valuecolor('white')
    Description The background of the collapsible component body
  • Property
    ----body--border-color
    Valuevar(----border-color)
    Description The border color of the collapsible component body
  • Property
    ----body--border-style
    Valuevar(----border-style)
    Description The border style of the collapsible component body
  • Property
    ----body--border-top-width
    Value0
    Description The border top width of the collapsible component body
  • Property
    ----body--border-right-width
    Valuevar(----border-right-width)
    Description The border right width of the collapsible component body
  • Property
    ----body--border-bottom-width
    Valuevar(----border-bottom-width)
    Description The border bottom width of the collapsible component body
  • Property
    ----body--border-left-width
    Valuevar(----border-left-width)
    Description The border left width of the collapsible component body
  • Property
    ----body--border-width
    Valuevar(----body--border-top-width) var(----body--border-right-width) var(----body--border-bottom-width) var(----body--border-left-width)
    Description The border width of the collapsible component body
  • Property
    ----body--color
    Valuevar(----color)
    Description The color of the collapsible component body
  • Property
    ----body--padding-top
    Valuevar(----padding-top)
    Description The padding top of the collapsible component body
  • Property
    ----body--padding-right
    Valuevar(----padding-right)
    Description The padding right of the collapsible component body
  • Property
    ----body--padding-bottom
    Valuevar(----padding-bottom)
    Description The padding bottom of the collapsible component body
  • Property
    ----body--padding-left
    Valuevar(----padding-left)
    Description The padding left of the collapsible component body
  • Property
    ----body--padding
    Valuevar(----body--padding-top) var(----body--padding-right) var(----body--padding-bottom) var(----body--padding-left)
    Description The padding of the collapsible component body