Back to Details

shadcn_ui-context-menu

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Context Menu

Shadcn UI — 上下文菜单

Instructions

使用说明

ShadContextMenuRegion
wraps a 
child
and shows a menu on right-click. Set 
items
to a list of 
ShadContextMenuItem
or 
ShadContextMenuItem.inset
. Use 
ShadContextMenuItem
with 
items
for submenus; use 
Divider(height: 8)
and 
Padding
for sections and labels.
ShadContextMenuRegion
包裹一个
child
组件，右键点击时会显示菜单。将
items
设置为
ShadContextMenuItem
或
ShadContextMenuItem.inset
的列表。使用带
items
参数的
ShadContextMenuItem
来创建子菜单；使用
Divider(height: 8)
和
Padding
来划分区域和添加标签。

Basic usage

基础用法

dart
ShadContextMenuRegion(
  constraints: const BoxConstraints(minWidth: 300),
  items: [
    const ShadContextMenuItem.inset(child: Text('Back')),
    const ShadContextMenuItem.inset(
      enabled: false,
      child: Text('Forward'),
    ),
    const ShadContextMenuItem.inset(child: Text('Reload')),
    const ShadContextMenuItem.inset(
      trailing: Icon(LucideIcons.chevronRight),
      items: [
        ShadContextMenuItem(child: Text('Save Page As...')),
        ShadContextMenuItem(child: Text('Create Shortcut...')),
        ShadContextMenuItem(child: Text('Developer Tools')),
        Divider(height: 8),
        ShadContextMenuItem(child: Text('Developer Tools')),
      ],
      child: Text('More Tools'),
    ),
    const Divider(height: 8),
    const ShadContextMenuItem(
      leading: Icon(LucideIcons.check),
      child: Text('Show Bookmarks Bar'),
    ),
    const ShadContextMenuItem.inset(child: Text('Show Full URLs')),
    const Divider(height: 8),
    Padding(
      padding: const EdgeInsets.fromLTRB(36, 8, 8, 8),
      child: Text('People', style: theme.textTheme.small),
    ),
    ShadContextMenuItem(
      leading: /* avatar or icon */,
      child: const Text('Pedro Duarte'),
    ),
    const ShadContextMenuItem.inset(child: Text('Colm Tuite')),
  ],
  child: Container(
    width: 300,
    height: 200,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.all(color: theme.colorScheme.border),
      borderRadius: BorderRadius.circular(8),
    ),
    child: const Text('Right click here'),
  ),
)
Use 
ShadContextMenuItem
for items with leading/trailing; 
ShadContextMenuItem.inset
for indented items. Nest 
items
for submenus.
dart
ShadContextMenuRegion(
  constraints: const BoxConstraints(minWidth: 300),
  items: [
    const ShadContextMenuItem.inset(child: Text('Back')),
    const ShadContextMenuItem.inset(
      enabled: false,
      child: Text('Forward'),
    ),
    const ShadContextMenuItem.inset(child: Text('Reload')),
    const ShadContextMenuItem.inset(
      trailing: Icon(LucideIcons.chevronRight),
      items: [
        ShadContextMenuItem(child: Text('Save Page As...')),
        ShadContextMenuItem(child: Text('Create Shortcut...')),
        ShadContextMenuItem(child: Text('Developer Tools')),
        Divider(height: 8),
        ShadContextMenuItem(child: Text('Developer Tools')),
      ],
      child: Text('More Tools'),
    ),
    const Divider(height: 8),
    const ShadContextMenuItem(
      leading: Icon(LucideIcons.check),
      child: Text('Show Bookmarks Bar'),
    ),
    const ShadContextMenuItem.inset(child: Text('Show Full URLs')),
    const Divider(height: 8),
    Padding(
      padding: const EdgeInsets.fromLTRB(36, 8, 8, 8),
      child: Text('People', style: theme.textTheme.small),
    ),
    ShadContextMenuItem(
      leading: /* avatar or icon */,
      child: const Text('Pedro Duarte'),
    ),
    const ShadContextMenuItem.inset(child: Text('Colm Tuite')),
  ],
  child: Container(
    width: 300,
    height: 200,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.all(color: theme.colorScheme.border),
      borderRadius: BorderRadius.circular(8),
    ),
    child: const Text('Right click here'),
  ),
)
对于带有leading/trailing元素的菜单项，使用
ShadContextMenuItem
；对于缩进的菜单项，使用
ShadContextMenuItem.inset
。通过嵌套
items
来创建子菜单。