npm 包 @bisudev/bisu-react-modal 使用教程

在 Web 开发中，React 是一款非常流行的前端框架。而在 React 中，通常需要用到 Modal（模态框）组件，以实现一些交互效果。@bisudev/bisu-react-modal 是一个 React Modal 组件库，本文将详细介绍它的用法。

安装

首先，我们需要在项目中安装 @bisudev/bisu-react-modal：

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

或者使用 yarn：

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

使用

引入组件

在你的组件文件中，引入需要的组件：

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

使用组件

然后，在组件中使用 BisuModal 组件，可通过 isOpen、onClose、onSubmit、header 和 body 等属性来设置弹出框的状态及内容：

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

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

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

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

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

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

Props

BisuModal 组件支持以下属性：

Name Type Default Description
isOpen boolean false 控制弹出框是否显示的状态
onClose function - 弹出框关闭时的回调方法
onSubmit function - 弹出框提交时的回调方法
header string - 弹出框标题
body React Node - 弹出框内容的 React 组件或 HTML 元素，通常是一个表单或一些文字
customClose React Node - 自定义关闭按钮的 React 组件或 HTML 元素
customSubmit React Node - 自定义提交按钮的 React 组件或 HTML 元素
customBackground React Node - 自定义背景元素的 React 组件或 HTML 元素

示例

下面是一个样例，展示了如何在 BisuModal 组件中使用自定义按钮、背景和样式等。

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

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

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

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

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

现在，你已经可以使用 @bisudev/bisu-react-modal 组件库来实现自己的弹出框了。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557f181e8991b448d507e

阅读全文

猜你喜欢

  • npm 包 cici 使用教程

    简介 cici 是一个 React UI 组件库，可以帮助开发人员快速构建美观且易于维护的前端界面。cici 库包含了各种基础组件和复合组件，例如按钮、输入框、表单、模态框、轮播图，以及能够提高浏览体...

    2 年前
  • npm 包 mongoose-patch-update 使用教程

    介绍 在使用 Node.js 进行 Web 开发时，使用 MongoDB 数据库是很常见的。而在与 MongoDB 进行交互时，Mongoose.js 是一个非常流行的 Node.js 模块，它可以让...

    2 年前
  • npm 包 ngdatepickerevent 使用教程

    在前端开发中，日期选择器是一个经常使用到的组件之一。而在 Angular 框架中，我们可以通过安装并使用 ngdatepickerevent 这个 npm 包来实现日期选择功能。

    2 年前
  • npm 包 push-new-version-with-codepush 使用教程

    如果你经常开发移动应用程序，你可能知道 CodePush。 CodePush 是一个用于 JavaScript 移动应用程序的云服务，可以为你的应用程序无缝提供 OTA 更新。

    2 年前
  • npm 包 jquery.spinner 使用教程

    介绍 jquery.spinner 是一个基于 jQuery 的数字输入框增减组件。它可以方便地实现数字的自增和自减，而且还支持最大值和最小值的限制。本文将介绍如何使用这个 npm 包。

    2 年前
  • npm 包 rn-base64 使用教程

    在前端开发中，使用 base64 编码是非常普遍的操作，它能将图片、视频等二进制文件编码成文本字符串，方便在网络上进行传输。而在 React Native 开发中，我们可以使用 npm 包 rn-ba...

    2 年前
  • npm 包 node-child-pm 使用教程

    当你的 Node.js 应用在运行时需要多个子进程协同完成某个任务时，就需要使用 child_process 模块来创建子进程。然而，在使用 child_process 模块时，我们需要自行管理子进程...

    2 年前
  • npm 包 haikunator-cli 使用教程

    什么是 haikunator-cli？ haikunator-cli 是一个命令行工具，用于生成简单易记的随机名称，是基于 haikunator 库的 CLI 封装，haikunator 库是一个用于...

    2 年前
  • npm 包 milf 使用教程

    介绍 npm 是一个 Node.js 的包管理工具，在前端开发中使用非常广泛。其中，milf 是一个非常优秀的 npm 包，它可以帮助我们快速生成各种页面元素，使得开发变得更加高效。

    2 年前
  • npm 包 persisto-js 使用教程

    在前端开发中，缓存数据是必不可少的操作，它可以帮助我们提高应用性能、减少网络请求等。而 npm 包 persisto-js 就是一个非常好的数据持久化库，它可以让我们方便地将数据存储到 localSt...

    2 年前
  • npm 包 timestamp-microservice-zombat 使用教程

    如果你在前端开发过程中需要处理时间戳，那么你可能需要使用 timestamp-microservice-zombat 这个 npm 包。本文将详细介绍如何使用该包以及该包的学习和指导意义。

    2 年前
  • npm包request-microservice-zombat使用教程

    在前端开发中，经常会用到调用一些RESTful风格的微服务。 request-microservice-zombat是一个基于Node.js开发的npm包，可用于发起对微服务的http请求。

    2 年前
  • npm 包 makefile-help 使用教程

    随着前端技术的不断发展，我们在日常工作中需要处理的任务也变得越来越复杂，这就需要我们使用工具来简化工作流程。而 makefile-help 这个 npm 包就是一个帮助你管理 Makefile 帮助文...

    2 年前
  • npm 包 fis3-preprocessor-noob-replace 使用教程

    前言 在前端开发中，我们经常会需要对代码进行一些必要的修改，从而达到更好的开发效果。在这个过程中，fis3-preprocessor-noob-replace 这个 npm 包可以帮助我们完成很多工作...

    2 年前
  • npm 包 s3-nosql 使用教程

    简介 s3-nosql 是一个基于 Amazon S3 实现的 NoSQL 数据库。它使用 S3 的对象存储功能作为数据存储载体，使用 Partition 和 Row Key 作为数据索引方式，以实现...

    2 年前
  • npm 包 mio-cli 使用教程

    简介 mio-cli 是一个基于 Node.js 的命令行工具，可以帮助前端开发者快速创建 Vue.js/React 项目、组件库、多页应用等，并提供相应的本地开发、构建和发布功能。

    2 年前
  • neutrino-preset-egg-typescript 使用教程

    前言 neutrino-preset-egg-typescript 是一个 npm 包，它是基于 neutrino 构建系统和 egg.js 框架的，使用 TypeScript 编写的预设包。

    2 年前
  • npm 包 @mree/mre-react-message 使用教程

    简介 @mree/mre-react-message 是一款允许在 React 应用开发中使用的消息通知组件。它支持多种消息类型，包括成功、警告、错误、信息等，并支持自定义样式和持久化。

    2 年前
  • npm 包 ab-tester 使用教程

    在前端的开发过程中，我们经常需要进行 A/B 测试来优化界面和功能。这时候就需要用到一个专门用于实现 A/B 测试的工具。ab-tester 是一个 NPM 包，可以方便地在前端项目中实现 A/B 测...

    2 年前
  • 前端开发必须掌握的 npm 包：node-sk-promise

    在 Node.js 中，我们经常使用 Promise 处理异步操作，以确保代码的正确性和可读性。而 node-sk-promise 是一个基于 Promise 的 Node.js 包，它可以轻松地实现...

    2 年前

相关推荐

    暂无文章