223 lines
6.3 KiB
Markdown
223 lines
6.3 KiB
Markdown
# SbMenu
|
|
|
|
A dropdown menu component with keyboard navigation support.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Open | bool | false | Whether the menu is open |
|
|
| Placement | SbPlacement | BottomStart | Menu placement relative to anchor |
|
|
| CloseOnItemClick | bool | true | Close when clicking a menu item |
|
|
| Class | string? | null | Additional CSS classes |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| OpenChanged | EventCallback\<bool\> | Fired when open state changes |
|
|
|
|
## Templates / Slots
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| AnchorContent | RenderFragment | Content that triggers the menu |
|
|
| ChildContent | RenderFragment | Menu items (SbMenuItem components) |
|
|
|
|
## Keyboard Navigation
|
|
|
|
- **ArrowDown**: Move to next item
|
|
- **ArrowUp**: Move to previous item
|
|
- **Home**: Move to first item
|
|
- **End**: Move to last item
|
|
- **Enter/Space**: Activate focused item
|
|
- **Escape**: Close menu
|
|
- **Tab**: Close menu
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-menu-anchor` - Anchor wrapper
|
|
- `sb-menu` - Menu container
|
|
- `sb-menu--{placement}` - Placement variants
|
|
|
|
## Accessibility
|
|
|
|
- Uses `role="menu"` on the menu
|
|
- Uses `role="menuitem"` on items
|
|
- Supports keyboard navigation
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="isOpen">
|
|
<AnchorContent>
|
|
<SbButton OnClick="() => isOpen = !isOpen">
|
|
Options <SbIcon Name="chevron-down" />
|
|
</SbButton>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="Edit" OnClick="Edit" />
|
|
<SbMenuItem Text="Duplicate" OnClick="Duplicate" />
|
|
<SbMenuItem Text="Delete" OnClick="Delete" />
|
|
</ChildContent>
|
|
</SbMenu>
|
|
|
|
@code {
|
|
private bool isOpen = false;
|
|
}
|
|
```
|
|
|
|
### With Icons
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="isOpen">
|
|
<AnchorContent>
|
|
<SbIconButton Icon="more-vertical" OnClick="() => isOpen = !isOpen" />
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="Edit" OnClick="Edit">
|
|
<Icon><SbIcon Name="edit" /></Icon>
|
|
</SbMenuItem>
|
|
<SbMenuItem Text="Copy" OnClick="Copy">
|
|
<Icon><SbIcon Name="copy" /></Icon>
|
|
</SbMenuItem>
|
|
<SbMenuItem Text="Delete" OnClick="Delete">
|
|
<Icon><SbIcon Name="trash" /></Icon>
|
|
</SbMenuItem>
|
|
</ChildContent>
|
|
</SbMenu>
|
|
```
|
|
|
|
### With Keyboard Shortcuts
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="isOpen">
|
|
<AnchorContent>
|
|
<SbButton OnClick="() => isOpen = !isOpen">File</SbButton>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="New" Shortcut="Ctrl+N" OnClick="New" />
|
|
<SbMenuItem Text="Open" Shortcut="Ctrl+O" OnClick="Open" />
|
|
<SbMenuItem Text="Save" Shortcut="Ctrl+S" OnClick="Save" />
|
|
<SbMenuItem Text="Save As..." Shortcut="Ctrl+Shift+S" OnClick="SaveAs" />
|
|
</ChildContent>
|
|
</SbMenu>
|
|
```
|
|
|
|
### With Disabled Items
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="isOpen">
|
|
<AnchorContent>
|
|
<SbButton OnClick="() => isOpen = !isOpen">Actions</SbButton>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="View" OnClick="View" />
|
|
<SbMenuItem Text="Edit" OnClick="Edit" Disabled="@(!canEdit)" />
|
|
<SbMenuItem Text="Delete" OnClick="Delete" Disabled="@(!canDelete)" />
|
|
</ChildContent>
|
|
</SbMenu>
|
|
```
|
|
|
|
### Different Placements
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="isOpen" Placement="SbPlacement.BottomEnd">
|
|
<AnchorContent>
|
|
<SbButton OnClick="() => isOpen = !isOpen">Bottom End</SbButton>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="Option 1" />
|
|
<SbMenuItem Text="Option 2" />
|
|
</ChildContent>
|
|
</SbMenu>
|
|
|
|
<SbMenu @bind-Open="isOpen2" Placement="SbPlacement.TopStart">
|
|
<AnchorContent>
|
|
<SbButton OnClick="() => isOpen2 = !isOpen2">Top Start</SbButton>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="Option 1" />
|
|
<SbMenuItem Text="Option 2" />
|
|
</ChildContent>
|
|
</SbMenu>
|
|
```
|
|
|
|
### User Menu
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="userMenuOpen">
|
|
<AnchorContent>
|
|
<button class="user-avatar-btn" @onclick="() => userMenuOpen = !userMenuOpen">
|
|
<img src="/avatar.jpg" alt="@user.Name" />
|
|
<span>@user.Name</span>
|
|
<SbIcon Name="chevron-down" />
|
|
</button>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="Profile" OnClick="GoToProfile">
|
|
<Icon><SbIcon Name="user" /></Icon>
|
|
</SbMenuItem>
|
|
<SbMenuItem Text="Settings" OnClick="GoToSettings">
|
|
<Icon><SbIcon Name="settings" /></Icon>
|
|
</SbMenuItem>
|
|
<SbDivider />
|
|
<SbMenuItem Text="Sign Out" OnClick="SignOut">
|
|
<Icon><SbIcon Name="log-out" /></Icon>
|
|
</SbMenuItem>
|
|
</ChildContent>
|
|
</SbMenu>
|
|
```
|
|
|
|
### Keep Open After Click
|
|
|
|
```razor
|
|
<SbMenu @bind-Open="isOpen" CloseOnItemClick="false">
|
|
<AnchorContent>
|
|
<SbButton OnClick="() => isOpen = !isOpen">Multi-Select</SbButton>
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem OnClick="() => ToggleOption(1)">
|
|
<SbCheckbox Value="@options.Contains(1)" />
|
|
Option 1
|
|
</SbMenuItem>
|
|
<SbMenuItem OnClick="() => ToggleOption(2)">
|
|
<SbCheckbox Value="@options.Contains(2)" />
|
|
Option 2
|
|
</SbMenuItem>
|
|
<SbMenuItem OnClick="() => ToggleOption(3)">
|
|
<SbCheckbox Value="@options.Contains(3)" />
|
|
Option 3
|
|
</SbMenuItem>
|
|
</ChildContent>
|
|
</SbMenu>
|
|
```
|
|
|
|
### Row Actions Menu
|
|
|
|
```razor
|
|
<SbDataGrid Items="@items">
|
|
<SbColumn Field="Name" Title="Name" />
|
|
<SbColumn Field="Status" Title="Status" />
|
|
<SbColumn Title="Actions" Width="60px">
|
|
<CellTemplate Context="cell">
|
|
<SbMenu>
|
|
<AnchorContent>
|
|
<SbIconButton Icon="more-vertical" Size="SbSize.Sm" />
|
|
</AnchorContent>
|
|
<ChildContent>
|
|
<SbMenuItem Text="View" OnClick="() => View(cell.Item)" />
|
|
<SbMenuItem Text="Edit" OnClick="() => Edit(cell.Item)" />
|
|
<SbDivider />
|
|
<SbMenuItem Text="Delete" OnClick="() => Delete(cell.Item)">
|
|
<Icon><SbIcon Name="trash" Color="SbColor.Danger" /></Icon>
|
|
</SbMenuItem>
|
|
</ChildContent>
|
|
</SbMenu>
|
|
</CellTemplate>
|
|
</SbColumn>
|
|
</SbDataGrid>
|
|
```
|