Primitives
Display a series of panels that can be expanded or collapsed.
Import the Accordion primitives from ng-primitives/accordion
.
import {
NgpAccordion,
NgpAccordionItem,
NgpAccordionTrigger,
NgpAccordionContent,
} from 'ng-primitives/accordion';
Assemble the accordion directives in your template.
<div ngpAccordion ngpAccordionType="single" ngpAccordionCollapsible>
<div ngpAccordionItem ngpAccordionItemValue="item-1">
<button ngpAccordionTrigger>Would you like to learn more?</button>
<div ngpAccordionContent>If you would like to learn more please reach out to us on GitHub.</div>
</div>
<div ngpAccordionItem ngpAccordionItemValue="item-2">
<button ngpAccordionTrigger>Can I use this in my project?</button>
<div ngpAccordionContent>Yes, this is open source and you can use it in your project.</div>
</div>
</div>
Accordions will often have animations to transition the content when it is expanding or collapsing.
The ngpAccordionContent
directive applies the --ngp-accordion-content-width
and --ngp-accordion-content-height
CSS custom properties which define the width and height of the content when it is expanded. This can be used to animate the content when it is expanding or collapsing.
[ngpAccordionContent] {
overflow: hidden;
transition: height 0.3s ease;
}
[ngpAccordionContent][data-open='true'] {
height: var(--ngp-accordion-content-height);
}
[ngpAccordionContent][data-open='false'] {
height: 0;
}
It is important that the width or height is not set to 0
until the data-open
attribute is present. The content size is computed on initial mount and only then will the data-open
attribute be set.
The following directives are available to import from the ng-primitives/accordion
package:
Apply the ngpAccordion
directive to an element that represents the group of accordion items.
[ngpAccordion]
ngpAccordion
The following data attributes are applied to the ngpAccordion
directive:
Attribute | Description | Value |
---|---|---|
data-orientation |
The orientation of the accordion. | horizontal | vertical |
data-disabled |
Whether the accordion is disabled. | true | false |
Apply the ngpAccordionItem
directive to an element that represents an accordion item.
[ngpAccordionItem]
ngpAccordionItem
The following data attributes are applied to the ngpAccordionItem
directive:
Attribute | Description | Value |
---|---|---|
data-orientation |
The orientation of the accordion. | horizontal | vertical |
data-open |
The state of the accordion item. | true | false |
data-disabled |
whether the accordion item is disabled. | true | false |
Apply the ngpAccordionTrigger
directive to an element that represents the trigger for an accordion item, such as a button.
[ngpAccordionTrigger]
ngpAccordionTrigger
The following data attributes are applied to the ngpAccordionTrigger
directive:
Attribute | Description | Value |
---|---|---|
data-hover |
Whether the accordion trigger is hovered. | true | false |
data-focus-visible |
Whether the accordion trigger is focused. | true | false |
data-press |
Whether the accordion trigger is pressed. | true | false |
data-orientation |
The orientation of the accordion. | horizontal | vertical |
data-open |
The state of the accordion item. | true | false |
data-disabled |
Whether the accordion item is disabled. | true | false |
Apply the ngpAccordionContent
directive to an element that represents the content of an accordion item.
[ngpAccordionContent]
ngpAccordionContent
The following data attributes are applied to the ngpAccordionContent
directive:
Attribute | Description | Value |
---|---|---|
data-orientation |
The orientation of the accordion. | horizontal | vertical |
data-open |
The state of the accordion item. | true | false |
You can configure the default options for all accordions in your application by using the provideNgpAccordionConfig
function in a providers array.
import { provideNgpAccordionConfig } from 'ng-primitives/accordion';
bootstrapApplication(AppComponent, {
providers: [
provideNgpAccordionConfig({
type: 'multiple',
collapsible: true,
orientation: 'horizontal',
}),
],
});
Adheres to the Accordion WAI-ARIA design pattern.
Copyright © 2024 Angular Primitives