accordion
Expandable sections from the Figma Make library: single or multiple open items, underline on hover, and a 3px focus ring.
How to add it
Import the accordion parts from @tastival.net/ui and compose accordion, accordion-item, accordion-trigger, and accordion-content. Later common components can reuse these same elements.
Import
import {
AccordionComponent,
AccordionItemComponent,
AccordionTriggerComponent,
AccordionContentComponent,
} from '@tastival.net/ui';
@Component({
imports: [
AccordionComponent,
AccordionItemComponent,
AccordionTriggerComponent,
AccordionContentComponent,
],
})
export class ExampleComponent {}Usage
<accordion type="single" [collapsible]="true" [disabled]="false" orientation="vertical" className="w-full" value="item-1">
<accordion-item value="item-1" [disabled]="false" className="border-0">
<accordion-trigger className="text-left">Shipping</accordion-trigger>
<accordion-content className="text-sm">Ships in 2 days.</accordion-content>
</accordion-item>
</accordion>
<accordion type="multiple" [collapsible]="false" [disabled]="false" orientation="horizontal" className="w-full" [value]="['item-1']">
<accordion-item value="item-1" [disabled]="false" className="">
<accordion-trigger className="">Payments</accordion-trigger>
<accordion-content className="">Cards and cash.</accordion-content>
</accordion-item>
<accordion-item value="item-2" [disabled]="true" className="">
<accordion-trigger className="">Returns</accordion-trigger>
<accordion-content className="">Disabled item.</accordion-content>
</accordion-item>
</accordion>Playground
Preview