视图

视图简介

视图是 Semantic UI 中一类特定的 UI 组件，用于以视觉格式和结构化内容呈现数据集合。视图与其他组件类别的不同之处在于，它们专注于以一致、标准化的格式呈现复杂数据对象，而不是提供交互式功能（如模块）或基本 UI 构建块（如元素）。

视图旨在以用户能够快速理解和扫描的、可识别的模式来显示内容和信息。它们对于显示类似内容项的集合特别有用，例如产品列表、媒体集合或内容提要。

有关 Semantic UI 中其他组件类别的更多信息，请参阅核心 UI 组件和 CSS 样式系统。

来源： src/definitions/views/card.less14-16 src/definitions/views/item.less14-16

视图组件架构

Semantic UI 中的视图遵循一致的架构模式。每种视图类型在 src/definitions/views/ 目录下定义为一个 LESS 文件，并在 src/themes/default/views/ 中具有相应的样式变量。

所有视图组件共享通用模式

根容器类 - 每个视图都有一个主容器类（例如，.ui.card，.ui.items）
通用部分 - 大多数视图包含标准化部分，如图像、内容、标题、描述
响应式行为 - 视图通过媒体查询适应不同的屏幕尺寸
通用变体 - 许多视图共享颜色、大小和对齐方式等变体选项

来源： src/definitions/views/card.less20-26 src/definitions/views/item.less20-26

卡片视图

卡片视图以具有一致格式的自包含、卡片式组件呈现内容。卡片通常用于显示类似对象的集合，例如产品、团队成员或文章。

卡片结构

卡片可作为单个项目（.ui.card）或集合（.ui.cards）使用。当用作集合时，它们可以显示在具有预定义宽度的行中。

卡片主要功能

响应式布局 - 使用.ui.two.cards或.ui.four.cards等类，卡片可以以类似网格的方式显示
浮雕外观 - 卡片默认具有细微的阴影，提供浮雕外观
内容部分 - 用于图像、内容和额外信息的标准部分
链接行为 - 卡片可以作为带有悬停效果的可点击链接
颜色变体 - 卡片支持语义颜色（红、蓝、绿等）

来源： src/definitions/views/card.less28-45 src/definitions/views/card.less66-76 src/themes/default/views/card.variables10-33

卡片组件示例结构

章节	CSS 类	目的
根目录	`.ui.card`	整个卡片的容器
图片	`.image`	卡片主图像的容器
内容	`.content`	主要内容区域（标题、元信息、描述）
标题	`.content > .header`	卡片的标题或主标题
元信息	`.meta`	次要信息（日期、类别）
描述	`.description`	主要文本内容或摘要
额外	`.extra`	额外信息或操作

来源： src/definitions/views/card.less144-155 src/definitions/views/card.less167-182 src/definitions/views/card.less392-416

卡片响应式行为

卡片通过以下方式实现响应式行为：

翻倍 - .doubling 修饰符会在较小的屏幕上自动调整每行的卡片数量
堆叠 - .stackable 修饰符会使卡片在移动设备上垂直堆叠
媒体查询 - 内置适用于移动、平板和桌面屏幕的断点

来源： src/definitions/views/card.less860-943 src/definitions/views/card.less1034-1048

项目视图

项目视图旨在将内容集合显示为一系列项目，每个项目通常以图像和内容为特色。项目通常用于内容量大的列表，例如搜索结果、新闻提要或产品列表。

项目结构

与卡片不同，项目默认设计为垂直列表格式显示，强调每个项目中图像和内容的水平布局。

项目主要功能

水平布局 - 每个项目通常在左侧显示图像，右侧显示内容
垂直堆叠 - 项目垂直堆叠以创建列表外观
内容对齐 - 内容可以相对于图像进行顶部、中部或底部对齐
分隔选项 - 项目之间可以添加分隔符以实现更清晰的分隔
宽松间距 - 提供各种间距选项以控制密度

来源： src/definitions/views/item.less28-44 src/definitions/views/item.less50-59 src/themes/default/views/item.variables10-23

项目组件示例结构

章节	CSS 类	目的
容器	`.ui.items`	整个项目集合的包装器
项目	`.item`	单个项目容器
图片	`.image`	项目图像的容器
内容	`.content`	主要内容区域
标题	`.content > .header`	标题或主标题
元信息	`.meta`	次要信息（日期、类别）
描述	`.description`	主要文本内容或摘要
额外	`.extra`	额外信息或操作

来源： src/definitions/views/item.less86-102 src/definitions/views/item.less113-131 src/definitions/views/item.less186-192 src/definitions/views/item.less298-326

项目响应式行为

项目通过以下方式处理响应式设计：

平板电脑调整 - 在平板电脑尺寸的屏幕上调整图像宽度和内容间距
移动设备堆叠 - 在移动设备上，图像堆叠在内容之上，除非使用了.unstackable 类
媒体查询 - 适用于移动、平板和桌面断点的不同样式

来源： src/definitions/views/item.less333-375 src/definitions/views/item.less467-472

对比：卡片 vs 列表项

尽管卡片（Cards）和列表项（Items）在展示内容集合方面有相似的用途，但它们有不同的用例和特性。

功能	卡片	项 (Items)
布局	基于网格，每行多个	基于列表，垂直堆叠
列表项布局	垂直（图片在内容上方）	水平（图片在内容旁边）
视觉分量	较重，有阴影和边框	较轻，更侧重内容
典型用法	产品网格，个人资料卡	搜索结果，内容列表
间距	固定每张卡片的宽度	流体宽度，适应容器
图片位置	通常在顶部	通常在左侧
容器	`.ui.cards`	`.ui.items`
列表项容器	`.ui.card`	`.ui.items > .item`

来源： src/definitions/views/card.less28-45 src/definitions/views/item.less28-44

主题化视图

Semantic UI 中的视图可以通过主题化系统进行高度定制。每个视图组件都有一个位于主题目录下的专用变量文件。

可主题化的关键方面包括：

尺寸 - 控制宽度、高度和间距
排版 - 自定义字体、字号和文本颜色
边框和阴影 - 调整边框、圆角和阴影效果
颜色 - 修改背景颜色和颜色变体
响应式断点 - 自定义响应式行为阈值

来源： src/themes/default/views/card.variables1-221 src/themes/default/views/item.variables1-157

实施最佳实践

在使用 Semantic UI 的视图时，请考虑以下实施指南：

选择正确的视图 - 使用 Cards 用于网格布局，使用 Items 用于列表布局
一致的内容结构 - 在列表项之间保持一致的结构，以便用户更易于扫描
响应式选项 - 利用内置的响应式类，如 .doubling 和 .stackable
语义化变体 - 应用适当的语义化变体（例如，.raised，.centered）
主题化 - 通过主题变量自定义视图，而不是直接覆盖 CSS

有关创建自定义主题的更多信息，请参阅主题系统和变量和覆盖。

来源： src/definitions/views/card.less418-751 src/definitions/views/item.less378-437

视图