跳到主要内容
alert
用于在页面上弹出一个模态框，显示一些重要或需要用户确认的信息，比如警告、错误、询问等，通常有一个或多个按钮，可以执行确定或取消等操作。
用法
样式
可访问性

概述​

陈述组件的作用、意义

Eg：用于一个开始动作的即时操作, 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑，按钮标签表示用户与之交互时将发生的动作。

构成元素​

陈述组件的构成元素

EG：

  1. 标题：出现在标题框的文本
  2. 图标：直观的告知用户通知类型

可以放置一个 Fimga 设计稿地址

类型​

例举组件的类型

Eg：Button Primary/Secondary/Tertiary/Ghost

尺寸​

描述组件的尺寸

Eg：高度700PX，宽度100%（填满容器）

相关组件对比​

横向对比相关组件的差别，从内容复杂程度、场景等角度描述差异，建议使用表格。

用法

什么时候使用​

  • 你想显示与界面上无关的信息。
  • 你想显示复杂的错误、警告、成功、普通信息通知。
  • 你需要展示信息，但又不想打断用户。

什么时候不使用​

  • 你想显示一条简短的状态信息。（请改用Toast）

最佳实践​

例举标准的用法，贴合实际业务场景。

行为

出现方式​

通知从屏幕的右上方滑入和滑出。新的通知应该出现在页面的顶部，旧的通知会被推到下面，直到它们被取消。

生命周期​

用户主动关闭

全局变化

容器的规则​

此组件以Z轴浮层形式出现，组件会覆盖屏幕上的内容，并始终出现在最顶层

跨端的变化​

描述该组件在 Pad 、Phone 端的样式、逻辑差异

  • Pad
  • Phone

相关资源

组件负责人​

  1. 前端
  2. 设计 PC

同类组件​

这里放置其它厂商的组件链接，比如IBM、SAP、Apple、Google

日志

  • 版本号 新增了 XXX 内容 解决了 XXX 问题 删除了 XXX 内容

检查清单

  • 视觉样式

    • 所有交互状态

      包括所有适用的互动状态（Hover、Placeholder、Focus、Keyboard Focus、Disable）

    • 定义的属性

      包括相关属性（变体、样式、大小、方向、可选图标、选中、错误状态等）

    • 定义的行为

      包括键盘焦点、布局（包裹、截断、溢出）、动画、交互等方面的准则

    • 设计标注

      所有设计属性（颜色、排版、布局、动画等）都可以作为设计标注

    • 所有颜色主题

      在所有两种颜色主题（浅色、深色）中正常工作

  • 无障碍设计

    • 颜色的无障碍使用

      颜色不作为传递信息的唯一视觉手段（WCAG 2.0 1.4.1）

    • 无障碍的文字对比度

      小文本的对比度至少为4.5:1，大文本的对比度至少为3:1（WCAG 2.0 1.4.3）

    • UI组件的无障碍对比度

      识别组件和状态所需的视觉信息（非活动组件除外）的对比度至少为3:1（WCAG 2.1 1.4.11）

    • 键盘互动

      遵循WCAG 2.0标准的键盘可访问性指南，包括键盘交互的描述

  • 兼容跨端
    • 所有平台尺寸 包括一个桌面比例（Web PC）和一个移动比例（iOS、Android、Web Mobile）
  • 信息架构指导

    • 使用指南

      包括一个该做和不该做的清单，强调最佳实践和常见错误

    • 内容指南

      包括如何编写组件内的信息或产品内容的标准格式

    • 内容设计

      UI设计语言和信息设计的考虑已被纳入组件设计中

    • 国际化指南

      可在各种语言环境中正常工作，并包含双向性 (RTL) 指南