npm 包 @jguffey/react-mdl-extra 使用教程

前言

React-MDL 是基于 Material Design Lite 构建的 React 组件库。但是,它的缺点是官方支持的组件有限,难以满足实际需求。因此,@jguffey 开发了 @jguffey/react-mdl-extra,以提供更多的 React-MDL 组件。

本文将介绍 @jguffey/react-mdl-extra 的使用教程,包括安装、导入以及使用方法。

安装

可以通过 npm 包管理器来安装 @jguffey/react-mdl-extra:

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

导入

导入 @jguffey/react-mdl-extra 组件分两种方式:

1. 全部导入

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

2. 按需导入

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

可以选择需要导入的组件名称,减少代码体积。

使用

1. Dialog

Dialog 是一个弹出框组件,用于展示一些内容,例如:确认提示、输入框、消息展示、选择等。

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

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

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

2. Icon

Icon 是一个图标组件,用于展示 Material Design Lite 图标。

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

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

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

3. Snackbar

Snackbar 是一个消息提示组件,用于展示一些消息,例如:操作成功、网络错误等。

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

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

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

结语

本文介绍了 @jguffey/react-mdl-extra 的使用教程,包括安装、导入以及使用方法。希望本文对读者有所帮助,并能够更好的开发 React-MDL 组件。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600557d881e8991b448d4e42


猜你喜欢

  • npm包 method-wrap 的使用教程

    在前端的开发过程中,我们经常需要对已有的函数进行一些特殊处理,例如打印函数调用的耗时,或者记录函数的输入输出参数等等。这时候,一个强大的npm包 method-wrap 就能够很好的帮助我们实现这些功...

    2 年前
  • npm 包 sm-formstate 使用教程

    简介 在前端开发中,表单是一个必备的元素。表单数据的校验和处理是表单开发中一个很重要的部分。sm-formstate 是一个优秀的表单数据处理库,它能帮助我们快速开发出简单、高效的表单组件。

    2 年前
  • npm 包 bisheng-peer-react 使用教程

    npm 包 bisheng-peer-react 使用教程 简介 bisheng-peer-react 是一个基于 React 和 Bisheng 框架的扩展包,提供了一种方便的方式来构建静态文档站点...

    2 年前
  • NPM 包 Confit-Merger 使用教程

    什么是 Confif-Merger? Confit-Merger 是一个用于合并和处理配置文件的 npm 包。他可以将多个配置文件合并,有效避免开发过程中配置文件被覆盖、冲突和未定义的问题。

    2 年前
  • npm 包 styld 使用教程

    简介 在前端开发中,我们常常需要对页面元素进行样式的调整。styld 是一个强大且易于使用的 npm 包,可以帮助我们在 CSS 等样式文件中编写更加简洁的代码。styld 提供了一些常用的样式类和工...

    2 年前
  • npm 包 eslint-config-enpit-jet 使用教程

    简介 随着前端技术不断发展,开发过程中需要处理的代码量也不断增加。为了降低代码质量的风险,提高项目的可维护性,我们需要使用一些工具来保证代码规范和质量。其中一个工具就是 eslint。

    2 年前
  • npm 包 gulp-rev-4replace 使用教程

    什么是 gulp-rev-4replace gulp-rev-4replace 是一款基于 gulp 的插件,它可以将静态资源文件名(如 JavaScript、CSS、图片等)进行 hash 值处理,...

    2 年前
  • npm 包 redux-rxjs 使用教程

    在前端开发中,Redux 作为一种前端架构的解决方案已经被广泛采用。而 rxjs 的出现,为前端开发人员带来了一种流式编程的思想,能够更好地描述异步数据流。在这样的背景下,Redux-rxjs 库应运...

    2 年前
  • npm 包 @alex-wilmer/lolliplot 使用教程

    什么是 @alex-wilmer/lolliplot @alex-wilmer/lolliplot 是一个基于 D3.js 的可视化库,用于绘制棒棒糖图表。棒棒糖图表是一种特殊的饼图,可以用来展示多个...

    2 年前
  • npm 包 dog-breed-names 使用教程

    当我们为我们的项目编写 API 文档或写一篇宠物店的博客时,有时我们需要使用真实的犬种名称来使我们的内容更加贴近现实且更容易被理解。因此,npm 提供了一个名为 dog-breed-names 的包,...

    2 年前
  • npm包lecheng-login使用教程

    简介 lecheng-login是一款前端的npm包,用于实现基于乐橙平台的登录功能。该包通过调用乐橙平台提供的API接口实现用户登录及相关验证功能,适用于需要接入乐橙平台的前端项目。

    2 年前
  • npm 包 medium-editor-insert-plugin-fork 使用教程

    medium-editor-insert-plugin-fork 是一款基于 MediumEditor 插件的 npm 包,它可帮助你在你的前端项目中快速构建出类似 Medium 网站的富文本编辑器。

    2 年前
  • npm 包 jumpstartjs 使用教程

    简介 Jumpstartjs 是一个基于 Webpack 和 Babel 的前端开发框架,它提供了一系列工具和组件,帮助开发者快速搭建 Web 应用。 通过 jumpstartjs,你可以使用最新的 ...

    2 年前
  • npm 包 ssml-validator 使用教程

    前言 SSML(Speech Synthesis Markup Language)是一种用于语音合成的标记语言。在开发语音应用程序时,确保生成的 SSML 符合规范非常重要,因为不合规范的 SSML ...

    2 年前
  • npm 包 zh-aulink 使用教程

    在前端开发中,经常需要进行国际化处理,其中跨语种的链接处理是一个很有用的功能。而 npm 包 zh-aulink 则是一个可以方便实现这个功能的工具。本文将详细介绍这一 npm 包的使用教程。

    2 年前
  • npm包 homebridge-tesla-remote 使用教程

    在家中使用智能技术可以方便我们的生活,而使用npm包 homebridge-tesla-remote则可以将你的 Tesla 车辆变为一个智能设备,控制你的车辆,可以远程关闭或打开空调,车窗等。

    2 年前
  • npm 包 ava-jsverify 使用教程

    简介 ava-jsverify 是一个结合了 ava 和 jsverify 的 npm 包,用于测试 JavaScript 代码的正确性和性能。在前端开发中,测试代码是一个非常重要的环节,能够帮助我们...

    2 年前
  • npm 包 express-scripts 使用教程

    简介 express-scripts 是一个基于 Express 框架的命令行工具,可以快速创建、运行和调试 Express 项目,可用于快速原型和构建 Web 应用程序和 API。

    2 年前
  • npm 包 kendo-ui-react-fixed-events-jquery-listview 使用教程

    简介 kendo-ui-react-fixed-events-jquery-listview 是一个 npm 包,它提供了一个能够固定表头和列的 React 列表组件,基于 Kendo UI for ...

    2 年前
  • npm包grunt-loc-json使用教程

    什么是 grunt-loc-json grunt-loc-json是一个npm包,用于读取代码库中的所有源文件并为它们生成一个本地化JSON文件。该包可以将代码库中的字符串本地化,使之可以进行翻译。

    2 年前

相关推荐

    暂无文章