在前端开发中,UI 框架是非常重要的工具之一。tbg-foundation-docs 是一个基于 Foundation for Sites 搭建的 UI 框架,为前端开发提供了更加便捷的 UI 组件。
安装
tbg-foundation-docs 是一个 npm 包,可以在终端使用以下命令安装:
--- ------- ------------------- ------
使用
安装完成后,在 CSS 文件中引入 tbg-foundation-docs 的样式文件:
----- ---------------- -----------------------------------------------------------------------------
在 JavaScript 文件中,则需要引入 Foundation for Sites 和 tbg-foundation-docs 的 JavaScript 文件:
------- ----------------------------------------------------------------------- ------- -----------------------------------------------------------------------------------
然后,在 DOM 加载完毕后,需要初始化 Foundation for Sites 和 tbg-foundation-docs:
-------- ------------------------- -------------------------------- ---------
这样,tbg-foundation-docs 的 UI 组件就可以使用了。
组件列表
tbg-foundation-docs 提供了以下 UI 组件:
- 子导航(Sub Nav)
- 徽章(Badge)
- 按钮(Button)
- 卡片(Card)
- 分页器(Pagination)
- 进度条(Progress)
- 标签(Tag)
- 标题(Title)
- 贴纸(Sticker)
- 切换(Switch)
- 标签页(Tab)
示例代码
以下是一个使用 tbg-foundation-docs 的进度条(Progress Bar)的示例代码:
---- ---------------- -------------- ---- ---------------------- ------------- ----------- ------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055c4081e8991b448d9d98