介绍
hpe-css-grommet 是一个基于 Grommet 框架,针对 Hewlett-Packard Enterprise(HPE)设计的一套样式库,通过 NPM 包进行了封装。使用 hpe-css-grommet 可以快速构建符合 HPE 设计风格的前端应用。
安装
可以通过 npm 命令安装 hpe-css-grommet 包:
--- ------- ---------------
使用
- 引入 hpe-css-grommet 的样式文件:
----- ---------------- -----------------------------------------------------------------
- 在 HTML 中使用 Grommet 组件:
------ ------ ----- ---------------- ----------------------------------------------------------------- ------- ------ ---- --- ------- ------- --- ------- -------------------------------------------------------- -------- ----- - -------- ---- ------ - - -------- ----- --- - -- -- - --------- ---- ------------ --------------------- ------- ------------ --- ----------- -- ----------------- -- ------ ---------- -- -------------------- --- --------------------------------- --------- ------- -------
这里的样式已经可以使用 HPE 风格的按钮、文本框和弹出框。
示例代码
--------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ---------- ----- ---------------- ----------------------------------------------------------------- ----- ---------------- ------------------------------------------------ ------- ------ ---- ---------------- ------- -------------------------------------------------------------- ------- ---------------------------------------------------------------------- ------- -------------------------------------------------------- -------- ----- - -------- ---- ------- -------- --------- - - -------- ----- --- - -- -- - --------- ---- ------------ --------------------- -------- ------------- ------------------------ ---- --------- --------- -------- --- ---------- ---------------------------------- ------ ------- ------- --------- -------- -------- -- ---------- -- ------- ---------- -- ------ ---------- -- -------------------- --- --------------------------------- --------- ------- -------
结束语
hpe-css-grommet 是一个非常方便的样式库,我们可以用它快速构建出符合 HPE 设计风格的前端应用。同时,它也是学习 React、Grommet 的好素材。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60065f72238a385564ab67d6