npm 包 @savvy-css/garnishes 使用教程

阅读时长 5 分钟读完

在前端开发中,我们经常会用到样式框架(CSS framework)来帮助我们快速构建页面。而 @savvy-css/garnishes 就是一款非常优秀的 CSS 框架,它提供了许多实用的 UI 组件(garnish)和常用的样式类(class)。

在本文中,我们将详细介绍如何使用 @savvy-css/garnishes,包括安装、引入、使用方法和示例代码等内容。

安装

@saavy-css/garnishes 是一个 npm 包,所以在开始使用它之前,我们首先需要安装它。在项目的根目录下运行如下命令:

这样,@savvy-css/garnishes 就会被安装到我们的项目中。

引入

在使用 @savvy-css/garnishes 中的组件或样式类之前,我们需要先将它们引入到项目中。可以使用如下方式:

这样,@savvy-css/garnishes 中的所有组件和样式类就可以在项目中使用了。

当然,我们也可以根据需要选择性地引入某些组件或样式类。例如,如果我们只需要使用按钮(button)这个组件,可以这样引入:

使用方法

组件

@savvy-css/garnishes 中的组件(garnish)都是以 class 的形式存在的。我们只需要在 HTML 元素中添加相应的 class,即可使用对应的组件。

例如,要使用按钮(button)这个组件,只需要在 HTML 的按钮元素中添加 class="button" 即可:

同样,要使用表格(table)这个组件,只需要在 HTML 的表格元素中添加 class="table" 即可:

-- -------------------- ---- -------
------ --------------
  -------
    ----
      ---------- ------
      ---------- ------
      ---------- ------
    -----
  --------
  -------
    ----
      ------- -- ------ ------
      ------- -- ------ ------
      ------- -- ------ ------
    -----
    ----
      ------- -- ------ ------
      ------- -- ------ ------
      ------- -- ------ ------
    -----
  --------
--------
展开代码

样式类

除了组件以外,@savvy-css/garnishes 中还提供了许多实用的样式类。我们同样只需要在 HTML 元素中添加相应的 class,即可使用对应的样式类。

例如,要添加一个带有红色边框的文本框,可以这样写:

@savvy-css/garnishes 中的样式类都有清晰的命名,让我们在使用时更加方便。

示例代码

使用按钮组件

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ---------------------
    ----- ---------------- ------------------------------------------
  -------
  ------
    ------- -------------------- ------------
  -------
-------
展开代码

使用表格组件

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ---------------------
    ----- ---------------- ------------------------------------------
  -------
  ------
    ------ --------------
      -------
        ----
          ---------- ------
          ---------- ------
          ---------- ------
        -----
      --------
      -------
        ----
          ------- -- ------ ------
          ------- -- ------ ------
          ------- -- ------ ------
        -----
        ----
          ------- -- ------ ------
          ------- -- ------ ------
          ------- -- ------ ------
        -----
      --------
    --------
  -------
-------
展开代码

使用样式类

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    --------------------
    ----- ---------------- ------------------------------------------
  -------
  ------
    ------ ----------- -------------------
  -------
-------
展开代码

结语

@saavy-css/garnishes 是一个优秀的 CSS 框架,它提供了许多实用的组件和样式类,能够帮助我们快速构建页面。在使用时,我们只需简单地引入和使用,就能够享受到它带来的便利。

希望本文对你有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005727881e8991b448e8ab5

纠错
反馈

纠错反馈