Back to Details

syncfusion-blazor-notifications

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Notifications

实现Syncfusion Blazor通知组件

A comprehensive skill for implementing Toast, Message, and Skeleton components from Syncfusion Blazor Notifications. These components provide essential user feedback mechanisms including temporary notifications, inline messages, and content loading states.
这是一份关于实现Syncfusion Blazor Notifications中Toast、Message和Skeleton组件的综合指南。这些组件提供了必要的用户反馈机制，包括临时通知、内联消息和内容加载状态。

Component Overview

组件概述

SfToast

SfToast

Lightweight, non-blocking notification popups that appear temporarily to provide feedback. Supports positioning, animations, action buttons, and templates.
Key Features:
  • Configurable positions (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
  • Show/hide animations with customizable timing
  • Auto-dismiss with timeout and progress bar
  • Action buttons for user interaction
  • Template support for custom content
  • Event callbacks (OnOpen, OnClose, OnClick)
  • Multiple toast stacking (newest on top/bottom)
轻量级、非阻塞式的通知弹窗，会临时显示以提供反馈。支持定位、动画、操作按钮和模板。
核心特性：
  • 可配置位置（左上、顶部居中、右上、左下、底部居中、右下）
  • 可自定义时长的显示/隐藏动画
  • 带超时和进度条的自动关闭功能
  • 用于用户交互的操作按钮
  • 自定义内容的模板支持
  • 事件回调（OnOpen、OnClose、OnClick）
  • 多个Toast堆叠（最新的在顶部/底部）

SfMessage

SfMessage

Inline alert component for displaying contextual feedback messages with different severity levels.
Key Features:
  • Severity types (Normal, Info, Success, Warning, Error) with color-coded styling
  • Variants (Text, Outlined, Filled) for different visual styles
  • Built-in icons matching severity levels
  • Optional close button for dismissible messages
  • Content alignment (left, center, right)
  • Visibility control and close event handling
  • Custom CSS styling support
内联警告组件，用于显示不同严重级别的上下文反馈消息。
核心特性：
  • 严重级别类型（普通、提示、成功、警告、错误），配有颜色编码样式
  • 变体样式（文本型、轮廓型、填充型）
  • 与严重级别匹配的内置图标
  • 可选的关闭按钮，支持可关闭消息
  • 内容对齐方式（左、居中、右）
  • 可见性控制和关闭事件处理
  • 自定义CSS样式支持

SfSkeleton

SfSkeleton

Loading placeholder component that displays animated shapes to indicate content is loading.
Key Features:
  • Shapes (Circle, Square, Rectangle, Text) for different content types
  • Shimmer effects (Pulse, Wave, Fade, None) for visual feedback
  • Configurable dimensions (width, height)
  • Accessibility labels for screen readers
  • Visibility toggle for showing/hiding
  • CSS customization for styling
加载占位符组件，显示动画形状以指示内容正在加载。
核心特性：
  • 适用于不同内容类型的形状（圆形、方形、矩形、文本）
  • 视觉反馈的微光效果（脉冲、波浪、淡入淡出、无）
  • 可配置的尺寸（宽度、高度）
  • 供屏幕阅读器使用的无障碍标签
  • 显示/隐藏的可见性切换
  • 样式自定义的CSS支持

Quick Start

快速开始

Toast - Basic Example

Toast - 基础示例

razor
@page "/toast-demo"
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="ShowToast">Show Toast</SfButton>

<SfToast @ref="ToastObj" Title="Notification" Content="Your changes have been saved successfully!" />

@code {
    SfToast ToastObj;

    private async Task ShowToast()
    {
        await ToastObj.ShowAsync();
    }
}
razor
@page "/toast-demo"
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="ShowToast">Show Toast</SfButton>

<SfToast @ref="ToastObj" Title="Notification" Content="Your changes have been saved successfully!" />

@code {
    SfToast ToastObj;

    private async Task ShowToast()
    {
        await ToastObj.ShowAsync();
    }
}

Message - Basic Example

Message - 基础示例

razor
@page "/message-demo"
@using Syncfusion.Blazor.Notifications

<SfMessage Severity="MessageSeverity.Success" ShowIcon="true" ShowCloseIcon="true">
    Your profile has been updated successfully!
</SfMessage>

<SfMessage Severity="MessageSeverity.Warning" ShowIcon="true">
    Your session will expire in 5 minutes.
</SfMessage>

<SfMessage Severity="MessageSeverity.Error" ShowIcon="true" ShowCloseIcon="true">
    Failed to save changes. Please try again.
</SfMessage>
razor
@page "/message-demo"
@using Syncfusion.Blazor.Notifications

<SfMessage Severity="MessageSeverity.Success" ShowIcon="true" ShowCloseIcon="true">
    Your profile has been updated successfully!
</SfMessage>

<SfMessage Severity="MessageSeverity.Warning" ShowIcon="true">
    Your session will expire in 5 minutes.
</SfMessage>

<SfMessage Severity="MessageSeverity.Error" ShowIcon="true" ShowCloseIcon="true">
    Failed to save changes. Please try again.
</SfMessage>

Skeleton - Basic Example

Skeleton - 基础示例

razor
@page "/skeleton-demo"
@using Syncfusion.Blazor.Notifications

<div class="skeleton-container">
    <SfSkeleton Shape="SkeletonType.Circle" Width="60px" Height="60px" />
    <div class="skeleton-text">
        <SfSkeleton Shape="SkeletonType.Text" Width="80%" />
        <SfSkeleton Shape="SkeletonType.Text" Width="60%" />
    </div>
</div>

<style>
    .skeleton-container {
        display: flex;
        gap: 16px;
        padding: 16px;
    }
    .skeleton-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
</style>
razor
@page "/skeleton-demo"
@using Syncfusion.Blazor.Notifications

<div class="skeleton-container">
    <SfSkeleton Shape="SkeletonType.Circle" Width="60px" Height="60px" />
    <div class="skeleton-text">
        <SfSkeleton Shape="SkeletonType.Text" Width="80%" />
        <SfSkeleton Shape="SkeletonType.Text" Width="60%" />
    </div>
</div>

<style>
    .skeleton-container {
        display: flex;
        gap: 16px;
        padding: 16px;
    }
    .skeleton-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
</style>

Documentation and Navigation Guide

文档与导航指南

Toast Component

Toast组件

Getting Started with Toast

Toast入门

📄 Read: references/toast-getting-started.md
  • Installation and NuGet package setup
  • Service registration in Program.cs
  • Basic toast implementation
  • Showing and hiding toasts programmatically
  • Position configuration basics
  • Simple success/error notifications
📄 阅读： references/toast-getting-started.md
  • 安装和NuGet包设置
  • Program.cs中的服务注册
  • 基础Toast实现
  • 以编程方式显示和隐藏Toast
  • 位置配置基础
  • 简单的成功/错误通知

Advanced Toast Features

Toast高级特性

📄 Read: references/toast-features.md
  • Position and alignment options (9 predefined positions)
  • Animation settings (show/hide with effects and duration)
  • Auto-dismiss with timeout and extended timeout
  • Progress bar display and direction
  • Action buttons with event handlers
  • Title and content templates
  • Multiple toast management and stacking order
  • Event callbacks (OnOpen, OnClose, OnClick, BeforeOpen, BeforeClose)
  • RTL (right-to-left) support
  • Custom width, height, and CSS styling
  • Target container specification
📄 阅读： references/toast-features.md
  • 位置和对齐选项（9个预定义位置）
  • 动画设置（带效果和时长的显示/隐藏）
  • 带超时和延长超时的自动关闭
  • 进度条显示和方向
  • 带事件处理程序的操作按钮
  • 标题和内容模板
  • 多个Toast管理和堆叠顺序
  • 事件回调（OnOpen、OnClose、OnClick、BeforeOpen、BeforeClose）
  • RTL（从右到左）支持
  • 自定义宽度、高度和CSS样式
  • 目标容器指定

Message Component

Message组件

Message Implementation

Message实现

📄 Read: references/message-implementation.md
  • Getting started with Message component
  • Severity types (Normal, Info, Success, Warning, Error)
  • Variant styles (Text, Outlined, Filled)
  • Icon configuration (built-in and custom)
  • Close icon and dismissal handling
  • Content alignment options
  • Visibility control and two-way binding
  • Close event handling
  • Custom content with ChildContent
  • CSS class customization
  • Accessibility features
  • Integration with forms and validation
📄 阅读： references/message-implementation.md
  • Message组件入门
  • 严重级别类型（普通、提示、成功、警告、错误）
  • 变体样式（文本型、轮廓型、填充型）
  • 图标配置（内置和自定义）
  • 关闭图标和关闭处理
  • 内容对齐选项
  • 可见性控制和双向绑定
  • 关闭事件处理
  • 带ChildContent的自定义内容
  • CSS类自定义
  • 无障碍特性
  • 与表单和验证的集成

Skeleton Component

Skeleton组件

Skeleton Implementation

Skeleton实现

📄 Read: references/skeleton-implementation.md
  • Getting started with Skeleton component
  • Skeleton shapes (Circle, Square, Rectangle, Text)
  • Shimmer effects (Pulse, Wave, Fade, None)
  • Width and height configuration
  • Visibility toggle for loading states
  • Accessibility labels for screen readers
  • Multiple skeleton layouts (lists, cards, tables)
  • Common loading patterns (profile, article, grid)
  • CSS customization and theming
  • Performance considerations
📄 阅读： references/skeleton-implementation.md
  • Skeleton组件入门
  • Skeleton形状（圆形、方形、矩形、文本）
  • 微光效果（脉冲、波浪、淡入淡出、无）
  • 宽度和高度配置
  • 加载状态的可见性切换
  • 供屏幕阅读器使用的无障碍标签
  • 多个Skeleton布局（列表、卡片、表格）
  • 常见加载模式（个人资料、文章、网格）
  • CSS自定义和主题设置
  • 性能考虑

Styling and Themes

样式与主题

Styling All Notification Components

所有通知组件的样式设置

📄 Read: references/styling-and-themes.md
  • Theme integration (Bootstrap, Material, Fluent, Tailwind)
  • Custom CSS classes for Toast
  • Custom CSS classes for Message
  • Custom CSS classes for Skeleton
  • Dark mode support for all components
  • Responsive design patterns
  • Color customization
  • Animation customization
  • Component-specific styling techniques
📄 阅读： references/styling-and-themes.md
  • 主题集成（Bootstrap、Material、Fluent、Tailwind）
  • Toast的自定义CSS类
  • Message的自定义CSS类
  • Skeleton的自定义CSS类
  • 所有组件的深色模式支持
  • 响应式设计模式
  • 颜色自定义
  • 动画自定义
  • 组件特定的样式技巧

Use Cases and Examples

使用场景与示例

Real-World Implementation Examples

真实场景实现示例

📄 Read: references/use-cases-and-examples.md
  • Form submission feedback (Toast + Message)
  • E-commerce cart notifications
  • Dashboard data updates
  • File upload progress and feedback
  • User authentication feedback
  • Data loading with Skeleton placeholders
  • Error handling and recovery
  • Multi-step process feedback
  • Notification center/history
  • Combining all three components effectively
📄 阅读： references/use-cases-and-examples.md
  • 表单提交反馈（Toast + Message）
  • 电商购物车通知
  • 仪表盘数据更新
  • 文件上传进度和反馈
  • 用户认证反馈
  • 带Skeleton占位符的数据加载
  • 错误处理与恢复
  • 多步骤流程反馈
  • 通知中心/历史记录
  • 有效组合三个组件

Common Patterns

常见模式

Pattern 1: Success/Error Feedback with Toast

模式1：使用Toast提供成功/错误反馈

razor
@code {
    SfToast ToastObj;

    private async Task SaveData()
    {
        try
        {
            await DataService.SaveAsync();
            ToastObj.Title = "Success";
            ToastObj.Content = "Data saved successfully!";
            await ToastObj.ShowAsync();
        }
        catch (Exception ex)
        {
            ToastObj.Title = "Error";
            ToastObj.Content = $"Failed to save: {ex.Message}";
            await ToastObj.ShowAsync();
        }
    }
}
razor
@code {
    SfToast ToastObj;

    private async Task SaveData()
    {
        try
        {
            await DataService.SaveAsync();
            ToastObj.Title = "Success";
            ToastObj.Content = "Data saved successfully!";
            await ToastObj.ShowAsync();
        }
        catch (Exception ex)
        {
            ToastObj.Title = "Error";
            ToastObj.Content = $"Failed to save: {ex.Message}";
            await ToastObj.ShowAsync();
        }
    }
}

Pattern 2: Form Validation with Message

模式2：使用Message进行表单验证

razor
<EditForm Model="@model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <SfMessage Severity="MessageSeverity.Error" 
                   ShowIcon="true" 
                   ShowCloseIcon="true"
                   Closed="@(() => errorMessage = null)">
            @errorMessage
        </SfMessage>
    }
    
    <!-- Form fields -->
</EditForm>
razor
<EditForm Model="@model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <SfMessage Severity="MessageSeverity.Error" 
                   ShowIcon="true" 
                   ShowCloseIcon="true"
                   Closed="@(() => errorMessage = null)">
            @errorMessage
        </SfMessage>
    }
    
    <!-- Form fields -->
</EditForm>

Pattern 3: Loading State with Skeleton

模式3：使用Skeleton实现加载状态

razor
@if (isLoading)
{
    <div class="product-card-skeleton">
        <SfSkeleton Shape="SkeletonType.Rectangle" Width="100%" Height="200px" />
        <SfSkeleton Shape="SkeletonType.Text" Width="80%" />
        <SfSkeleton Shape="SkeletonType.Text" Width="60%" />
    </div>
}
else
{
    <div class="product-card">
        <img src="@product.ImageUrl" alt="@product.Name" />
        <h3>@product.Name</h3>
        <p>@product.Description</p>
    </div>
}
razor
@if (isLoading)
{
    <div class="product-card-skeleton">
        <SfSkeleton Shape="SkeletonType.Rectangle" Width="100%" Height="200px" />
        <SfSkeleton Shape="SkeletonType.Text" Width="80%" />
        <SfSkeleton Shape="SkeletonType.Text" Width="60%" />
    </div>
}
else
{
    <div class="product-card">
        <img src="@product.ImageUrl" alt="@product.Name" />
        <h3>@product.Name</h3>
        <p>@product.Description</p>
    </div>
}

Pattern 4: Multiple Toast Types

模式4：多种类型的Toast

razor
<SfToast @ref="SuccessToast" 
         Title="Success" 
         Icon="e-success" 
         CssClass="e-toast-success"
         <ToastPosition X="Right" Y="Top"></ToastPositio

<SfToast @ref="ErrorToast" 
         Title="Error" 
         Icon="e-error" 
         CssClass="e-toast-danger"
         <ToastPosition X="Right" Y="Top"></ToastPosition>

<SfToast @ref="WarningToast" 
         Title="Warning" 
         Icon="e-warning" 
         CssClass="e-toast-warning"
         <ToastPosition X="Right" Y="Top"></ToastPosition>

@code {
    SfToast SuccessToast, ErrorToast, WarningToast;

    private async Task ShowSuccess(string message)
    {
        SuccessToast.Content = message;
        await SuccessToast.ShowAsync();
    }

    private async Task ShowError(string message)
    {
        ErrorToast.Content = message;
        await ErrorToast.ShowAsync();
    }

    private async Task ShowWarning(string message)
    {
        WarningToast.Content = message;
        await WarningToast.ShowAsync();
    }
}
razor
<SfToast @ref="SuccessToast" 
         Title="Success" 
         Icon="e-success" 
         CssClass="e-toast-success"
         <ToastPosition X="Right" Y="Top"></ToastPosition>

<SfToast @ref="ErrorToast" 
         Title="Error" 
         Icon="e-error" 
         CssClass="e-toast-danger"
         <ToastPosition X="Right" Y="Top"></ToastPosition>

<SfToast @ref="WarningToast" 
         Title="Warning" 
         Icon="e-warning" 
         CssClass="e-toast-warning"
         <ToastPosition X="Right" Y="Top"></ToastPosition>

@code {
    SfToast SuccessToast, ErrorToast, WarningToast;

    private async Task ShowSuccess(string message)
    {
        SuccessToast.Content = message;
        await SuccessToast.ShowAsync();
    }

    private async Task ShowError(string message)
    {
        ErrorToast.Content = message;
        await ErrorToast.ShowAsync();
    }

    private async Task ShowWarning(string message)
    {
        WarningToast.Content = message;
        await WarningToast.ShowAsync();
    }
}

Installation

安装

NuGet Package

NuGet包

bash
dotnet add package Syncfusion.Blazor.Notifications
dotnet add package Syncfusion.Blazor.Themes
bash
dotnet add package Syncfusion.Blazor.Notifications
dotnet add package Syncfusion.Blazor.Themes

Service Registration

服务注册

Program.cs:
csharp
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSyncfusionBlazor();
Program.cs：
csharp
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSyncfusionBlazor();

Namespace Import

命名空间导入

_Imports.razor:
razor
@using Syncfusion.Blazor.Notifications
_Imports.razor：
razor
@using Syncfusion.Blazor.Notifications

Theme Reference

主题引用

App.razor or layout file:
html
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
App.razor或布局文件：
html
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

Key Properties Reference

核心属性参考

Toast Properties

Toast属性

PropertyTypeDescription
ContentstringToast message content
TitlestringToast title text
IconstringIcon CSS class
PositionToastPositionX and Y position (Top, Bottom, Left, Right, Center)
TimeoutintAuto-hide duration in milliseconds (default: 5000)
ShowCloseButtonboolDisplay close button (default: false)
ShowProgressBarboolDisplay progress bar (default: false)
NewestOnTopboolStack newest toast on top (default: true)
CssClassstringCustom CSS classes
属性类型描述
ContentstringToast消息内容
TitlestringToast标题文本
Iconstring图标CSS类
PositionToastPositionX和Y位置（顶部、底部、左侧、右侧、居中）
Timeoutint自动隐藏时长（毫秒，默认：5000）
ShowCloseButtonbool显示关闭按钮（默认：false）
ShowProgressBarbool显示进度条（默认：false）
NewestOnTopbool将最新Toast堆叠在顶部（默认：true）
CssClassstring自定义CSS类

Message Properties

Message属性

PropertyTypeDescription
SeverityMessageSeverityNormal, Info, Success, Warning, Error
VariantMessageVariantText, Outlined, Filled
ShowIconboolDisplay severity icon (default: true)
ShowCloseIconboolDisplay close button (default: false)
VisibleboolControl visibility
ContentAlignmentHorizontalAlignLeft, Center, Right alignment
CssClassstringCustom CSS classes
属性类型描述
SeverityMessageSeverity普通、提示、成功、警告、错误
VariantMessageVariant文本型、轮廓型、填充型
ShowIconbool显示严重级别图标（默认：true）
ShowCloseIconbool显示关闭按钮（默认：false）
Visiblebool控制可见性
ContentAlignmentHorizontalAlign左、居中、右对齐
CssClassstring自定义CSS类

Skeleton Properties

Skeleton属性

PropertyTypeDescription
ShapeSkeletonTypeCircle, Square, Rectangle, Text
EffectShimmerEffectPulse, Wave, Fade, None
WidthstringWidth in px, %, or other CSS units
HeightstringHeight in px, %, or other CSS units
VisibleboolControl visibility
LabelstringAccessibility label
CssClassstringCustom CSS classes
属性类型描述
ShapeSkeletonType圆形、方形、矩形、文本
EffectShimmerEffect脉冲、波浪、淡入淡出、无
Widthstring宽度（px、%或其他CSS单位）
Heightstring高度（px、%或其他CSS单位）
Visiblebool控制可见性
Labelstring无障碍标签
CssClassstring自定义CSS类

Common Use Cases

常见使用场景

  1. Form Submission Feedback - Show success/error toast after form submission
  2. Validation Messages - Display inline messages for validation errors
  3. Loading States - Use skeleton during data fetching
  4. Cart Operations - Toast notifications for add/remove from cart
  5. File Upload - Progress feedback and completion notification
  6. API Errors - Display error messages with retry options
  7. Session Warnings - Show warning message before session expires
  8. Data Refresh - Skeleton placeholders during refresh operations
  9. Multi-Step Forms - Progress feedback at each step
  10. Real-time Updates - Toast notifications for live data changes
  1. 表单提交反馈 - 表单提交后显示成功/错误Toast
  2. 验证消息 - 显示内联消息提示验证错误
  3. 加载状态 - 数据获取期间使用Skeleton
  4. 购物车操作 - 添加/移除商品时显示Toast通知
  5. 文件上传 - 进度反馈和完成通知
  6. API错误 - 显示带重试选项的错误消息
  7. 会话警告 - 会话过期前显示警告消息
  8. 数据刷新 - 刷新操作期间使用Skeleton占位符
  9. 多步骤表单 - 每一步显示进度反馈
  10. 实时更新 - 实时数据变化时显示Toast通知

Troubleshooting

故障排除

Toast Not Appearing

Toast不显示

  • Ensure 
    ShowAsync()
    is called to display the toast
  • Verify toast component has content or template
  • Check if toast timeout is too short
  • Confirm ToastPosition is within viewport bounds
  • 确保调用了
    ShowAsync()
    来显示Toast
  • 验证Toast组件有内容或模板
  • 检查Toast超时是否过短
  • 确认ToastPosition在视口范围内

Message Not Visible

Message不可见

  • Check 
    Visible
    property is set to 
    true
  • Verify message has content in ChildContent or Content property
  • Ensure component is rendered in DOM (not hidden by parent)
  • Check CSS z-index conflicts
  • 检查
    Visible
    属性是否设置为
    true
  • 验证Message在ChildContent或Content属性中有内容
  • 确保组件已渲染到DOM中（未被父元素隐藏）
  • 检查CSS z-index冲突

Skeleton Not Animating

Skeleton无动画

  • Verify 
    Effect
    property is set (Pulse, Wave, or Fade)
  • Check if shimmer effect CSS is loaded with theme
  • Ensure skeleton has defined width and height
  • Confirm 
    Visible
    is set to 
    true
  • 验证
    Effect
    属性已设置（脉冲、波浪或淡入淡出）
  • 检查主题是否加载了微光效果CSS
  • 确保Skeleton已定义宽度和高度
  • 确认
    Visible
    设置为
    true

Theme Not Applied

主题未应用

  • Verify theme CSS is referenced in App.razor or layout
  • Check Syncfusion.Blazor.Themes package is installed
  • Ensure CSS link is before component usage
  • Try clearing browser cache
  • 验证主题CSS已在App.razor或布局中引用
  • 检查Syncfusion.Blazor.Themes包是否已安装
  • 确保CSS链接在组件使用之前
  • 尝试清除浏览器缓存

Service Not Registered

服务未注册

  • Add 
    builder.Services.AddSyncfusionBlazor()
    in Program.cs
  • Verify Syncfusion.Blazor.Core package is installed
  • Ensure using statement is present
  • Rebuild project after adding service
  • 在Program.cs中添加
    builder.Services.AddSyncfusionBlazor()
  • 验证Syncfusion.Blazor.Core包是否已安装
  • 确保存在using语句
  • 添加服务后重建项目

Best Practices

最佳实践

  1. Use appropriate notification type - Toast for temporary, Message for persistent
  2. Limit toast duration - 3-7 seconds for most messages, longer for errors
  3. Provide clear actions - Include retry/dismiss buttons where appropriate
  4. Skeleton resemblance - Make skeleton shapes match actual content structure
  5. Accessibility - Always provide labels for skeletons and icons
  6. Position consistency - Use same toast position throughout app
  7. Message severity - Use correct severity level for message context
  8. Avoid overuse - Don't overwhelm users with too many notifications
  9. Progressive enhancement - Use skeleton for perceived performance improvement
  10. Error handling - Always handle toast/message display errors gracefully
  1. 使用合适的通知类型 - Toast用于临时通知，Message用于持久化消息
  2. 限制Toast时长 - 大多数消息设置3-7秒，错误消息可更长
  3. 提供清晰操作 - 适当情况下包含重试/关闭按钮
  4. Skeleton与实际内容匹配 - 使Skeleton形状与实际内容结构一致
  5. 无障碍支持 - 始终为Skeleton和图标提供标签
  6. 位置一致性 - 整个应用使用相同的Toast位置
  7. 消息严重级别匹配 - 根据消息上下文使用正确的严重级别
  8. 避免过度使用 - 不要用过多通知打扰用户
  9. 渐进式增强 - 使用Skeleton提升感知性能
  10. 错误处理 - 优雅处理Toast/Message显示错误

Next Steps

下一步

  • Explore Toast Advanced Features for animations and templates
  • Learn Message Implementation for form validation
  • Review Skeleton Patterns for loading states
  • Check Styling Guide for customization
  • See Real-World Examples for complete scenarios
  • 探索Toast高级特性中的动画和模板
  • 学习Message实现用于表单验证
  • 查看Skeleton模式实现加载状态
  • 查阅样式指南进行自定义
  • 参考真实场景示例了解完整场景