Toast

npm package npm downloads jsdelivr github
npm package npm downloads jsdelivr github

纯 CSS toast 组件。

怎么用?

yarn add @_nu/css-toast
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-toast/css/core.min.css" />
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-toast/css/skins/bootstrap.min.css" />

@_nu/css-toast/css
├── core.css           // 核心样式
└── skins
    └── bootstrap.css  // 借用 bootstrap alert 的样式

因为组件只有最基础的交互样式,所以在实际使用需要根据设计需求进行二次样式封装。

Dom 结构

<div class="nu_toast">
  <div class="nu_toast_in">
    <!-- 这是放toast文字的地方 -->
  </div>
</div>

为了拓展性这边约定需要创建两层 dom 并且名称为 nu_toast 和 nu_toast_in。

Api

选择器 功能
.nu_toast._open 是否显示 toast
.nu_dialog._[skins] toast 的皮肤

这边约定用 _open 来控制 toast 的显示隐藏。

对于设计系统我们推荐 UI 是收敛的,所以建议只需要实现 _success,_warning,_danger 即可。

当然如果你有自定义需求,建议采用 bootstrap 的颜色方案:

_priamry,_secondary,_success,_warning,_danger,_info,_light,_dark。

如何添加动效?

.nu_toast {
  visibility: hidden;
  opacity: 0;
  transform: translate(0, -10px);
  transition: 200ms;
}

.nu_toast._open {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

如何添加皮肤 ?

.nu_toast {
  border-radius: 0.25rem;
  padding: 0.75rem 1.25rem;
  color: #004085;
  background-color: #cce5ff;
  border: 1px solid #b8daff;
}

.nu_toast._danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.nu_toast._warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.nu_toast._success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

Logic Only

上次更新: 5/16/2020, 3:33:45 PM