Command
Source: client/lib/theme/vueda-tailwind/controls/index.js
The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks CommandInput.root, CommandList.root, and optional CommandFooter.root into one chip, and
overflow-hiddenlets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a CommandDialog.content.
Vue component: Command
| Slot | Default classes | Description |
|---|---|---|
| root | bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-vueda-card | The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks CommandInput.root, CommandList.root, and optional CommandFooter.root into one chip, and overflow-hidden lets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a CommandDialog.content. |
root
The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks CommandInput.root, CommandList.root, and optional CommandFooter.root into one chip, and
overflow-hiddenlets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a CommandDialog.content.
Default classes:
bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-vueda-card
Source: client/lib/theme/vueda-tailwind/controls/Command.theme.js:19