Semantic UI 概述

目的与范围

本文档全面概述了Semantic UI框架、其架构和核心组件。它为使用代码库的开发人员提供了该框架的技术入门。有关构建和自定义Semantic UI的更具体信息，请参阅框架架构和入门指南。

Semantic UI简介

Semantic UI是一个UI框架，专为主题化和创建响应式布局而设计，具有易于理解的HTML。正如README.md文件中所述，该框架包含

50+个UI元素
3000+个CSS变量
3个变量继承级别
使用EM值构建，实现响应式设计
对Flexbox友好

该框架旨在帮助开发人员使用简洁的HTML、直观的JavaScript和简化的调试来构建网站。它默认是响应式的，并且可以与React、Angular、Meteor和Ember等流行的JavaScript框架集成。

来源: README.md

高层架构

Semantic UI围绕四个主要子系统构建，它们协同工作以创建完整的框架

来源：src/definitions/modules/dropdown.js, src/definitions/modules/popup.js, src/definitions/behaviors/form.js

组件组织

Semantic UI将其组件组织成五个主要类别

元素 (Elements)：基本的UI构建块
集合 (Collections)：构成连贯单元的元素组
模块 (Modules)：具有JavaScript功能的交互式组件
视图 (Views)：内容呈现方式
行为 (Behaviors)：可应用于元素的JavaScript实用程序

来源：src/definitions/modules/dropdown.js, src/definitions/behaviors/form.js, src/definitions/behaviors/api.js, src/definitions/behaviors/visibility.js

元素

可独立使用的基本构建块

组件	描述	文件
按钮	具有各种状态的交互式按钮	src/definitions/elements/button.less
输入	表单输入字段	src/definitions/elements/input.less
标签	描述性标签或标记	src/definitions/elements/label.less
图标	Semantic图标系统	src/definitions/elements/icon.less
标题	章节标题	src/definitions/elements/header.less
区段	分组内容容器	src/definitions/elements/segment.less

合集

构成连贯单元的元素组

组件	描述	文件
表单	数据录入和验证	src/definitions/collections/form.less
网格	响应式布局系统	src/definitions/collections/grid.less
菜单	导航菜单	src/definitions/collections/menu.less
表格	表格数据展示	src/definitions/collections/table.less
消息	信息性消息	src/definitions/collections/message.less

模块

具有JavaScript功能的交互式组件

组件	描述	文件
下拉菜单	带选项的选择输入	src/definitions/modules/dropdown.js, dropdown.less
弹出框	上下文覆盖层	src/definitions/modules/popup.js, popup.less
搜索	搜索功能	src/definitions/modules/search.js, search.less
模态框	对话框	src/definitions/modules/modal.js, modal.less
粘性	固定在视口中的元素	src/definitions/modules/sticky.js, sticky.less
Tab键	选项卡式内容	src/definitions/modules/tab.js, tab.less

行为

为其他组件添加功能的JavaScript实用程序

组件	描述	文件
表单验证	输入验证	src/definitions/behaviors/form.js
API	AJAX请求处理	src/definitions/behaviors/api.js
可见性	元素可见性检测	src/definitions/behaviors/visibility.js

来源：src/definitions/modules/dropdown.js, src/definitions/modules/popup.js, src/definitions/behaviors/form.js

组件相互依赖

Semantic UI组件的功能通常依赖于其他组件

来源：src/definitions/modules/dropdown.js, src/definitions/modules/popup.js, src/definitions/modules/search.js

jQuery插件架构

Semantic UI中所有由JavaScript驱动的组件都作为jQuery插件实现，遵循一致的模式

这种架构允许组件使用配置选项进行初始化，并提供初始化后可调用的方法

来源：src/definitions/modules/dropdown.js:22-140, src/definitions/modules/popup.js:22-105

主题系统

Semantic UI的核心优势之一是其全面的主题系统，该系统使用LESS变量来控制UI的每一个方面

变量继承

变量在多个级别上定义，特异性递增

全局 (Global)：src/themes/default/globals/site.variables中的变量适用于所有组件
组件类型 (Component Type)：变量可以在组件类别之间共享
组件 (Component)：每个组件都有自己的变量文件（例如，dropdown.variables）

来自src/themes/default/modules/dropdown.variables的示例

自定义主题可以覆盖这些变量中的任何一个，而无需修改原始源文件。

来源：src/themes/default/modules/dropdown.variables:22-50

构建系统

Semantic UI使用Gulp从源文件构建CSS和JavaScript文件

构建过程会编译：

将LESS文件转换为CSS
将JavaScript文件转换为最小化和未最小化版本
在dist/components/目录中创建完整文件（semantic.min.css, semantic.min.js）以及特定于组件的文件

来源：README.md, RELEASE-NOTES.md:11-18

文件结构

Semantic UI代码库遵循一致的组织模式

src/
  ├── definitions/          # Source code for components
  │   ├── elements/         # Basic UI elements
  │   ├── collections/      # Groups of elements
  │   ├── modules/          # Interactive components
  │   ├── views/            # Content presentation
  │   └── behaviors/        # JavaScript utilities
  │
  ├── themes/               # Theming system
  │   ├── default/          # Default theme
  │   │   ├── globals/      # Global variables
  │   │   ├── elements/     # Element variables & overrides
  │   │   ├── collections/  # Collection variables & overrides
  │   │   ├── modules/      # Module variables & overrides
  │   │   └── views/        # View variables & overrides
  │   └── theme.config      # Theme configuration
  │
  └── semantic.less         # Main LESS file

dist/                      # Build output
  ├── semantic.css         # Compiled CSS
  ├── semantic.min.css     # Minified CSS
  ├── semantic.js          # Compiled JavaScript
  ├── semantic.min.js      # Minified JavaScript
  └── components/          # Individual component files

来源: README.md

为了说明Semantic UI中组件的构建方式，我们来研究一下Dropdown组件

JavaScript 实现

Dropdown组件（src/definitions/modules/dropdown.js22-900) 包含

插件定义:
模块实现:
事件处理:
设置:

CSS 实现

Dropdown的样式（src/definitions/modules/dropdown.less25-200) 包含

主题变量

Dropdown的主题变量（src/themes/default/modules/dropdown.variables1-50) 包含

来源：src/definitions/modules/dropdown.js, src/definitions/modules/dropdown.less, src/themes/default/modules/dropdown.variables

结论

Semantic UI提供了一个全面的UI框架，围绕模块化组件构建，这些组件作为jQuery插件实现，并具有强大的基于LESS的主题功能。其架构遵循一致的模式，使其既可预测又可扩展。

该框架组织成元素、集合、模块、视图和行为的逻辑层次结构，并具有强大的构建系统，可将源文件编译为优化的分发文件。这种模块化方法与主题系统相结合，使开发人员能够创建高度定制的界面，同时保持一致性和可用性。

对于使用Semantic UI代码库的开发人员来说，理解这些基本概念对于有效定制和扩展框架至关重要。