Collapsible
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.
<template>
<ICollapsible>
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
</template>
You can use the header slot to provide a custom title for the collapsible panel's heading.
<template>
<ICollapsible>
<ICollapsibleItem>
<template #header>Item 1</template>
Item 1 content
</ICollapsibleItem>
<ICollapsibleItem>
<template #header>Item 2</template>
Item 2 content
</ICollapsibleItem>
<ICollapsibleItem>
<template #header>Item 3</template>
Item 3 content
</ICollapsibleItem>
</ICollapsible>
</template>
Panels can be opened by default, on page load, using the v-model directive of the <ICollapsible> component. First, you'll need to assign an id to the <ICollapsibleItem> components which will identify the open panels.
<script>
export default {
data() {
return {
open: ['collapsible-item-1']
};
}
};
</script>
<template>
<ICollapsible v-model="open">
<ICollapsibleItem name="collapsible-item-1" title="Item 1">
Item 1 content
</ICollapsibleItem>
<ICollapsibleItem name="collapsible-item-2" title="Item 2">
Item 2 content
</ICollapsibleItem>
<ICollapsibleItem name="collapsible-item-3" title="Item 3">
Item 3 content
</ICollapsibleItem>
</ICollapsible>
</template>
Accordion collapsible groups can have only one content panel open at a single time. This behaviour can be set using the accordion property.
<template>
<ICollapsible accordion>
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
</template>
Inkline includes basic predefined collapsible colors that you can use within your application. You can apply a style using the color property.
<template>
<ICollapsible color="light">
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
<ICollapsible color="dark">
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
<ICollapsible color="transparent">
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
</template>
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.
<template>
<ICollapsible size="sm">
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
<ICollapsible size="md">
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
<ICollapsible size="lg">
<ICollapsibleItem title="Item 1"> Item 1 content </ICollapsibleItem>
<ICollapsibleItem title="Item 2"> Item 2 content </ICollapsibleItem>
<ICollapsibleItem title="Item 3"> Item 3 content </ICollapsibleItem>
</ICollapsible>
</template>
ICollapsible
ICollapsibleItem
ICollapsible
ICollapsibleItem
ICollapsible
ICollapsible
ICollapsibleItem