介绍
preact-material-components 是一个基于 Preact 和 Material Design 的 UI 库。它提供了一系列简洁清晰、易于使用的 UI 组件,适用于构建 Web 应用和移动端应用的前端开发任务,支持自定义主题和颜色,同时兼容绝大多数现代浏览器。
安装
你可以通过 npm 命令行安装 preact-material-components:
- --- ------- --------------------------
使用
引用样式文件
preact-material-components 的样式文件 使用 Stylus 语言编写,必须首先引用样式文件:
------ ---------------------------------------
引用组件
------ - ------- ---- - ---- -----------------------------
自定义主题
你可以使用自己的主题来扩展组件样式。 你需要定义一个包含颜色和其他变量的对象。
------ - - - ---- --------- ------ - ------ - ---- ----------------------------- ------ ----- ---- -------------- ----- ------- - - -------- ---------- ---------- ---------- ------ ---------- -- ----- --- - -- -- - ----- ------- --------------- ------------------------- ----- --- --------- ------ --
使用示例:
------ - - - ---- --------- ------ - ------- ---- - ---- ----------------------------- ------ --------------------------------------- ------ ----- ---- -------------- ----- ------- - - -------- ---------- ---------- ---------- ------ ---------- -- ----- --- - -- -- - ----- ------- --------------- ------------------------- ----- --- --------- ----- ------- ----------- -------- ---------------- --------------------------------------------------------------------------------- -- -- ----------- ---------------------------------- ----------------- ----------------------- ----------- ----- ----- ----- --- ----- ----------- ---------- ----- ---------- -- ------ ---- ------ --------- --------- --- --- ------- ------- --- ----------- ------- ------------ ------------ ------- ------ -- ------ ------- ----
组件列表
preact-material-components 提供了以下组件:
- AutoComplete
- Avatar
- Button
- Card
- Checkbox
- CircularProgress
- DataTable
- Dialog
- Drawer
- Elevation
- FAB
- FormField
- GridList
- Icon
- IconButton
- LayoutGrid
- LinearProgress
- List
- Menu
- Radio
- Ripple
- Select
- Snackbar
- Switch
- Tab
- TextField
- Toolbar
- Tooltip
总结
preact-material-components 是一个非常好用的 UI 库,可以方便地创建具有 Material Design 风格的 UI 界面。如果你正在开发 Web 应用或移动端应用,强烈建议你试用一下。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/preact-material-components