在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

Semantic-Org/Semantic-UI

菜单

合集

相关源文件

Semantic UI 中的集合代表了复杂的 UI 组件，用于将内容组织成有意义的组。与作为基本构建块的单个元素不同，集合将多个元素组合成连贯、用户友好的结构，遵循常见的 UI 模式。它们旨在以一致的方式有效地组织和显示相关内容。

有关单个 UI 元素（如按钮、输入框等）的信息，请参阅 元素页面。有关具有 Javascript 功能的交互行为和模块，请参阅 核心 UI 组件页面。

什么是集合？

集合比单个元素复杂，但不如视图专业化。它们充当组织结构，将内容分组到常见的 UI 模式中。

来源：src/definitions/collections/menu.less17-18/src/definitions/collections/grid.less15-16/src/definitions/collections/form.less15-16/src/definitions/collections/table.less16-17

Semantic UI 包含四种主要集合

集合目的主要特点
菜单导航和选择水平或垂直项目列表
网格布局和对齐响应式行/列结构
表单用户输入收集带验证和反馈的输入字段
表格表格数据展示带格式的行和数据列

每个集合都实现了特定的 HTML 和 CSS 模式，以满足常见的 UI 需求，从而提供一种一致的方法来解决常见的设计挑战。

集合架构

集合在 Semantic UI 的代码库中共享一个通用的架构模式

来源：src/definitions/collections/menu.less20/src/themes/default/collections/menu.variables1-4

此架构遵循 Semantic UI 的主题系统，其中组件通过以下方式定义：

  • 核心定义文件，用于建立结构和功能
  • 变量文件，用于定义样式的默认值
  • 覆盖文件，允许主题特定的自定义

菜单集合为组织导航链接或选择选项提供了水平或垂直结构。

来源：src/definitions/collections/menu.less30-40/src/definitions/collections/menu.less62-68/src/definitions/collections/menu.less74-94

主要功能

  • 响应式行为：适应不同屏幕尺寸
  • 多种方向：水平（默认）或垂直
  • 嵌套菜单：支持下拉式和分层导航
  • 状态：项目处于活动、悬停和禁用状态
  • 多种变体：次要、指向性、表格化、分页等。

来源：src/definitions/collections/menu.less494-513/src/definitions/collections/menu.less774-832/src/definitions/collections/menu.less596-686/src/definitions/collections/menu.less1020-1136

CSS 实现

菜单集合使用 CSS 弹性盒子（flexbox）进行布局，并为各种状态和变体进行特定样式设计。基础菜单被样式化为一个弹性容器，其项目根据菜单的方向进行排列。

来源：src/definitions/collections/menu.less30-40/src/themes/default/collections/menu.variables10-21

网格集合

网格集合通过行和列提供了一个灵活的系统，用于创建响应式布局。

来源：src/definitions/collections/grid.less24-30/src/definitions/collections/grid.less82-93/src/definitions/collections/grid.less62-71

主要功能

  • 16列系统：空间划分为16个相等的部分
  • 响应式列宽：列可以在不同设备尺寸上跨越不同的宽度
  • 自动间距：内置的沟槽和行间距
  • 嵌套网格：支持网格内网格布局
  • 列变体：宽度、对齐和顺序控制

来源：src/definitions/collections/grid.less218-281/src/themes/default/globals/site.variables679-695/src/themes/default/globals/site.variables212-216/src/themes/default/globals/site.variables530-533

响应式行为

网格系统通过媒体查询和特定于设备的类修饰符适应不同的屏幕尺寸。

来源：src/definitions/collections/grid.less445-542/src/themes/default/globals/site.variables212-216/src/themes/default/globals/site.variables530-533

表单集合

表单集合通过各种输入类型和验证方式，提供了一种结构化的用户输入收集方式。

来源： src/definitions/collections/form.less28-31/src/definitions/collections/form.less45-58/src/definitions/collections/form.less254-258

主要功能

  • 字段分组：将输入整理到逻辑组中
  • 验证状态：成功、警告和错误状态
  • 内联验证：字段级错误消息
  • 灵活的布局：响应式和自适应的表单布局
  • 与输入元素集成：与 Semantic UI 输入无缝样式

来源： src/definitions/collections/form.less401-409/src/definitions/collections/form.less415-424/src/definitions/collections/form.less431-439

字段类型

Form collection通过字段包装器支持各种输入类型，提供一致的样式和行为。

来源： src/definitions/collections/form.less78-94/src/definitions/collections/form.less132-155/src/definitions/collections/form.less175-188

表格集合

Table collection 提供了一种显示表格数据的方式，具有一致的样式和各种显示选项。

来源： src/definitions/collections/table.less26-37/src/definitions/collections/table.less57-72/src/definitions/collections/table.less118-134

主要功能

  • 干净的样式：表格数据的样式一致且现代
  • 响应式选项：适应不同屏幕尺寸
  • 各种状态：行和单元格的活动、积极、消极状态
  • 变体：条纹、可选择、可折叠等
  • 语义标记：遵循标准的 HTML 表格结构

来源： src/definitions/collections/table.less225-244/src/definitions/collections/table.less250-264/src/definitions/collections/table.less308-355

响应式行为

Semantic UI 中的表格可以适应不同的屏幕尺寸，在较小的屏幕上可以选择堆叠或滚动。

来源： src/definitions/collections/table.less157-201

与其他组件的集成

Collections 通常与元素和模块一起使用，以创建更复杂的 UI 模式

来源： src/definitions/collections/menu.less143-150/src/definitions/collections/form.less193-247/src/definitions/collections/grid.less131-149/src/definitions/collections/table.less209-214

自定义和主题化

Semantic UI 中的 Collections 可通过主题系统进行高度自定义。每个 Collection 都有一组控制其外观的变量。

来源： src/themes/default/collections/menu.variables1-4/src/themes/default/collections/grid.variables1-3/src/themes/default/collections/form.variables1-4/src/themes/default/collections/table.variables1-4

结论

Collections 在 Semantic UI 中为常见的 UI 模式提供了基本的组织结构。它们为布局、导航、数据输入和数据展示需求提供了统一的方法。通过使用这些标准化的 Collections，开发人员可以轻松创建连贯且用户友好的界面。