Toast
| npm package | npm downloads | jsdelivr | github |
|---|---|---|---|
 |  |  |
CSS toast component.
Install?
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 // Core
âââ skins
âââ bootstrap.css // skin of bootstrap
Dom
<div class="nu_toast">
<div class="nu_toast_in">
<!-- here text -->
</div>
</div>
Api
| Selector | Function |
|---|---|
.nu_toast._open | show or hide |
.nu_dialog._[skins] | skin of toast |
For the design system, we recommend that the UI is convergent, so it is recommended that only '_success', '_warning', '_danger' be implemented.
Of course, if you have custom requirements, it is recommended to use bootstrap color scheme.
_priamry,_secondary,_success,_warning,_danger,_info,_light,_darkã
Custom animation?
.nu_toast{
visibility: hidden;
opacity: 0;
transform: translate(0, -10px);
transition: 200ms;
}
.nu_toast._open {
visibility: visible;
opacity: 1;
transform: translate(0, 0);
}
Custom skin īŧ
.nu_toast {
border-radius: .25rem;
padding: .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;
}