npm 包 tbg-foundation-docs 使用教程

在前端开发中，UI 框架是非常重要的工具之一。tbg-foundation-docs 是一个基于 Foundation for Sites 搭建的 UI 框架，为前端开发提供了更加便捷的 UI 组件。

安装

tbg-foundation-docs 是一个 npm 包，可以在终端使用以下命令安装：

npm install tbg-foundation-docs --save

使用

安装完成后，在 CSS 文件中引入 tbg-foundation-docs 的样式文件：

<link rel="stylesheet" href="node_modules/tbg-foundation-docs/dist/css/tbg-foundation-docs.min.css">

在 JavaScript 文件中，则需要引入 Foundation for Sites 和 tbg-foundation-docs 的 JavaScript 文件：

<script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
<script src="node_modules/tbg-foundation-docs/dist/js/tbg-foundation-docs.min.js"></script>

然后，在 DOM 加载完毕后，需要初始化 Foundation for Sites 和 tbg-foundation-docs：

<script>
  $(document).foundation();
  $(document).tbgFoundationDocs();
</script>

这样，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）的示例代码：

<div class="progress" data-progress>
  <div class="progress-meter" style="width: 25%"></div>
</div>

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c4081e8991b448d9d98