View Source SaladUI.Command (SaladUI v1.0.0-beta.3)

Command palette components for SaladUI.

Provides a set of components to build a command palette or searchable menu, similar to those found in modern applications.

Example

<.command id="command" class="rounded-lg border shadow-md md:min-w-[450px] w-full lg:max-w-[600px]">
  <.command_input placeholder="Type a command or search..." />
  <.command_empty>
    <span>No results found</span>
  </.command_empty>
  <.command_list>
    <.command_group heading="Suggestions">
      <.command_item phx-value-name="calendar" phx-click="select_command">
        <.calendar class="w-4 h-4"/>
        <span>Calendar</span>
      </.command_item>
      ...
    </.command_group>
    <.command_group heading="Settings">
      <.command_item phx-value-name="profile" phx-click="select_command">
        <.user class="w-4 h-4"/>
        <span>Profile</span>
        <.command_shortcut>P</.command_shortcut>
      </.command_item>
      ...
    </.command_group>
  </.command_list>
</.command>

Summary

Functions

Renders the root command palette container.

Renders a command palette inside a dialog.

Renders a message when no command results are found.

Renders a group of command items with a heading.

Renders the input field for searching/filtering commands.

Renders a single command item (button).

Renders the list container for command items and groups.

Renders a keyboard shortcut hint for a command item.

Functions

Renders the root command palette container.

Attributes

  • :id (required) - The unique id for the command palette.
  • :class - Additional classes to apply.

Slots

  • :inner_block (required) - The content of the command palette.

Example

<.command id="my-command">
  ...
</.command>

Attributes

  • id (:string) (required)
  • class (:any) - Defaults to "".

Slots

  • inner_block (required)

Renders a command palette inside a dialog.

Attributes

  • :id (required) - The unique id for the command palette.
  • :open - Whether the dialog is open.

Slots

  • :inner_block (required) - The content of the command palette.

Example

<.command_dialog id="my-command" open={@show_command}>
  ...
</.command_dialog>

Attributes

  • id (:string) (required)
  • open (:boolean) - Defaults to false.

Slots

  • inner_block (required)

Renders a message when no command results are found.

Attributes

  • :class - Additional classes to apply.

Slots

  • :inner_block (required) - The content to display when empty.

Example

<.command_empty>
  <span>No results found</span>
</.command_empty>

Attributes

  • class (:any) - Defaults to "".

Slots

  • inner_block (required)

Renders a group of command items with a heading.

Attributes

  • :heading (required) - The group heading.

Slots

  • :inner_block (required) - The command items in the group.

Example

<.command_group heading="Settings">
  <.command_item>Profile</.command_item>
</.command_group>

Attributes

  • heading (:string) (required)

Slots

  • inner_block (required)

Renders the input field for searching/filtering commands.

Attributes

  • :class - Additional classes to apply.
  • All global attributes are passed to the <input> element.

Example

<.command_input placeholder="Type a command..." />

Attributes

  • class (:any) - Defaults to "".
  • Global attributes are accepted.

Renders a single command item (button).

Attributes

  • :disabled - Whether the item is disabled.
  • :selected - Whether the item is selected.
  • All global attributes are passed to the <button> element.

Slots

  • :inner_block (required) - The content of the command item.

Example

<.command_item phx-click="select_command">
  <.icon name="calendar" />
  <span>Calendar</span>
</.command_item>

Attributes

  • disabled (:boolean) - Defaults to false.
  • selected (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders the list container for command items and groups.

Attributes

  • :class - Additional classes to apply.

Slots

  • :inner_block (required) - The content of the command list (groups/items).

Example

<.command_list>
  <.command_group heading="Actions">
    <.command_item>...</.command_item>
  </.command_group>
</.command_list>

Attributes

  • class (:any) - Defaults to "".

Slots

  • inner_block (required)
Link to this function

command_shortcut(assigns)

View Source

Renders a keyboard shortcut hint for a command item.

Attributes

  • :class - Additional classes to apply.

Slots

  • :inner_block (required) - The shortcut text.

Example

<.command_shortcut>P</.command_shortcut>

Attributes

  • class (:any) - Defaults to "".

Slots

  • inner_block (required)