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 tofalse
.
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 tofalse
.selected
(:boolean
) - Defaults tofalse
.- 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)
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)