LightningWeb.Components.Pills (Lightning v2.15.16-pre.1)
View SourceUI component to render a pill to create tags.
Summary
Functions
Renders a filter badge with a close button.
Renders a preview of a derived URL-safe name inside a yellow badge.
Renders a pill with a color.
Functions
Renders a filter badge with a close button.
Example
<.filter_badge
form={@filters_changeset}
fields={[{:workflow_id, nil}]}
id="workflow_badge_123"
>
Workflow: My Workflow
</.filter_badge>
<.filter_badge
form={@filters_changeset}
fields={[{:wo_date_after, nil}, {:wo_date_before, nil}]}
id="workorder_date_badge"
>
Date range: * - *
</.filter_badge>Attributes
form(:any) (required) - The form changeset.fields(:list) (required) - List of {field_name, field_value} tuples representing the fields to reset.id(:string) (required) - Unique ID for the badge.
Slots
inner_block(required)
Renders a preview of a derived URL-safe name inside a yellow badge.
Shows the badge only when the derived name is non-empty.
Example
<.name_badge name={@name} field={f[:name]}>
Your project will be named
</.name_badge>Attributes
name(:string) (required) - The derived URL-safe name.field(Phoenix.HTML.FormField) (required) - The hidden :name field.
Slots
inner_block
Renders a pill with a color.
Example
<.pill color="red">
Red pill
</.pill>
## Colors
- `gray` **default**
- `red`
- `yellow`
- `green`
- `blue`
- `indigo`
- `purple`
- `pink`
## Attributes
* `color` (`:string`) - Defaults to `"gray"`. Must be one of `"gray"`, `"red"`, `"yellow"`, `"green"`, `"blue"`, `"indigo"`, `"purple"`, or `"pink"`.
* Global attributes are accepted.
## Slots
* `inner_block` (required)