在前端开发中，toast 是一个常见的组件，用于提示用户某些信息或操作结果。Toast-CSS 是一个轻量级的 CSS 库，可以快速帮助您创建漂亮的 toast。
安装
使用 npm，您可以轻松地将 Toast-CSS 添加到您的项目中：
npm install toast-css
如果您正在使用 yarn，则可以运行以下命令：
yarn add toast-css
使用
要使用 Toast-CSS，首先需要在 HTML 中引入样式表文件：
<link rel="stylesheet" href="node_modules/toast-css/dist/toast.min.css">
然后，您可以使用以下代码来创建一个基本的 toast：
<div class="toast">Hello, world!</div>
在默认情况下，toast 会在页面顶部出现并在 3 秒钟后消失。如果您想要在不同的位置显示 toast 或者更改默认的显示时间，您可以通过添加一些类名来实现：
<div class="toast toast--topRight toast--success toast--long">Success message</div>
以上代码将创建一个显示在页面右上角、样式为成功消息、持续时间为 5 秒的 toast。
Toast-CSS 支持多种样式（如成功、错误、警告等），您可以根据需要选择其中之一。同时，您也可以通过自定义样式来创建独特的 toast。
示例代码
以下是一个完整的示例，演示如何使用 Toast-CSS 来创建基本的 toast：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ---------------
----- ---------------- -------------------------------------------------
-------
------- -
-------- ---- -----
----------------- --------
------ -----
-------------- ----
------- --------
-
--------
-------
------
---- ------------------
--------- ------------
-------- --- ------ ----- -- ---- - ----- ------------
------- ---------------------- ------------------- --------------
------
---- -------------------- ------------
------- --------------------------------------------------------
--------
----- --------------- - ---------------------------------------------
----- ----- - ---------------------------------
----------------------------------------- -- -- -
-------------------------------------- ---------------
----------------- - ----- -- - ---- ----- ------- ---- ---- ---- --- - ----------
------------------- - --------
------------- -- -
------------------- - -------
----------------------------------------- ---------------
-- ------
---
---------
-------
-------以上代码将创建一个包含一个按钮的页面。当用户单击该按钮时，将显示一个持续时间为 5 秒的 toast 消息，出现在页面右上角。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34369