组件

项目中各种通用的 UI 组件的示例

通知

向用户提供一些提示、警告类信息。

系统通知

系统将于 20:00～22:00 进行维护，敬请期待！

<!-- HTML -->

<!-- 成功 -->
<div class="Notification Notification--success">
  <p class="Notification-content">系统将于 20:00～22:00 进行维护，敬请期待！</p>
  <button class="Notification-button--close" type="button">&times;</button>
</div>
<!-- 警告 -->
<div class="Notification Notification--warning">
  <p class="Notification-content">系统将于 20:00～22:00 进行维护，敬请期待！</p>
  <button class="Notification-button--close" type="button">&times;</button>
</div>
<!-- 失败 -->
<div class="Notification Notification--error">
  <p class="Notification-content">系统将于 20:00～22:00 进行维护，敬请期待！</p>
  <button class="Notification-button--close" type="button">&times;</button>
</div>

绿色的用于成功信息；橙色的用于警告信息；红色的用于错误信息。

该组件可以直接将 HTML 结构输出到页面上，也可以通过 JavaScript 代码来调用。直接输出的话，只能手动关闭；通过脚本调用则能够在 3 秒后自动消失。

可以通过如下代码调用：

// JavaScript

YouYu.notification("系统将于 20:00～22:00 进行维护，敬请期待！");

更多用法请看 YouYu.notification()。

设计师开发者