We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Accordion

Accordions allow users to expand and collapse sections of content. They provide a way to display and manage information in a compact and visually appealing way.

Basic accordion

Preview

Code

Content for Accordion 1

Content for Accordion 2

Content for Accordion 3

Optional properties

Use the properties below to style the accordion and copy the code to your project. Try clicking on them.

Property	Type	Description
`variant`	`default` \| `nounderline`	`nounderline` removes the underline from the header on hover.
`icon`	`chevron` \| `plus`	Sets the icon for the accordion header. Default is `chevron`.
`multiple`	`true` \| `false`	Defines whether multiple accordions can be open at the same time. `true` allows multiple accordions to be open at the same time, while `false` restricts it to one open accordion at a time.

Usages

Usage

Supported directives

These are optional directives for accordion content header only

Selector	Directive name	Description
`icon`	ZapIconDirective	A directive that enables adding any type of icon to a button, including SVGs, font-based icons, and more.

Example

Preview

Code

Content for Accordion 1

Content for Accordion 2

Content for Accordion 3

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Colors

You can provide each of these colors for different themes that you use

Property	Description
`headerTextColor`	Text color of the header.
`itemBorderColor`	Border color of the item (divider)
`headerBgHoverColor`	Background color of the header
`headerTextHoverColor`	Text color of the header on hover
`contentTextColor`	Text color of the content
`contentBgColor`	Background color of the content

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`headerPaddingLeft`	Left padding of the header
`headerPaddingTop`	Top padding of the header
`headerPaddingBottom`	Bottom padding of the header
`contentPaddingLeft`	Left padding of the button.
`contentPaddingRight`	Right padding of the content
`contentPaddingTop`	Top padding of the content
`contentPaddingBottom`	Bottom padding of the content
`headerPadding`	Padding of the header
`contentPadding`	Padding of the content