npm 包 mui-simple-snackbars 使用教程

阅读时长 6 分钟读完

前言:mui-simple-snackbars 是一个基于 Material-UI Snackbar 的 npm 包,旨在为前端开发者提供快捷简单的 Snackbar 组件。

简介

Snackbar 是 UI 组件库中的一种提示行为形式,通常表示提示用户某种需要处理的情况。mui-simple-snackbars 是一个能够快速使用 Snackbar 的组件,且易于自定义和配置。

使用说明

安装

在命令行中输入以下命令进行安装:

引用

在你的项目中引入 Snackbar 组件和必要的样式文件:

使用

-- -------------------- ---- -------
---------
  ---------------
    --------- ---------
    ----------- --------
  --
  -----------------------
  -----------------
  ----------------- --------
  -----------
  ----------- -- ---
--

以上代码创建了一个带有 Snackbar message 文案的 Snackbar 组件,其类型为成功(success),并在 3s 后自动消失。Snackbar 显示位置为页面右下角。

属性

mui-simple-snackbars 提供了如下属性:

属性名 类型 是否必填 默认值 说明
anchorOrigin object { vertical: 'bottom', horizontal: 'right' } Snackbar 显示的位置,设置示例:{ vertical: 'top', horizontal: 'left' }
autoHideDuration number 5000 Snackbar 自动消失的时间间隔(毫秒)
variant string default Snackbar 的类型,目前支持 default, success, error, warning, info
message string Snackbar 显示的信息文案
open boolean false Snackbar 是否可见
onClose function Snackbar 关闭时的回调函数

类型

mui-simple-snackbars 提供了 defaultsuccesserrorwarninginfo 五种类型,可以通过 variant 属性控制。

示例:

-- -------------------- ---- -------
---------
  ---------------
    --------- ---------
    ----------- --------
  --
  -----------------------
  ---------------
  ----------------- --------
  -----------
  ----------- -- ---
--

使用案例

mui-simple-snackbars 可以应用于各种场景,比如说在表单验证失败时提示错误信息,或者在表单提交成功时提示确认信息。

以下是一个使用案例:

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -----------------------

----- ---- - -- -- -
  ----- ----------- ------------- - -------------
  ----- ----------- ------------- - ----------------
  ----- --------- ----------- - ----------------

  ----- ------------ - --- -- -
    -------------------
    -- ---------- --- --- -
      -----------------
      -------
    -
    -------------------
  --

  ------ -
    ----- ------------------------
      ------ ----------- ----------------- ------------- -- ----------------------------- --
      ------- -----------------------------

      ---------
        ---------------
          --------- ---------
          ----------- --------
        --
        -----------------------
        -----------------
        ------------- ---------- ---------
        ----------------
        ----------- -- --------------------
      --

      ---------
        ---------------
          --------- ---------
          ----------- --------
        --
        -----------------------
        ---------------
        --------------- ----- - -------
        --------------
        ----------- -- ------------------
      --
    -------
  --
-

------ ------- -----

更多使用案例可以参考 mui-simple-snackbars 的 GitHub 仓库

总结

mui-simple-snackbars 是一个快捷方便、易于自定义和配置的 Snackbar 组件。本文介绍了 mui-simple-snackbars 的使用方法与 API,以及一个简单的使用案例。希望本文能对读者有所帮助,同时也欢迎读者对本文提出宝贵的建议和意见。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005620081e8991b448df718

纠错
反馈