LightningWeb.Components.Pills (Lightning v2.16.3-pre1)

View Source

UI component to render a pill to create tags.

Summary

Functions

A filter chip that acts as both a state display and a dropdown trigger. Gray when inactive, indigo when a filter is active.

Renders a preview of a derived URL-safe name inside a yellow badge.

Renders a pill with a color.

Functions

filter_chip(assigns)

A filter chip that acts as both a state display and a dropdown trigger. Gray when inactive, indigo when a filter is active.

Attributes

  • active (:boolean) - Defaults to false.
  • clear_fields (:list) - Defaults to [].
  • id (:string) (required)
  • target (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

name_badge(assigns)

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

pill(assigns)

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)