salla-accordion
The salla-accordion component represents an accordion element.
The salla-accordion component represents an accordion element.
Use this component to encapsulate content within a collapsible section.
Put a salla-accordion-head and a salla-accordion-body inside it. The head shows a plus/minus toggle button
and toggles the body when it is clicked (when collapsible is true). It renders without shadow DOM, so theme CSS applies to its children.
Use it
In HTML or JSX, use the tag <salla-accordion> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaAccordion } from '@salla.sa/twilight-components-react/accordion';Try it
web-components/salla-accordion
Example
import { SallaAccordion } from '@salla.sa/twilight-components-react/accordion';
import { SallaAccordionHead } from '@salla.sa/twilight-components-react/accordion-head';
import { SallaAccordionBody } from '@salla.sa/twilight-components-react/accordion-body';
export function Example() {
return (
<SallaAccordion bordered size="md">
<SallaAccordionHead>
<span slot="title">Shipping policy</span>
</SallaAccordionHead>
<SallaAccordionBody>Orders ship within 2 days.</SallaAccordionBody>
</SallaAccordion>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
bordered | bordered | Adds a border around the accordion. Default is false. | boolean | false |
collapsed | collapsed | Whether the body is collapsed (hidden). Default is true, so the accordion starts closed; set collapsed="false" to start open. It is updated when the user toggles the head. | boolean | true |
collapsible | collapsible | When true (default), clicking the head toggles the body. When false, the head does not toggle. | boolean | true |
size | size | Size of the accordion elements. One of sm, md or lg. Default is md. | "lg" | "md" | "sm" | "md" |
Slots
| Slot | Description |
|---|---|
| (default) | A salla-accordion-head followed by a salla-accordion-body. |
Related
Used inside: <salla-multiple-bundle-product-cart>, <salla-multiple-bundle-product-details>, <salla-offer>, <salla-order-details-multiple-bundle-product>.