mirror of
https://github.com/huntabyte/shadcn-svelte.git
synced 2026-09-14 19:33:46 +08:00
maxffarrell
7ff65b4892
Co-authored-by: Crush <crush@charm.land> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
139 lines
3.5 KiB
Markdown
139 lines
3.5 KiB
Markdown
---
|
|
title: Command
|
|
description: Fast, composable, unstyled command menu for Svelte.
|
|
component: true
|
|
links:
|
|
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/command
|
|
doc: https://bits-ui.com/docs/components/command
|
|
api: https://bits-ui.com/docs/components/command#api-reference
|
|
---
|
|
|
|
<script>
|
|
import ComponentPreview from "$lib/components/component-preview.svelte";
|
|
import ComponentSource from "$lib/components/component-source.svelte";
|
|
import Callout from "$lib/components/callout.svelte";
|
|
import PMAddComp from "$lib/components/pm-add-comp.svelte";
|
|
import PMInstall from "$lib/components/pm-install.svelte";
|
|
import Steps from "$lib/components/steps.svelte";
|
|
import Step from "$lib/components/step.svelte";
|
|
import InstallTabs from "$lib/components/install-tabs.svelte";
|
|
|
|
let { viewerData } = $props();
|
|
</script>
|
|
|
|
<ComponentPreview name="command-demo" align="start" class="[&_.preview>div]:max-w-[450px]">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
## Installation
|
|
|
|
<InstallTabs>
|
|
{#snippet cli()}
|
|
<PMAddComp name="command" />
|
|
{/snippet}
|
|
{#snippet manual()}
|
|
<Steps>
|
|
|
|
<Step>
|
|
|
|
Install `bits-ui`:
|
|
|
|
</Step>
|
|
|
|
<PMInstall command="bits-ui -D" />
|
|
|
|
<Step>
|
|
|
|
Copy and paste the following code into your project.
|
|
|
|
</Step>
|
|
{#if viewerData}
|
|
<ComponentSource item={viewerData} data-llm-ignore/>
|
|
{/if}
|
|
|
|
</Steps>
|
|
{/snippet}
|
|
</InstallTabs>
|
|
|
|
## Usage
|
|
|
|
```svelte showLineNumbers
|
|
<script lang="ts">
|
|
import * as Command from "$lib/components/ui/command/index.js";
|
|
</script>
|
|
```
|
|
|
|
```svelte showLineNumbers
|
|
<Command.Root>
|
|
<Command.Input placeholder="Type a command or search..." />
|
|
<Command.List>
|
|
<Command.Empty>No results found.</Command.Empty>
|
|
<Command.Group heading="Suggestions">
|
|
<Command.Item>Calendar</Command.Item>
|
|
<Command.Item>Search Emoji</Command.Item>
|
|
<Command.Item>Calculator</Command.Item>
|
|
</Command.Group>
|
|
<Command.Separator />
|
|
<Command.Group heading="Settings">
|
|
<Command.Item>Profile</Command.Item>
|
|
<Command.Item>Billing</Command.Item>
|
|
<Command.Item>Settings</Command.Item>
|
|
</Command.Group>
|
|
</Command.List>
|
|
</Command.Root>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Dialog
|
|
|
|
<ComponentPreview name="command-dialog">
|
|
|
|
<div></div>
|
|
|
|
</ComponentPreview>
|
|
|
|
To show the command menu in a dialog, use the `<Command.Dialog />` component instead of `<Command.Root />`. It accepts props for both the `<Dialog.Root />` and `<Command.Root />` components.
|
|
|
|
```svelte title="lib/components/example-command-menu.svelte" showLineNumbers
|
|
<script lang="ts">
|
|
import * as Command from "$lib/components/ui/command/index.js";
|
|
import { onMount } from "svelte";
|
|
|
|
let open = $state(false);
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
open = !open;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:document onkeydown={handleKeydown} />
|
|
|
|
<Command.Dialog bind:open>
|
|
<Command.Input placeholder="Type a command or search..." />
|
|
<Command.List>
|
|
<Command.Empty>No results found.</Command.Empty>
|
|
<Command.Group heading="Suggestions">
|
|
<Command.Item>Calendar</Command.Item>
|
|
<Command.Item>Search Emoji</Command.Item>
|
|
<Command.Item>Calculator</Command.Item>
|
|
</Command.Group>
|
|
</Command.List>
|
|
</Command.Dialog>
|
|
```
|
|
|
|
### Combobox
|
|
|
|
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
|
|
|
|
## Changelog
|
|
|
|
### 2024-10-30 Classes for icons
|
|
|
|
- Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<Command.Item>` component to automatically style the icons inside.
|