shadcn_ui-popover

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Popover

Instructions

使用说明

ShadPopover

displays rich content in a portal, triggered by a button (or other trigger). Use a

ShadPopoverController()

to control open/close; call

popoverController.toggle

from the trigger. Pass

popover: (context) => ...

returning the overlay widget (e.g. a

SizedBox

with form fields);

child

is the trigger widget.

ShadPopover

通过按钮（或其他触发元素）在门户中展示丰富内容。使用

ShadPopoverController()

控制弹窗的打开/关闭；从触发元素调用

popoverController.toggle

方法。传入

popover: (context) => ...

返回覆盖层组件（例如包含表单字段的

SizedBox

）；

child

为触发组件。

Basic usage

基础用法

dart

final popoverController = ShadPopoverController();

// dispose: popoverController.dispose();

ShadPopover(
  controller: popoverController,
  popover: (context) => SizedBox(
    width: 288,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Dimensions', style: textTheme.h4),
        Text('Set the dimensions for the layer.', style: textTheme.p),
        const SizedBox(height: 4),
        // ... form rows with ShadInput, etc.
      ],
    ),
  ),
  child: ShadButton.outline(
    onPressed: popoverController.toggle,
    child: const Text('Open popover'),
  ),
)

Dispose the controller in

State.dispose

dart

final popoverController = ShadPopoverController();

// dispose: popoverController.dispose();

ShadPopover(
  controller: popoverController,
  popover: (context) => SizedBox(
    width: 288,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Dimensions', style: textTheme.h4),
        Text('Set the dimensions for the layer.', style: textTheme.p),
        const SizedBox(height: 4),
        // ... form rows with ShadInput, etc.
      ],
    ),
  ),
  child: ShadButton.outline(
    onPressed: popoverController.toggle,
    child: const Text('Open popover'),
  ),
)

在

State.dispose

中销毁控制器。