Introduction
The ItemWrapper component wraps the Item component and provides an optional remove functionality. This component can be used for displaying tags, selected items from a list, or other scenarios where a removable visual element is required. You can get all the features of the Item component in the ItemWrapper component. In addition, you can also use a custom component for the content.
Basic Usage
To render a basic ItemWrapper component, pass a string as the `value` prop:
Basic Implementation:
Simple Content
Removable Pill
With Icon
Custom Component
You can also use a custom component for the content of the ItemWrapper. In this example, we will create a custom Status component, which takes a status string and shows color and text for the status.
Custom Component Implementation:
Set the using property to the Status component and ItemWrapper will use this for the content.
Removable Pills
To create a removable ItemWrapper, set the `removable` prop to `true`. This will add a remove icon to the ItemWrapper, and when clicked, it will emit a `remove` event that you can handle to perform the actual remove action:
Removable Implementation:
The ItemWrapper component provides a flexible and customizable way to display removable elements in your application. By utilizing the Item component's features, you can create various appearances to suit your specific use cases.
Properties
Core Properties
- value: String or object with content data (required)
- fields: Field mapping object for custom data structures
- removable: Boolean to enable remove functionality
- class: Custom CSS classes
Events
- remove: Fired when remove button is clicked
Use Cases
Perfect for tags, selected filters, user selections, or any scenario where you need removable visual elements with rich content display capabilities.
Continue learning
Pill components are often used in combination with selection components and forms.