npm 包 material-design-web 使用教程

介绍

在前端开发中，使用好的 UI 库是非常关键的。而 Google 推出的 Material Design 就是非常优秀的一个 UI 设计规范，让用户可以创造美好的体验，而 material-design-web 就是一个基于这个规范的 UI 库，提供了多种 UI 组件以及样式。

在本篇文章中，我们将教大家如何使用 npm 包 material-design-web，以及如何在项目中使用这个 UI 库。

安装 material-design-web

使用 npm 包管理器，可以轻松地安装 material-design-web 包。

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

安装完成后，你可以在项目的 node_modules 目录下看到 material-design-web 的代码。

使用 material-design-web

引入 CSS 文件

在使用 material-design-web 之前，需要先引入它的 CSS 文件。在 HTML 文件中添加以下代码：

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

引入 JavaScript 文件

在 HTML 文件底部添加 JavaScript 文件：

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

使用组件

material-design-web 提供了多种 UI 组件，如按钮、表格、卡片等等。我们可以使用这些组件来构建我们的界面。

按钮组件

material-design-web 的按钮组件非常实用，它提供了多种样式，而且非常易于使用。我们可以在 HTML 中添加以下按钮：

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

其中 mdc-button 为默认样式，mdc-button--raised 为凸起样式，mdc-button--outlined 为轮廓样式，mdc-button--unelevated 为平面样式。

表格组件

material-design-web 的表格组件非常灵活，可以方便地自定义表格样式、添加数据等等。我们可以在 HTML 中添加以下表格：

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

卡片组件

material-design-web 的卡片组件非常适合用来展示一些简单的信息，比如博客列表、产品介绍等等。我们可以在 HTML 中添加以下卡片：

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

总结

通过本篇文章的学习，我们了解了如何安装、引入和使用 npm 包 material-design-web，以及如何使用它来构建 UI 界面。在实际项目中，我们可以通过使用 material-design-web，来让我们的界面更加美观和易于使用，提升用户体验。

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

阅读全文

猜你喜欢

  • npm 包 gitlab-workflow-demo 使用教程

    前言 在现代化的 Web 开发工作流中，Gitlab 是一个非常流行的 Git 代码仓库管理工具。而 npm 包则以其包管理和版本控制功能与开发人员相互信任的特点在前端开发中广泛应用。

    3 年前
  • npm 包 tracxpointcordovaplugin 使用教程

    前言 在前端开发过程中，我们经常会用到各种 npm 包，这些 npm 包为我们提供了很多便利。本文将详细介绍一个名为 tracxpointcordovaplugin 的 npm 包，希望能够对前端开发...

    3 年前
  • npm 包 geodetic-haversine-distance 使用教程

    在前端开发过程中，我们经常需要计算两个地理坐标之间的距离。npm 上有很多计算地理距离的包，geodetic-haversine-distance 是其中一个。在本篇文章中，我们会介绍 geodeti...

    3 年前
  • npm 包 ngx-inline-editor-semantic-ui 使用教程

    介绍 在前端开发中，有时候需要让用户直接编辑页面上的文本内容。ngx-inline-editor-semantic-ui 是一个基于 Angular 的 npm 包，它提供了一个语义化的边框和可编辑区...

    3 年前
  • npm 包 add-assets-webpack-plugin 使用教程

    在前端开发中，Webpack 是一个非常常用且强大的资源打包工具。它可以将多个不同类型的文件打包成一个或多个输出文件，帮助我们更方便地将项目的需要的资源进行优化、压缩和处理，提高网站的性能和用户体验。

    3 年前
  • npm 包 od-vsdebug 使用教程

    在前端开发中，调试是一个非常重要的环节。随着前端技术的不断发展，调试工具也在不断更新和改进。其中，od-vsdebug 是一个非常实用的 npm 包，它可以帮助我们更加方便、快捷地进行调试工作。

    3 年前
  • npm 包 message_client_on_socketio 使用教程

    介绍 message_client_on_socketio 是一个轻量级的 Socket.IO 客户端，用于在前端页面中实现实时消息通信。它能够在客户端与服务端之间建立 Socket 连接，发送和接收...

    3 年前
  • npm 包 microtip 使用教程

    前端开发中，我们经常需要使用一些提示框、气泡等小功能来提升用户体验。而 microtip 就是一款非常方便实用的 npm 包，可以轻松实现这些小功能的添加。本文将介绍 microtip 的使用教程，并...

    3 年前
  • npm 包 slush-polyapp-builder 使用教程

    简介 Slush-polyapp-builder 是一个基于 Slush 和 Polymer CLI 的前端项目生成器。它可以帮助你快速构建一个基于 Polymer 的 Web 应用程序，不需要手动管...

    3 年前
  • npm 包 react-ya-forms 使用教程

    React-ya-forms 是一个用于构建 React 表单的 npm 包。它提供了一些易于使用和灵活的 API，可以帮助开发人员快速构建出符合设计规范的表单。本篇文章将介绍该 npm 包的使用方法...

    3 年前
  • npm 包 aws-s3-lambda-helper 使用教程

    随着云计算技术的发展，越来越多的应用程序开始运行在云端。AWS S3 和 Lambda 是 AWS 云计算服务中非常常用的两个服务，他们在很多应用场景都有非常高的实用价值。

    3 年前
  • 使用npm包ts-explorer的详细教程

    ts-explorer是一个用于在TypeScript项目中获取类型信息的小工具。它可以让开发人员更好地了解代码的结构和类型，并在开发过程中提供更好的提示和补全。在本文中，我们将深入介绍如何使用ts-...

    3 年前
  • npm 包 gulpnode 使用教程

    gulpnode 是一个前端打包工具，通过一系列的插件，可以自动化处理前端代码，如编译、压缩、合并等操作。本文将为大家介绍如何使用 gulpnode。 安装 gulpnode 安装 gulpnode ...

    3 年前
  • npm 包 react-ya-essential-components 使用教程

    前言 React 作为前端组件化的主流框架，有井喷式的生态系统。比如我们经常用到的 Ant Design，Material UI 等，它们提供了很多好用的组件，能够很好的帮助我们完成项目。

    3 年前
  • npm 包 sphere-viewer 使用教程

    前言 如今，Web 开发越来越重视用户交互体验，3D、VR 对于用户来说并不陌生。在我们的日常开发中，需要在网页上展示 3D 模型或者全景效果的需求也越来越多。 这时，一个好用的 npm 包就非常必要...

    3 年前
  • npm 包 zara 使用教程

    在现今的前端开发中，越来越多的开发者选择使用 npm 包来解决问题。其中，zara 是一款十分有用且易用的 npm 包，它不仅可以帮助我们更加方便地处理日期时间，同时也支持多语言和时区等高级功能。

    3 年前
  • npm 包 cmaki 使用教程

    简介 cmaki 是一个基于 Node.js 开发的 npm 包，旨在提供一个易于使用的自动化构建工具，可以帮助前端工程师更快地创建项目。该工具对 Node.js 的本地包管理器 npm 进行封装，提...

    3 年前
  • npm 包 culturebot 使用教程

    在前端开发中，我们常常需要使用一些工具或者库来提高我们的开发效率或者增加我们的功能。其中，npm 包是非常常见的一种工具，而 CultureBot 就是一个比较实用的 npm 包，它可以帮助我们快速地...

    3 年前
  • npm 包 fallback-avatar 使用教程

    在前端开发的过程中，我们时常需要使用头像来展示用户信息。然而，有些用户可能没有上传过头像，这时候就需要使用默认头像来代替。为了解决这个问题，我们可以使用 npm 包中的 fallback-avatar...

    3 年前
  • npm 包 meta-reader 使用教程

    介绍 在前端开发中，我们常常需要获取页面的 meta 信息，例如 title、description 等。npm 包 meta-reader 可以帮助我们轻松地获取这些信息。

    3 年前

相关推荐

    暂无文章