Stencil-bs-ui-lib 是基于 Stencil.js 开发的一套 UI 组件库，采用了 Bootstrap 4 的样式，并具有一定的可定制化。在前端开发中，使用 Stencil-bs-ui-lib 可以大大提高开发效率和代码质量。
安装
使用 npm 安装 Stencil-bs-ui-lib：
npm install stencil-bs-ui-lib --save
使用
在需要使用组件的文件中，先引入样式文件：
import 'stencil-bs-ui-lib/dist/stencil-bs-ui-lib.css';
然后，引入需要使用的组件并在页面中使用：
<bs-button type="primary">按钮</bs-button>
组件列表
Stencil-bs-ui-lib 完全继承了 Bootstrap 4 的组件体系，目前支持的组件有：
- Button
- Dropdown
- Modal
- Tooltip
- Popover
- Alert
- Badge
- Breadcrumb
- Card
- Carousel
- Collapse
- FormControl
- InputGroup
- Jumbotron
- ListGroup
- Nav
- Navbar
- Pagination
- Progress
- Table
Button
Button 是一个基础组件，用于创建各种样式的按钮，包括 primary、secondary、success、info、warning、danger 和 light 等。
<bs-button type="primary">按钮</bs-button>
Dropdown
Dropdown 用于创建下拉菜单，可以包含文本、链接和按钮等。
<bs-dropdown> <a class="dropdown-item" href="#">链接 1</a> <a class="dropdown-item" href="#">链接 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">链接 3</a> </bs-dropdown>
Modal
Modal 用于创建模态框，可以包含标题、内容和底部按钮等。
<bs-modal>
<h5 slot="title">模态框标题</h5>
<div slot="content">模态框内容</div>
<div slot="footer">
<bs-button type="secondary">取消</bs-button>
<bs-button type="primary">确定</bs-button>
</div>
</bs-modal>Tooltip
Tooltip 用于创建提示框，可以在鼠标悬停时显示。
<bs-tooltip text="提示内容"> <a href="#">鼠标悬停显示提示</a> </bs-tooltip>
Popover
Popover 用于创建气泡框，可以在鼠标悬停时显示。
<bs-popover title="气泡框标题" content="气泡框内容"> <a href="#">鼠标悬停显示气泡框</a> </bs-popover>
Alert
Alert 用于创建警告框，可以包含不同颜色的样式，包括 primary、secondary、success、info、warning、danger 和 light 等。
<bs-alert type="success">警告框内容</bs-alert>
Badge
Badge 用于创建徽章，可以包含不同颜色的样式，包括 primary、secondary、success、info、warning、danger 和 light 等。
<bs-badge type="danger">徽章内容</bs-badge>
Breadcrumb
Breadcrumb 用于创建面包屑导航，可以包含多个链接。
<bs-breadcrumb> <a href="#">链接 1</a> <a href="#">链接 2</a> <a href="#">链接 3</a> </bs-breadcrumb>
Card
Card 用于创建卡片，可以包含标题、内容和底部按钮等。
<bs-card>
<h5 slot="header">卡片标题</h5>
<div slot="body">卡片内容</div>
<div slot="footer">
<bs-button type="secondary">取消</bs-button>
<bs-button type="primary">确定</bs-button>
</div>
</bs-card>Carousel
Carousel 用于创建轮播图，支持自动播放和前、后按钮切换。
-- -------------------- ---- -------
-------------
------------------
---- ----------------- ------- ---
-------------------
------------------
---- ----------------- ------- ---
-------------------
------------------
---- ----------------- ------- ---
-------------------
--------------Collapse
Collapse 用于创建折叠面板，可以包含多个折叠面板项。
-- -------------------- ---- -------
-------------
----------------- ------------ ---
------
-------------------
----------------- ------------ ---
------
-------------------
----------------- ------------ ---
------
-------------------
--------------FormControl
FormControl 用于创建表单控件容器，包括输入框、下拉框等。
<bs-form-control label="输入框"> <bs-input placeholder="请输入文本"></bs-input> </bs-form-control>
InputGroup
InputGroup 用于创建输入框组合容器，包括前缀、后缀和输入框等。
<bs-input-group> <div slot="addon">前缀</div> <bs-input></bs-input> <div slot="addon">后缀</div> </bs-input-group>
Jumbotron
Jumbotron 用于创建大屏幕容器，并包含描述性文本。
<bs-jumbotron> <h1>大屏幕标题</h1> <p>大屏幕描述性文本</p> </bs-jumbotron>
ListGroup
ListGroup 用于创建列表容器，可以包含多个列表项。
<bs-list-group> <bs-list-group-item>列表项 1</bs-list-group-item> <bs-list-group-item>列表项 2</bs-list-group-item> <bs-list-group-item>列表项 3</bs-list-group-item> </bs-list-group>
Nav
Nav 用于创建导航菜单，可以包含多个链接项和下拉菜单项。
-- -------------------- ---- -------
--------
-- --------------- ------- ----------- -----
-- ---------------- ----------- -----
-------------
-- --------------- ---------------- -----------------
---- ----------------------
-- --------------------- ------------- -----
-- --------------------- ------------- -----
------
--------------
---------Navbar
Navbar 用于创建导航栏，可以包含多个链接项和下拉菜单项。
-- -------------------- ---- -------
-----------
-- -------------------- -----------------
--- -------------------
--- -----------------
-- --------------- ------- ----------- -----
-----
--- -----------------
-- ---------------- ----------- -----
-----
--- --------------- ----------
-- --------------- ---------------- -------- -------------------------------
---- ----------------------
-- --------------------- ------------- -----
-- --------------------- ------------- -----
------
-----
-----
------------Pagination
Pagination 用于创建分页导航，可以包含多个页码。
<bs-pagination> <span slot="prev"><<</span> <a class="page-link" href="#">1</a> <a class="page-link" href="#">2</a> <a class="page-link" href="#">3</a> <span slot="next">>></span> </bs-pagination>
Progress
Progress 用于创建进度条。
<bs-progress value="50"></bs-progress>
Table
Table 用于创建表格，可以包含多个列和行。
-- -------------------- ---- -------
----------
-------
----
----- ------
----- ------
----- ------
-----
--------
-------
----
----- - - ------
----- - - ------
----- - - ------
-----
----
----- - - ------
----- - - ------
----- - - ------
-----
--------
-----------总结
Stencil-bs-ui-lib 是一套高效、强大的 UI 组件库，可以大大提高前端开发效率和代码质量。在使用 Stencil-bs-ui-lib 时，我们需要详细了解每个组件的使用方法和属性，以及如何将其与自己的代码结合使用。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108711