npm 包 @pluscubed/preact-material-components 使用教程

前言

在 Web 前端开发中，UI 框架是不可或缺的一部分。@material-ui/core 是一个非常知名的 UI 框架，提供了很多 Material Design 的组件和风格。但是它采用了 React.js 进行开发，而且有一定的学习曲线。如果想使用它提供的 Material Design 风格，但是又不想学习 React.js，那么 @pluscubed/preact-material-components 就显得非常方便了。

@pluscubed/preact-material-components 是一个 Material Design 风格的 UI 框架，使用 Preact.js 进行开发，提供了很多常用的组件。

前置知识

在使用 @pluscubed/preact-material-components 前，需要了解以下知识：

安装和使用

在使用 @pluscubed/preact-material-components 前，需要通过 npm 安装。打开终端或命令行工具，输入以下命令：

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

安装完成后，可以通过以下方式进行使用：

引入样式

在 HTML 文件中，需要引入 Material Design 的样式。可以使用以下方式：

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

当然，也可以将样式文件下载到本地，并使用以下方式进行引入：

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

引入组件

在 JavaScript 文件中，需要引入需要使用的组件。可以分别引入需要使用的组件，也可以全局引入：

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

或者

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

使用组件

在 Preact.js 的组件中，可以按照 @pluscubed/preact-material-components 提供的 API 使用组件。例如，使用 Button 组件：

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

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

以上代码将渲染一个带有阴影效果的按钮，当点击按钮时，会在控制台输出 'clicked'。

示例代码

以下代码展示了 @pluscubed/preact-material-components 的基本使用方法，包含了使用 Button、Card、Drawer、Icon 的例子：

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

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

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

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

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

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

总结

@pluscubed/preact-material-components 是一个非常方便的 Material Design 风格的 UI 框架，使用 Preact.js 进行开发。在使用前，需要了解基本的 HTML、CSS、JavaScript 和 Preact.js 知识。使用方式非常简单，可以通过 npm 安装并引入所需的组件，按照提供的 API 进行使用。

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

阅读全文

猜你喜欢

  • npm 包 words-without-translation 使用教程

    简介 npm 包 words-without-translation 是一款能够在页面中识别出没有翻译的单词的 Javascript 库，它能够帮助翻译人员迅速找出需要翻译的单词，并提高翻译效率。

    2 年前
  • npm 包 bh-mj-detail 使用教程

    介绍 在前端开发中，我们经常会使用到各种 npm 包来扩展我们的项目功能。其中，bh-mj-detail 是一款非常实用的 npm 包，可以方便地将数据按照不同属性进行分类，展示出来。

    2 年前
  • NPM包——graphnode使用教程

    什么是graphnode graphnode是一个用于建立和管理有向无环图形的JavaScript库。它提供了一组简单易用的API，用于创建图形、添加节点、建立边缘并遍历图形。

    2 年前
  • npm 包 generator-aspnetcore-app 使用教程

    前言 在前端开发过程中，使用 npm 包已经是必不可少的。npm 包可以大大提高我们的开发效率，让我们更专注于业务逻辑的实现而不是底层细节的处理。其中，generator-aspnetcore-app...

    2 年前
  • npm 包 objo 使用教程

    前言 在前端开发中，为了提高开发效率，我们常常使用各种第三方库和工具。其中，npm 是前端开发中必不可少的一个工具，因为它可以方便地帮助我们管理项目的依赖关系。 npm 中有很多优秀的包，它们可以帮助...

    2 年前
  • npm 包 numo 使用教程

    在前端开发中，我们经常需要进行一些数学运算和数据处理。而这时，numo 这个 npm 包就可以派上用场。numo 是一款基于 JavaScript 的高性能科学计算和数据操作包。

    2 年前
  • NPM 包 React-form-phi 使用教程

    React-form-phi 是一个非常实用的 React 表单组件库，它可以帮助开发者在开发 Web 应用时快速构建出漂亮、易用的表单，大大提升开发效率。本文将为您详细介绍如何使用这个强大的组件库。

    2 年前
  • npm 包 simple-rabbitmq-to-firehose 使用教程

    RabbitMQ 是一个用于消息队列的开源软件，通常用于构建基于微服务架构的应用。而 Amazon Firehose 是一个 Amazon Web Services（AWS）提供的实时数据传输服务，用...

    2 年前
  • npm 包 react-native-baidu-push 使用教程

    Baidu Push 是一款由百度云提供的推送服务，可以帮助开发者方便快捷地完成消息推送。而 react-native-baidu-push 就是一个基于 Baidu Push 封装的 React N...

    2 年前
  • npm 包 binte 使用教程

    简介 binte 是一款能够快速生成静态时间轴和归档页面的 npm 包。它基于 node.js 平台开发，使用简单且功能强大，是极大提高前端开发效率的工具之一。 安装 使用 npm 包管理器进行安装：...

    2 年前
  • npm 包 node-priority-queue 使用教程

    简介 在前端开发中，我们经常需要对一堆数据结构进行排序并处理，这时候， node-priority-queue 能够提供优先级队列等数据结构的实现，帮助我们更高效地完成开发任务。

    2 年前
  • npm 包 brati 使用教程

    前言 随着前端技术的不断发展，开发过程中需要用到的第三方库也越来越多。而 npm 作为目前最大的包管理工具，也成为了前端开发者不可或缺的工具之一。今天，我们要介绍的是一款 npm 包——brati。

    2 年前
  • 使用 useless-things npm 包的详细教程

    什么是 useless-things？ 翻译成中文，useless-things 意思就是“没用的东西”，那么这个 npm 包又是干什么用的呢？其实，这是一款提供一大堆有趣但没有实际应用场景的前端组件...

    2 年前
  • npm 包 @grial/server 使用教程

    引言 在现代 Web 应用中，前端项目已经不再是简单的 HTML、CSS、JavaScript 文件，而是包含了大量依赖、组件、库等等。这些复杂的前端项目需要使用工具来进行统一管理和构建。

    2 年前
  • npm包 burningman-api的使用教程

    在前端开发中，使用现成的npm包往往能够提高我们的工作效率。在本文中，我将向大家介绍一款npm包——burningman-api的使用教程。这个包提供了许多有用的函数，可以帮助我们处理 Burning...

    2 年前
  • npm 包 concisecss 使用教程

    简介 concisecss 是一个轻量级的 CSS 框架，其中包含许多有用的类和工具，可以帮助开发人员快速开发美观的前端页面。它基于许多现代 CSS 功能（例如 Flexbox 和 Grid）以及最新...

    2 年前
  • npm 包 aurelia-clipboard 使用教程

    npm 包 aurelia-clipboard 使用教程 aurelia-clipboard 是一款让拷贝文本内容更加简单的 Aueulia 插件。它可以让你只需点击一个按钮就能把文本复制到剪贴板中，...

    2 年前
  • npm 包 webshot-stream 使用教程

    作为一个前端工程师，我们经常涉及到截屏和生成二维码的需求，在这种情况下我们可以通过使用 webshot-stream 这个 npm 包来轻松地实现。在本文中，我们将详细介绍如何使用这个 npm 包，并...

    2 年前
  • npm 包 rippleapi 使用教程

    在前端开发中，处理区块链和数字货币常常需要使用到 Ripple 网络。为了方便使用 Ripple 提供了两种 API：REST 和 WebSocket。但是，使用这些 API 来构建应用程序会比较困难...

    2 年前
  • npm 包 emmet-abbreviation-helper 使用教程

    前言 在前端开发中，经常需要编写 HTML 和 CSS 代码。而编写 HTML 和 CSS 代码时，使用 Emmet 缩写可以大大提高编写代码的效率。但是，有时候我们会遇到一些不熟悉的缩写，这时候使用...

    2 年前

相关推荐

    暂无文章