Skip to content

Latest commit

 

History

History
61 lines (45 loc) · 3.22 KB

dynamic-chip-list.component.md

File metadata and controls

61 lines (45 loc) · 3.22 KB
Raw
Title Added Status Last reviewed
Dynamic Chip List component
v6.6.0
Active
2024-02-06

Dynamic Chip List component

This component shows dynamic list of chips which render depending on free space.

List of chips

Basic Usage

<adf-dynamic-chip-list
    [chips]="chips"
    [limitChipsDisplayed]="true"
    [showDelete]="true"
    [roundUpChips]="true"
    (displayNext)="onDisplayNext()"
    (removedChip)="onRemovedChip($event)">
</adf-dynamic-chip-list>

Class members

Properties

Name Type Default value Description
limitChipsDisplayed boolean false Should limit number of chips displayed.
showDelete boolean true Show delete button.
disableDelete boolean false Disable delete button.
roundUpChips boolean false Round up chips increasing the border radius of a chip to 20px.
pagination Pagination Provide if you want to use paginated chips.
chips Chip[] List of chips to display.

Events

Name Type Description
displayNext EventEmitter<void> Emitted when button for view more is clicked.
removedChip EventEmitter<string> Emitted when any chip is removed.

Details

Limit number of chips displayed initially

To limit number of chips initially displayed set limitChipsDisplayed to true.

<adf-dynamic-chip-list
    [chips]="chips"
    [limitChipsDisplayed]="true">
</adf-dynamic-chip-list>

Now when chips will exceed the size of the container number of displayed chips will be limited to as much as fits together with view more button. At least one chip will always be displayed, when one chip and view more button won't fit into one line the button will be displayed under the chip.