docs(ui,docs): Add documentation for Medusa UI 2.0.0 (#5227)
* add docs for medusa ui 2.0.0 * fix: copy as child example * fix: dropdown menu example * add accordion examples * fix lint issues * fix apos in progress tabs demo * resolve comments * add icon * bump z-index on modals to prevent clashing with navbar * add sidebar item and card * undo modal z index changes * add links to updated and new components * update version * rm inline code formatting on links --------- Co-authored-by: Shahed Nasser <shahednasser@gmail.com>
This commit is contained in:
committed by
GitHub
parent
f5a698ad6f
commit
4e3f3b54cb
63
www/apps/ui/src/content/docs/components/command-bar.mdx
Normal file
63
www/apps/ui/src/content/docs/components/command-bar.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: "Command Bar"
|
||||
description: "Display a command bar with a list of commands"
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentExample name="command-bar-demo" />
|
||||
|
||||
## Usage
|
||||
|
||||
---
|
||||
|
||||
```tsx
|
||||
import { CommandBar } from "@medusajs/ui"
|
||||
```
|
||||
|
||||
```tsx
|
||||
<CommandBar open={open}>
|
||||
<CommandBar.Bar>
|
||||
<CommandBar.Value>{count} selected</CommandBar.Value>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={onDelete}
|
||||
label="Delete"
|
||||
shortcut="d"
|
||||
/>
|
||||
<CommandBar.Seperator />
|
||||
<CommandBar.Command
|
||||
action={onEdit}
|
||||
label="Edit"
|
||||
shortcut="e"
|
||||
/>
|
||||
</CommandBar.Bar>
|
||||
</CommandBar>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
---
|
||||
|
||||
### CommandBar
|
||||
|
||||
The root component of the command bar. This component manages the state of the command bar.
|
||||
|
||||
<ComponentProps component="command-bar" />
|
||||
|
||||
### CommandBar.Bar
|
||||
|
||||
The bar component of the command bar. This component is used to display the commands.
|
||||
|
||||
### CommandBar.Value
|
||||
|
||||
The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.
|
||||
|
||||
### CommandBar.Seperator
|
||||
|
||||
The seperator component of the command bar. This component is used to display a seperator between commands.
|
||||
|
||||
### CommandBar.Command
|
||||
|
||||
The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.
|
||||
|
||||
<ComponentProps component="command-bar-command" />
|
||||
Reference in New Issue
Block a user