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.
Item Header
You can use the header
slot to provide a custom title for the collapsible panel’s heading.
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.
Accordion
Accordion collapsible groups can have only one content panel open at a single time. This behaviour can be set using the accordion
property.
Color Variants
Inkline includes basic predefined collapsible colors that you can use within your application. You can apply a style using the color
property.
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
.
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