一个可搜索的命令列表。
<flux:command> <flux:command.input placeholder="Search..." /> <flux:command.items> <flux:command.item wire:click="..." icon="user-plus" kbd="⌘A">Assign to…</flux:command.item> <flux:command.item wire:click="..." icon="document-plus">Create new file</flux:command.item> <flux:command.item wire:click="..." icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item> <flux:command.item wire:click="..." icon="book-open">Documentation</flux:command.item> <flux:command.item wire:click="..." icon="newspaper">Changelog</flux:command.item> <flux:command.item wire:click="..." icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item> </flux:command.items></flux:command>以模态框形式打开命令面板，以便快速访问常用命令。
<flux:modal.trigger name="search" shortcut="cmd.k"> <flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" /></flux:modal.trigger><flux:modal name="search" variant="bare" class="w-full max-w-[30rem] my-[12vh] max-h-screen overflow-y-hidden"> <flux:command class="border-none shadow-lg inline-flex flex-col max-h-[76vh]"> <flux:command.input placeholder="Search..." closable /> <flux:command.items> <flux:command.item icon="user-plus" kbd="⌘A">Assign to…</flux:command.item> <flux:command.item icon="document-plus">Create new file</flux:command.item> <flux:command.item icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item> <flux:command.item icon="book-open">Documentation</flux:command.item> <flux:command.item icon="newspaper">Changelog</flux:command.item> <flux:command.item icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item> </flux:command.items> </flux:command></flux:modal>|
属性
|
说明
|
|---|---|
| clearable |
如果 true，当输入框有内容时会显示清除按钮。
|
| closable |
如果 true，会显示关闭按钮以关闭命令面板。
|
| icon |
输入框开头显示的图标名称。默认值：magnifying-glass。
|
| placeholder |
当输入框为空时显示的占位文本。
|
|
属性
|
说明
|
|---|---|
| icon |
命令项开头显示的图标名称。
|
| icon:variant |
图标的视觉样式。可选值：outline（默认）、solid、mini、micro。
|
| kbd |
显示在命令项末尾的快捷键提示（例如 ⌘K）。
|
|
属性
|
说明
|
|---|---|
| data-flux-command-item |
应用于命令项元素，用于样式和标识。
|