Collapse layout
Overview
The collapse layout is a sidebar layout that can be collapsed or expanded. It is useful for applications that need to display a lot of information in a small space.
Features
- Collapsible sidebar
- Single or nested links
- Scrollable middle area
- Responsive support
Anatomy
vue
<template>
<TairoCollapseLayout>
<TairoCollapseSidebar>
<TairoCollapseSidebarHeader />
<TairoCollapseSidebarClose />
<TairoCollapseSidebarLinks>
<TairoCollapseSidebarLink />
<TairoCollapseCollapsible>
<template #trigger>
<TairoCollapseCollapsibleTrigger />
</template>
<TairoCollapseCollapsibleLink />
</TairoCollapseCollapsible>
</TairoCollapseSidebarLinks>
</TairoCollapseSidebar>
<TairoCollapseContent>
<slot />
</TairoCollapseContent>
</TairoCollapseLayout>
</template>
css
@theme {
--tairo-collapse-width-open: 17rem;
--tairo-collapse-width-collapsed: 5rem;
}