Back to Details

shadcn_ui-toast

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Toast

Shadcn UI — Toast

Instructions

使用说明

Toasts are succinct temporary messages. Ensure a toaster is in the tree (e.g. 
ShadToaster
). Get it with 
ShadToaster.of(context)
. Call 
toaster.show(ShadToast(...))
to show a toast; use 
toaster.hide()
to dismiss (e.g. from an action button). Use 
ShadToast
with optional 
title
, 
description
, and 
action
. Use 
ShadToast.destructive
for error-style toasts with a destructive action button (use 
ShadDecoration
to style the action border).
提示消息（Toast）是简洁的临时消息。确保组件树中已存在提示器（例如
ShadToaster
）。通过
ShadToaster.of(context)
获取实例。调用
toaster.show(ShadToast(...))
来显示提示消息；调用
toaster.hide()
来关闭（例如通过操作按钮触发）。使用
ShadToast
时可选择设置
title
、
description
和
action
参数。若要显示带破坏性操作按钮的错误风格提示消息，可使用
ShadToast.destructive
（可通过
ShadDecoration
设置操作按钮的边框样式）。

Simple

基础示例

dart
ShadToaster.of(context).show(
  const ShadToast(
    description: Text('Your message has been sent.'),
  ),
);
dart
ShadToaster.of(context).show(
  const ShadToast(
    description: Text('Your message has been sent.'),
  ),
);

With title

带标题的示例

dart
ShadToaster.of(context).show(
  const ShadToast(
    title: Text('Uh oh! Something went wrong'),
    description: Text('There was a problem with your request'),
  ),
);
dart
ShadToaster.of(context).show(
  const ShadToast(
    title: Text('Uh oh! Something went wrong'),
    description: Text('There was a problem with your request'),
  ),
);

With action

带操作按钮的示例

dart
ShadToaster.of(context).show(
  ShadToast(
    title: const Text('Uh oh! Something went wrong'),
    description: const Text('There was a problem with your request'),
    action: ShadButton.outline(
      child: const Text('Try again'),
      onPressed: () => ShadToaster.of(context).hide(),
    ),
  ),
);
dart
ShadToaster.of(context).show(
  ShadToast(
    title: const Text('Uh oh! Something went wrong'),
    description: const Text('There was a problem with your request'),
    action: ShadButton.outline(
      child: const Text('Try again'),
      onPressed: () => ShadToaster.of(context).hide(),
    ),
  ),
);

Destructive

破坏性样式示例

dart
final theme = ShadTheme.of(context);
ShadToaster.of(context).show(
  ShadToast.destructive(
    title: const Text('Uh oh! Something went wrong'),
    description: const Text('There was a problem with your request'),
    action: ShadButton.destructive(
      child: const Text('Try again'),
      decoration: ShadDecoration(
        border: ShadBorder.all(
          color: theme.colorScheme.destructiveForeground,
          width: 1,
        ),
      ),
      onPressed: () => ShadToaster.of(context).hide(),
    ),
  ),
);
dart
final theme = ShadTheme.of(context);
ShadToaster.of(context).show(
  ShadToast.destructive(
    title: const Text('Uh oh! Something went wrong'),
    description: const Text('There was a problem with your request'),
    action: ShadButton.destructive(
      child: const Text('Try again'),
      decoration: ShadDecoration(
        border: ShadBorder.all(
          color: theme.colorScheme.destructiveForeground,
          width: 1,
        ),
      ),
      onPressed: () => ShadToaster.of(context).hide(),
    ),
  ),
);