随着前端开发的不断进步和发展，越来越多的 UI 框架和组件库出现在了我们的视野中，为我们的开发工作带来了很大的便利。在这篇文章中，我们将介绍一款名为 totemcss-core 的 UI 组件库，它是一个基于 Sass 和 CSS3 的模块化库，提供了丰富的组件和样式。
安装和使用
在使用 totemcss-core 前，我们需要先安装它。可以在终端中通过 NPM 包管理器进行安装：
npm install totemcss-core --save-dev
如果我们需要在项目中引入 totemcss-core 的样式文件，我们需要在我们的 Sass 文件中写入：
@import 'totemcss-core';
引入成功后，就可以使用 totemcss-core 提供的各种组件和标准化样式。
模块化设计思路
totemcss-core 提供了良好的模块化设计思路，通过将一些组件抽象成基础组件和扩展组件，我们可以灵活地进行组件的开发和组合，增强了整个库的可复用性和可维护性。
基础组件
totemcss-core 中包含了一些基础组件，这些组件是待扩展组件的基础。基础组件包括：
- Grid 栅格
- Button 按钮
- Input 输入框
- Select 下拉列表
- Card 卡片
- Modal 弹出层
- Tooltip 工具提示
- Switch 开关
- Radio 单选框
- Checkbox 多选框
这些组件可以使我们在开发时更加便捷和高效，因为我们只需要将这些组件进行组合就可以得到更多的样式和组件。
扩展组件
除了基础组件，totemcss-core 还提供了扩展组件，这些组件基于基础组件构建，提供了更多的功能。扩展组件包括：
- Form 表单
- Navbar 导航栏
- Pagination 分页
- Table 表格
在使用这些扩展组件时，我们只需要在基础组件的基础上进行扩展和组合即可得到更加丰富的样式和功能。
示例代码
下面是一段使用 totemcss-core 中的基础组件和扩展组件创建的表单示例代码：
-- -------------------- ---- -------
----- ------------------
---- -----------------
---- ------------------
------ ---------------------------
------ ------------- ------------
------
---- ------------------
------ --------------------------
------ ------------- ----------------
------
------
---- -----------------
---- ------------------
------ -------------------------
------- -------------
-------------------
-------------------
-------------------
---------
------
------
---- ---------------------
------- ------------------- -------------------------
------- ------------------- ------------------------
------
--------- -------------------- ---- -------
------- ----------------
---------- -
--------- -
-------- -----
-------------- -----
---------- -
-------- -----
------------ -------
------------- -----
----- -
------------- ----
-
------
------ -
------- --------------
------- --------------------
-------------- ----
-------- --- ----
-
-
-
------------- -
----------- ------
----------- -----
------ -
------------ ----
-
-
-在这段代码中，我们使用了 totemcss-core 中的 Grid、Button、Input、Select、Form 组件，并通过扩展组件的方式创建了一个表单。这个表单可以帮助我们更快地开始一个项目的开发工作，并且使得表单的样式更加规范和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005753b81e8991b448ea481