前言
在 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 安装。打开终端或命令行工具，输入以下命令：
npm install @pluscubed/preact-material-components
安装完成后，可以通过以下方式进行使用：
引入样式
在 HTML 文件中，需要引入 Material Design 的样式。可以使用以下方式：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/@pluscubed/preact-material-components@12.4.0/dist/preact-material-components.min.css">
当然，也可以将样式文件下载到本地，并使用以下方式进行引入：
<link rel="stylesheet" href="path/to/preact-material-components.min.css">
引入组件
在 JavaScript 文件中，需要引入需要使用的组件。可以分别引入需要使用的组件，也可以全局引入：
import { Button } from '@pluscubed/preact-material-components';或者
import mdc from '@pluscubed/preact-material-components';
使用组件
在 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