PtahUi.Components.Filter (PtahUI v0.1.0)

Copy Markdown View Source

Filter is a group of toggle buttons for exclusive selection.

When nothing is selected all options are visible. Once an option is picked, the others hide and a reset button appears beside it. State is managed server-side via phx-click events.

Example

<.filter selected={@framework} on_select="pick" on_reset="reset">
  <:item value="svelte">Svelte</:item>
  <:item value="vue">Vue</:item>
  <:item value="react">React</:item>
</.filter>

In the LiveView:

def handle_event("pick",  %{"filter" => v}, socket), do: {:noreply, assign(socket, framework: v)}
def handle_event("reset", _,               socket), do: {:noreply, assign(socket, framework: nil)}

Summary

Functions

filter(assigns)

Functions

filter(assigns)

Attributes

  • selected (:string) - Currently selected value, or nil to show all options. Defaults to nil.
  • on_select (:any) - phx-click event name for item selection. Receives the chosen value as phx-value-filter. Defaults to nil.
  • on_reset (:any) - phx-click event name for clearing the selection. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - Accepts attributes:
    • value (:string) (required)