介绍
showy 是一个基于原生 JavaScript 的前端组件库，它提供了丰富的 UI 组件和工具，可以让开发者快速构建漂亮的网站或应用程序。
showy 库已经发布到 npm 上，可以通过 npm 安装并使用。
安装
使用 npm 安装 showy：
npm install showy --save
使用
使用 showy 只需要在你的 HTML 文件中引入相关的 CSS 和 JavaScript 文件即可。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------------
----- ---------------- -------------------------------------------------
-------
------
------- -------------------------------------------------------
-------
-------组件
showy 提供了很多有用的组件，可以让你的网站看起来更加漂亮。
Alert
显示一段提示信息，有四种颜色：primary、success、info、warning、danger。
-- -------------------- ---- ------- ---- ------------ --------------- ---------------- ------- -- - ------- ----------- -- -------- ------ ---- ------------ --------------- ---------------- ------- -- - ------- ----------- -- -------- ------ ---- ------------ ------------ ------------- ------- -- - ---- ----------- -- -------- ------ ---- ------------ --------------- ---------------- ------- -- - ------- ----------- -- -------- ------ ---- ------------ -------------- --------------- ------- -- - ------ ----------- -- -------- ------
Badge
用于展示一个标签，可以有四种颜色：primary、success、info、warning、danger。
<span class="badge badge-primary">Primary</span> <span class="badge badge-success">Success</span> <span class="badge badge-info">Info</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-danger">Danger</span>
Button
显示一个按钮，可以有四种样式：primary、success、info、warning、danger。
<button class="btn btn-primary">Primary</button> <button class="btn btn-success">Success</button> <button class="btn btn-info">Info</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button>
Card
显示一个卡片。
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Carousel
显示一个轮播图，可以包含多个图片和文本。
-- -------------------- ---- -------
---- ------------------------------ --------------- ------ ---------------------
--- ----------------------------
--- ---------------------------------------- ----------------- --------------------
--- ---------------------------------------- -----------------------
--- ---------------------------------------- -----------------------
-----
---- -----------------------
---- -------------------- --------
---- ------------------------------------------------------- ------ -------------- ------ ----------
---- ----------------------- ------ ------------
--------- ----- ----------
-------- ----- ---- ------- - -------- ----- ------ -------------
------
------
---- ----------------------
---- -------------------------------------------------------- ------ -------------- ------ ----------
---- ----------------------- ------ ------------
---------- ----- ----------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
------
---- ----------------------
---- ------------------------------------------------------- ------ -------------- ------ ----------
---- ----------------------- ------ ------------
--------- ----- ----------
----------- ------- ------ ------ --- ----------- ---- ----------------
------
------
------
-- ----------------------------- --------------------------------- ------------- ------------------
----- ---------------------------------- --------------------------
----- -------------------------------
----
-- ----------------------------- --------------------------------- ------------- ------------------
----- ---------------------------------- --------------------------
----- ---------------------------
----
------工具
showy 还提供了一些有用的工具，可以让你的网站变得更加强大。
Carousel
实现轮播图的 JavaScript 工具。
const myCarousel = new Carousel('#carouselExampleIndicators', {
interval: 2000,
pause: 'hover',
wrap: true,
keyboard: true
});
myCarousel.update();Modal
实现模态框的 JavaScript 工具。
-- -------------------- ---- -------
---- ------- ---
------- ------------- ---------- ------------ ------------------- -----------------------
------ ---- -----
---------
---- --- ---
---- ------------- ------------ ------------- --------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
-------- ---- ---- ---- ---------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- ----------------- ----------------
------
------
------
------总结
showy 是一个优秀的前端组件库，在实际开发中使用它可以提升开发效率和开发效果。本文介绍了如何安装和使用 showy，以及展示了一些有用的组件和工具，希望可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76077