Chip Container
Overview
The Chip Container Flow Screen Component is a user interface element designed to organize and display a collection of interactive, user-generated tags or labels, commonly called "chips". This component enables users to efficiently add, remove, and edit chips while maintaining a visually appealing and intuitive layout.
Changing the properties
The Avonni Chip Container Flow Screen Component offers a variety of properties to customize its appearance and behavior to suit your needs:
Single Line: Enable this property to display all chips on a single line, providing a compact and streamlined layout.
Sortable Chips: Activate this property to allow users to sort the chips by dragging and dropping them. Assign an interaction to trigger specific actions when the sorting occurs if needed.
Data Source: Assign a data source to generate the Chip Container. Chips can be created manually or dynamically using a variable and assigning a source collection. This flexibility enables you to adapt the Chip Container to various use cases and data structures.
Adding interactions
Interactions define what will happen when users click on an action. You can find a list of interactions that are available here.
Here are the available Actions for the Chip Container Component:
On
Reorder
Specifications
Attributes
Name | Type | Description |
---|---|---|
Single Line | String | If present, the chips are limited to one line. |
Is Collapsible | String | Text that is displayed when the field is empty, prompts the user for a valid entry. |
Is Expanded | String | If present, the chip list can be collapsed. Use is-collapsible with the is-expanded attribute to expand and collapse the list of chips. |
Sortable | Boolean | If present, the chips can be reordered by dragging and dropping or using the spacebar key. |
Styling Hooks
Chip Container
Name | Description |
---|---|
Background | Define a background color for the chip container |
Border Color | Define a border color for the chip container |
Border Size | Define a border size for the chip container |
Border Style | Define a border style for the chip container |
Border Radius | Define a border radius for the chip container |
Chip
Name | Description |
---|---|
Label Font Size | Define a specific color for the Text/Icon |
Label Font Weight | Define a specific color for the Text/Icon when active |
Label Font Style | Define a specific color for the Text/Icon when mouse hover |
Border Size | Define a size for the border |
Border Style | Define a style for the border |
Border Radius | Define a radius for the border |
Line Height | Define a line height for the chip |
Avatar
Name | Description |
---|---|
Border Size | Define a specific color for the Text/Icon |
Border Color | Define a specific color for the Text/Icon when active |
Border Style | Define a specific color for the Text/Icon when the mouse hover |
Initials Font Color | |
Initials Font Color Hover | |
Initial Font Weight | |
Initial Font Weight Hover | |
Icon Background Color | |
Icon Foreground Color | |
Icon Foregorund Color Default | |
Image Object Fit |
Variant Style
Name | Description |
---|---|
Background | Define a specific color for the Text/Icon |
Border Color | Define a specific color for the Text/Icon when active |
Text Color | Define a specific color for the Text/Icon when the mouse hover |
Outline Text color | Define an outline text color is a property that sets the color of the outline surrounding text. |
Last updated