Preview
The collapsible component consists of two parts: the anchor and the content. If the anchor slot is not filled, the anchor will default to a basic button with text. The content must be provided and is the element that can be hidden or shown when the anchor is clicked.
Basic Usage Without Anchor Slot #
<div> <dt-collapsible class="d-fc-primary" anchorText="Label 1" maxWidth="340px" initial-focus-element="first" > <template #content> <div class="d-ta-center d-ba d-bc-warning d-bgc-warning d-bas-dotted d-baw2 d-p-100 d-code--sm">(content slot)</div> </template> </dt-collapsible> <dt-collapsible anchorText="Label 2" maxWidth="340px" initial-focus-element="first" > <template #content> <div class="d-ta-center d-ba d-bc-warning d-bgc-warning d-bas-dotted d-baw2 d-p-100 d-code--sm">(content slot)</div> </template> </dt-collapsible> </div>
With Anchor Slot #
<dt-collapsible :open="isOpen"> <template #anchor> <dt-button @click="toggleIsOpen"> Click Me! </dt-button> </template> <template #content> <div> This will be shown in the expanded area. </div> </template> </dt-collapsible>
Vue API #
import { DtCollapsible } from '@dialpad/dialtone-vue';Slots
Name
|
Type
|
|---|---|
anchor | Slot for the anchor element that toggles the collapsible content |
content | Slot for the collapsible element that is expanded by the anchor |
Props
Name
|
Default
|
Type
|
|---|---|---|
anchorClass | null | string|array|object Additional class name for the anchor wrapper element. |
anchorText | null | string Text that is displayed on the anchor if nothing is passed in the slot.
Ignored if the anchor slot is used. |
ariaLabel | null | string Label on the collapsible content. Should provide this or ariaLabelledBy but not both. |
ariaLabelledBy | null | string Id of the element that labels the collapsible content. Defaults to the anchor element.
Should provide this or ariaLabel but not both. |
contentClass | null | string|array|object Additional class name for the content wrapper element. |
contentElementType | 'div' | string HTML element type (tag name) of the content wrapper element. |
elementType | 'div' | string HTML element type (tag name) of the root element of the component. |
id | generated unique ID | string The id of the content wrapper. |
maxHeight | null | string The maximum height of the collapsible element.
Possible units rem|px|%|em |
maxWidth | null | string The maximum width of the anchor and collapsible element.
Possible units rem|px|%|em |
open | null |
"null"
|
"true"
|
"false"
Controls whether the collapsible is shown. When null (default), the collapsible
starts expanded and toggles on click. When set to true or false, the default
trigger is disabled and the parent controls visibility via v-model:open. |
Events
Name
|
Type
|
|---|---|
opened | Boolean Event fired when the content is shown or hidden |
update:open | undefined Event fired to sync the open prop with the parent component |