fast-accordion
As defined by the W3C:
An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
Setup
Basic Setup
import {
provideFASTDesignSystem,
fastAccordion,
fastAccordionItem
} from "@microsoft/fast-components";
provideFASTDesignSystem()
.register(
fastAccordion(),
fastAccordionItem()
);
Customizing Icons
import {
provideFASTDesignSystem,
fastAccordion,
fastAccordionItem
} from "@microsoft/fast-components";
provideFASTDesignSystem()
.register(
fastAccordion(),
fastAccordionItem({
collapsedIcon: `...your collapsed icon...`,
expandedIcon: `...your expanded icon...`,
})
);
Usage
Live Editor
Result
Loading...
Create your own design
Accordion
import { Accordion, accordionTemplate as template } from "@microsoft/fast-foundation";
import { accordionStyles as styles } from "./my-accordion.styles";
export const myAccordion = Accordion.compose({
baseName: "accordion",
template,
styles,
});
AccordionItem
import {
AccordionItem,
AccordionItemOptions,
accordionItemTemplate as template,
} from "@microsoft/fast-foundation";
import { accordionItemStyles as styles } from "./my-accordion-item.styles";
export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
baseName: "accordion-item",
template,
styles,
collapsedIcon: `...default collapsed icon...`,
expandedIcon: `...default expanded icon...`,
});
API
class: Accordion
Superclass
| Name | Module | Package |
|---|---|---|
FoundationElement | /src/foundation-element/foundation-element.js |
Fields
| Name | Privacy | Type | Default | Description | Inherited From |
|---|---|---|---|---|---|
expandmode | public | AccordionExpandMode | Controls the expand mode of the Accordion, either allowing single or multiple item expansion. | ||
$presentation | public | ComponentPresentation or null | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | |
template | public | ElementViewTemplate or void or null | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | |
styles | public | ElementStyles or void or null | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
|---|---|---|---|---|---|
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Events
| Name | Type | Description | Inherited From |
|---|---|---|---|
change | Fires a custom 'change' event when the active item changes |
Attributes
| Name | Field | Inherited From |
|---|---|---|
expand-mode | expandmode |
CSS Parts
| Name | Description |
|---|---|
item | The slot for the accordion items |
Variables
| Name | Description | Type |
|---|---|---|
AccordionExpandMode | Expand mode for Accordion | { single: "single", multi: "multi", } |
class: AccordionItem
Superclass
| Name | Module | Package |
|---|---|---|
FoundationElement | /src/foundation-element/foundation-element.js |
Fields
| Name | Privacy | Type | Default | Description | Inherited From |
|---|---|---|---|---|---|
headinglevel | public | 1 or 2 or 3 or 4 or 5 or 6 | 2 | Configures the level of the heading element. | |
expanded | public | boolean | false | Expands or collapses the item. | |
id | public | string | The item ID | ||
$presentation | public | ComponentPresentation or null | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | |
template | public | ElementViewTemplate or void or null | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition. | FoundationElement | |
styles | public | ElementStyles or void or null | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition. | FoundationElement |
Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
|---|---|---|---|---|---|
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Events
| Name | Type | Description | Inherited From |
|---|---|---|---|
change | Fires a custom 'change' event when the button is invoked |
Attributes
| Name | Field | Inherited From |
|---|---|---|
heading-level | headinglevel | |
| expanded | ||
id | id |
CSS Parts
| Name | Description |
|---|---|
heading | Wraps the button |
button | The button which serves to invoke the item |
heading-content | Wraps the slot for the heading content within the button |
icon | The icon container |
expanded-icon | The expanded icon slot |
collapsed-icon | The collapsed icon |
region | The wrapper for the accordion item content |
Slots
| Name | Description |
|---|---|
start | Content which can be provided between the heading and the icon |
end | Content which can be provided between the start slot and icon |
heading | Content which serves as the accordion item heading and text of the expand button |
| The default slot for accordion item content | |
expanded-icon | The expanded icon |
collapsed-icon | The collapsed icon |