WML Accordion
The Windmillcode Angular WML Accordion library provides a set of components and services to create accordion functionalities in Angular applications. This library facilitates the development of accordions with customizable sections, and animation controls, using WMLUIProperty to ensure consistency in development practices. Developers can construct accordions that are responsive and adaptable to various content types and user interactions, enhancing the informational architecture of Angular-based web applications.
WMLAccordionZeroComponent is the container which is populated with WMLAccordionZeroItemComponent to populate the accordion. WMLAccordionZeroItemComponent is a dynamic component and by defuault is uses WMLAccordionZeroSampleComponent as the accordion body and WMLAccordionZeroTitleComponent as the title of the accordion. you will want to replace
Installation
npm install -s --verbose @windmillcode/angular-wml-accordionUsage
Below are some usage examples of the WML Accordion Zero library for various development needs:
Getting Started
at its very core this is all you need to get started with the accordion as default parameters already exist to show you how to use the accordion
To configure the amount of sections:
items is a 2D array of WMLAccordionZeroItemProps so if you want x sections you can add WMLAccordionZeroItemProps in whatever Array 2d configuration you like
Use Custom Components
Dynamic Update
This example shows how to dynamically load content into the accordion sections:
Programmatically Open And Close
Customization
There are the color pallete , media queries ,spacing and common that you can use to customize the accordion. in your css simply replace the values with the ones you want to use and the component will take on the look. the variables are very specific and even named after the component to avoid any overlapping issues
Docs
WMLAccordionZeroProps
| Property | Type | Description |
|---|---|---|
id | string | An optional identifier for the accordion component. |
items | <WMLAccordionZeroItemProps[][]> | A 2D array of accordion item parameters to define each section. |
WMLAccordionZeroItemProps
| Property | Type | Description |
|---|---|---|
id | string | An optional identifier for the accordion item. |
propTitle | string | The title text for the accordion item. |
isClosed | boolean | Indicates whether the accordion item is initially closed. |
toggleAccordionEvent | Subject<boolean> | An event that toggles the accordion item’s open/close state. |
toggleAccordionSubj | Subject<{ val: boolean; emit: boolean }> | Subject to programmatically toggle the accordion’s state. |
accordionBody | WMLCustomComponent | The component to render as the accordion item’s body. |
updateAccordionBodySubj | Subject<WMLCustomComponent> | Subject to dynamically update the content of the accordion body. |
startHeight | string | CSS value for the starting height during the opening animation. |
endHeight0 | string | CSS value for the end height during the opening animation. |
endHeight1 | string | CSS value for the end height during the closing animation. |
animationDuration0 | string | Duration of the opening animation. |
animationDuration1 | string | Duration of the closing animation. |
WMLAccordionZeroSampleProps
| Property | Type | Description | Default Value |
|---|---|---|---|
id | string | Identifier for the sample component. | "" |
WMLAccordionZeroTitleProps
| Property | Type | Description | Default Value |
|---|---|---|---|
id | string | Identifier for the sample component. | "" |
title | string | Text for the accordion title. | "My Accordion Title" |
These tables provide an overview of the key elements within the WML Accordion Zero library that developers can interact with to customize and control accordion behavior in their Angular applications.
Changelog
v0.0.1
- can specify multiple accordion with in the component and specifiy your child compoennt as well
- if you want the accordion body to be the same width as its header fintd the target accordion and specify its width
.WMLAccordionZeroPod0 wml-accordion-zero-item:nth-child(1){ flex: 0 0 20%!; }v0.0.2
- coorect dependencies
v0.0.3
- end devs can now decide whether an accordion is open on init or not
v16.2.5-0
- end devs can control animations values for the the accordion here are the default values that get passed to the scss
startHeight = "calc(0/10.6 * 1rem)" endHeight0 = "calc(20000/10.6 * 1rem)" endHeight1 = "calc(2000/10.6 * 1rem)" animationDuration0 = "10s" animationDuration1 = "1.25s",
v16.2.80
- updated package to reflect the version 16.2.80 of @angular/core package,
v16.2.90
- updated package to reflect the version 16.2.90 of @angular/core package,
v16.2.91
- updated package to reflect the version 16.2.91 of @angular/core package,
v16.2.93
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v16.2.100
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v16.2.110
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v16.2.120
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v17.0.10
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v17.0.11
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
v17.0.20
- updated package to reflect the version ^17.0.2 of @angular/core package,
v17.0.40
- updated package to reflect the version ^17.0.4 of @angular/core package,
v17.0.50
- updated package to reflect the version ^17.0.5 of @angular/core package,
v17.0.60
- updated package to reflect the version ^17.0.6 of @angular/core package,
v17.0.70
- updated package to reflect the version ^17.0.7 of @angular/core package,
v17.0.7100
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.7200
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.7300
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.80
- updated package to reflect the version ^17.0.8 of @angular/core package,
v17.0.8100
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.8102
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.8103
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.9000
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.0.9001
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.1.0000
- updated package to reflect the version ^17.1.0 of @angular/core package,
v17.1.2
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.1.1000
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.1.2000 [2/5/24]
- updated package to reflect the version ^17.1.2 of @angular/core package,
v17.1.2001 [2/8/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.1.3000 [2/8/24]
- updated package to reflect the version ^17.1.3 of @angular/core package,
v17.2.1000 [2/17/24]
- updated package to reflect the version ^17.2.1 of @angular/core package
v17.2.1001 [2/21/24]
- [UPDATE] added WMLAccordionZeroItemProps.updateAccordionBodySubj to toggle the accordion body as needed,
- [UPDATE] you can customize the title via WMLAccordionZeroItemProps.accordionTitle ,
v17.2.2000 [2/23/24]
- updated package to reflect the version ^17.2.2 of @angular/core package,
v17.2.2001 [2/23/24]
- updated package to reflect the version ^17.2.2 of @angular/core package,
v17.2.3000 [2/28/24]
- updated package to reflect the version ^17.2.3 of @angular/core package,
v17.2.3001 [3/2/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.2.3002 [3/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.2.4000 [3/8/24]
- updated package to reflect the version ^17.2.4 of @angular/core package,
v17.2.4001 [3/12/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.2.4002 [3/12/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.2.4003 [3/13/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.2.4004 [3/13/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.3.0 [3/17/24]
- updated package to reflect the version ^17.3.0 of @angular/core package ,
v17.3.1000 [3/22/24]
- updated package to reflect the version ^17.3.1 of @angular/core package,
v17.3.2000 [3/28/24]
- updated package to reflect the version ^17.3.2 of @angular/core package,
v17.3.3000 [4/4/24]
- updated package to reflect the version ^17.3.3 of @angular/core package,
v17.3.4000 [4/11/24]
- updated package to reflect the version ^17.3.4 of @angular/core package,
v17.3.4001 [4/16/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.3.5000 [4/20/24]
- updated package to reflect the version ^17.3.5 of @angular/core package,
v17.3.5110 [5/1/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v17.3.6000 [5/1/24]
- updated package to reflect the version ^17.3.6 of @angular/core package,
v17.3.7000 [5/9/24]
- updated package to reflect the version ^17.3.7 of @angular/core package,
v17.3.8000 [5/9/24]
- updated package to reflect the version ^17.3.8 of @angular/core package,
v17.3.9000 [5/16/24]
- updated package to reflect the version ^17.3.9 of @angular/core package,
v18.0.0 [5/22/24]
- updated package to reflect the version ^18.0.0 of @angular/core package,
v18.0.1 [5/22/24]
- updated package to reflect the version ^18.0.0 of @angular/core package,
v18.0.4 [5/25/24]
- updated package to conform with @windmillcode/angular-wml-components-base , ,
v18.0.1000 [5/29/24]
- updated package to reflect the version ^18.0.1 of @angular/core package,
v18.0.2000 [6/6/24]
- updated package to reflect the version ^18.0.2 of @angular/core package,
v18.0.3000 [6/13/24]
- updated package to reflect the version ^18.0.3 of @angular/core package,
v18.0.3010 [6/18/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.0.4000 [6/23/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.0.5000 [6/26/24]
- updated package to reflect the version ^18.0.5 of @angular/core package,
v18.0.6000 [7/5/24]
- updated package to reflect the version ^18.0.6 of @angular/core package,
v18.1.0 [7/10/24]
- updated package to reflect the version ^18.1.0 of @angular/core package,
v18.1.3 [7/13/24]
- updated package to reflect the version ^18.1.0 of @angular/core package,
v18.1.4 [7/13/24]
- updated package to reflect the version ^18.1.0 of @angular/core package,
v18.1.6 [7/14/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.1000 [7/18/24]
- updated package to reflect the version ^18.1.1 of @angular/core package,
v18.1.2000 [7/24/24]
- updated package to reflect the version ^18.1.2 of @angular/core package,
v18.1.2300 [7/27/24]
- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.2301 [7/30/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3000-beta13 [8/4/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3001 [8/4/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3002 [8/4/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3001 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3002 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3003 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3004 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3005 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3006 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3007 [8/5/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.4000 [8/14/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.4001 [8/14/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.0 [8/15/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.1 [8/20/24]
- updated package to reflect the version 18.2.0 of @angular/core package
v18.2.1 [8/20/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.1000 [8/22/24]
- updated package to reflect the version 18.2.1 of @angular/core package
v18.2.2000 [8/30/24]
- updated package to reflect the version 18.2.2 of @angular/core package
v18.2.2100 [9/1/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.2101 [9/1/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.2200 [9/3/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.3000 [9/4/24]
- updated package to reflect the version 18.2.3 of @angular/core package
v18.2.3100 [9/8/24]
- updated package to reflect the version 18.2.3 of @angular/core package
v18.2.3110 [9/10/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.3112 [9/10/24]
- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.3200 [9/16/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.4000 [9/16/24]
- updated package to reflect the version 18.2.4 of @angular/core package
v18.2.4100 [9/19/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.4200 [9/21/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.5001 [9/22/24]
- updated package to reflect the version 18.2.5 of @angular/core package
v18.2.6000 [10/1/24]
- updated package to reflect the version 18.2.6 of @angular/core package
v18.2.7000 [10/2/24]
- updated package to reflect the version 18.2.7 of @angular/core package
v18.2.7001 [10/5/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.7010 [10/9/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.7020 [10/10/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.8000 [10/10/24]
- updated package to reflect the version 18.2.8 of @angular/core package
v18.2.8000 [10/11/24]
- updated package to reflect the version 18.2.8 of @angular/core package
v18.2.8001 [10/11/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.9000 [10/23/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.10000 [10/31/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.11000 [11/7/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.12000 [11/15/24]
- updated package to conform with @windmillcode/wml-components-base
v18.2.12001 [11/17/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.0 [11/19/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.3 [11/20/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.4 [11/26/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.1000 [11/26/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.2000 [12/4/24]
- updated package to reflect the version 19.0.2 of @angular/core package
v19.0.3000 [12/6/24]
- updated package to reflect the version 19.0.3 of @angular/core package
v19.0.4000 [12/12/24]
- updated package to reflect the version 19.0.4 of @angular/core package
v19.0.5000 [12/19/24]
- updated package to reflect the version 19.0.5 of @angular/core package
v19.0.5002 [12/29/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.5100 [12/29/24]
- updated package to conform with @windmillcode/wml-components-base
v19.0.6000 [1/12/25]
- updated package to reflect the version 19.0.6 of @angular/core package
v19.0.7000 [1/16/25]
- updated package to reflect the version 19.0.7 of @angular/core package
v19.1.0 [1/17/25]
- updated package to reflect the version 19.1.0 of @angular/core package
v19.1.1000 [1/17/25]
- updated package to reflect the version 19.1.1 of @angular/core package
v19.1.2000 [1/23/25]
- updated package to reflect the version 19.1.2 of @angular/core package
v19.1.3000 [1/23/25]
- updated package to reflect the version 19.1.3 of @angular/core package
v19.1.3100 [1/23/25]
- update package to support the react native ecosystem
v19.1.3110 [1/27/25]
- updated package to conform with @windmillcode/wml-components-base
v19.1.3111 [1/27/25]
- updated package to conform with @windmillcode/wml-components-base
v19.1.3112 [1/28/25]
- updated package to conform with @windmillcode/wml-components-base
v19.1.4000 [1/31/25]
- updated package to reflect the version 19.1.4 of @angular/core package
v19.1.5000 [2/8/25]
- updated package to reflect the version 19.1.5 of @angular/core package
v19.1.6000 [2/12/25]
- updated package to reflect the version 19.1.6 of @angular/core package
v19.1.7000 [2/21/25]
- updated package to reflect the version 19.1.7 of @angular/core package
v19.1.8000 [3/4/25]
- updated package to reflect the version 19.1.8 of @angular/core package
v19.2.0 [3/4/25]
- updated package to reflect the version 19.2.0 of @angular/core package
v19.2.1000 [3/9/25]
- updated package to reflect the version 19.2.1 of @angular/core package
v19.2.2000 [3/15/25]
- updated package to reflect the version 19.2.2 of @angular/core package
v19.2.3000 [3/21/25]
- updated package to reflect the version 19.2.3 of @angular/core package
v19.2.4000 [3/27/25]
- updated package to reflect the version 19.2.4 of @angular/core package
v19.2.5000 [4/3/25]
- updated package to reflect the version 19.2.5 of @angular/core package
v19.2.5001 [4/6/25]
- updated package to conform with @windmillcode/wml-components-base
v19.2.5100 [4/10/25]
- updated package to conform with @windmillcode/wml-components-base
v19.2.6000 [4/10/25]
- updated package to conform with @windmillcode/wml-components-base