Back to Details

shadcn_ui-dialog

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Dialog

Shadcn UI — 对话框

Instructions

使用说明

A modal dialog that interrupts the user. Use 
showShadDialog(context: context, builder: ...)
and return a 
ShadDialog
or 
ShadDialog.alert
. Provide 
title
, optional 
description
, optional 
actions
(list of widgets, e.g. buttons), and optional 
child
for body content. Dismiss with 
Navigator.of(context).pop(...)
.
一种会打断用户操作的模态对话框。使用
showShadDialog(context: context, builder: ...)
并返回
ShadDialog
或
ShadDialog.alert
。需提供
title
（标题），可选的
description
（描述）、
actions
（组件列表，如按钮），以及用于主体内容的可选
child
。通过
Navigator.of(context).pop(...)
关闭对话框。

Standard dialog

标准对话框

dart
showShadDialog(
  context: context,
  builder: (context) => ShadDialog(
    title: const Text('Edit Profile'),
    description: const Text(
      "Make changes to your profile here. Click save when you're done",
    ),
    actions: const [ShadButton(child: Text('Save changes'))],
    child: Container(
      width: 375,
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.end,
        spacing: 16,
        children: profile
            .map(
              (p) => Row(
                children: [
                  Expanded(
                    child: Text(
                      p.title,
                      textAlign: TextAlign.end,
                      style: theme.textTheme.small,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    flex: 3,
                    child: ShadInput(initialValue: p.value),
                  ),
                ],
              ),
            )
            .toList(),
      ),
    ),
  ),
);
dart
showShadDialog(
  context: context,
  builder: (context) => ShadDialog(
    title: const Text('Edit Profile'),
    description: const Text(
      "Make changes to your profile here. Click save when you're done",
    ),
    actions: const [ShadButton(child: Text('Save changes'))],
    child: Container(
      width: 375,
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.end,
        spacing: 16,
        children: profile
            .map(
              (p) => Row(
                children: [
                  Expanded(
                    child: Text(
                      p.title,
                      textAlign: TextAlign.end,
                      style: theme.textTheme.small,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    flex: 3,
                    child: ShadInput(initialValue: p.value),
                  ),
                ],
              ),
            )
            .toList(),
      ),
    ),
  ),
);

Alert dialog

警告对话框

Use 
ShadDialog.alert
for confirmations; pass 
actions
with Cancel and Continue (or similar) that call 
Navigator.of(context).pop(false)
and 
Navigator.of(context).pop(true)
.
dart
showShadDialog(
  context: context,
  builder: (context) => ShadDialog.alert(
    title: const Text('Are you absolutely sure?'),
    description: const Padding(
      padding: EdgeInsets.only(bottom: 8),
      child: Text(
        'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
      ),
    ),
    actions: [
      ShadButton.outline(
        child: const Text('Cancel'),
        onPressed: () => Navigator.of(context).pop(false),
      ),
      ShadButton(
        child: const Text('Continue'),
        onPressed: () => Navigator.of(context).pop(true),
      ),
    ],
  ),
);
使用
ShadDialog.alert
实现确认功能；传入包含Cancel（取消）和Continue（继续）等按钮的
actions
，分别调用
Navigator.of(context).pop(false)
和
Navigator.of(context).pop(true)
。
dart
showShadDialog(
  context: context,
  builder: (context) => ShadDialog.alert(
    title: const Text('Are you absolutely sure?'),
    description: const Padding(
      padding: EdgeInsets.only(bottom: 8),
      child: Text(
        'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
      ),
    ),
    actions: [
      ShadButton.outline(
        child: const Text('Cancel'),
        onPressed: () => Navigator.of(context).pop(false),
      ),
      ShadButton(
        child: const Text('Continue'),
        onPressed: () => Navigator.of(context).pop(true),
      ),
    ],
  ),
);