UI 组件 L1 · 组件分类 / Layout & Surfaces
布局与表面
用于组织空间、容器、层级、页面骨架和视觉表面的组件。
关键字段
Identity · 身份
- 子类型
- UI 组件分类
- 层级
- L1 · UI 组件分类
What · 是什么
- 定义
- 用于组织空间、容器、层级、页面骨架和视觉表面的组件。
- 分类
- 已验证
Why · 为什么
- 核心问题
- 内容和功能如何被组织在空间中?
Lifecycle · 生命周期
- 状态
- 已验证
包含 UI 组件类型(L2)
关系来自本地关系表,并包含反向关联。
- Aspect RatioAspect Ratio反向 · 属于
纵横比约束内容的宽高比例,保证媒体和容器在不同尺寸下稳定缩放。
- BleedBleed反向 · 属于
允许内容突破父容器内边距或列宽,形成全宽或出血式布局。
- BreakpointBreakpoint反向 · 属于
定义响应式布局在容器或视口变化时切换结构和密度的阈值。
- ContainerContainer反向 · 属于
限制内容宽度、内边距和水平对齐的容器原语。
- FlexFlex反向 · 属于
用于一维对齐、分配空间和响应式排列的布局原语。
- FlowFlow反向 · 属于
描述块级内容沿阅读方向自动排列、换行和形成间距的布局基础。
- InlineInline反向 · 属于
描述行内内容的排列、对齐、换行和内联间距。
- LayerLayer反向 · 属于
定义元素在层叠上下文中的层级、遮挡与定位关系。
- Safe Area InsetsSafe Area Insets反向 · 属于
为刘海、圆角屏幕、系统手势区和窗口边缘提供安全内边距。
- Scroll AreaScroll Area反向 · 属于
定义可滚动区域的边界、滚动条、滚动阴影和键盘/触控行为。
- SpacerSpacer反向 · 属于
在布局中提供可控空白和剩余空间分配的布局原语。
- StackStack反向 · 属于
沿单一轴组织子元素并维护一致间距的布局原语。
- SurfaceSurface反向 · 属于
承载内容并表达背景、层级或交互边界的表面原语。
- Resize HandleResize Handle反向 · 属于
调整面板、列、窗口或媒体尺寸的拖拽手柄。
- ScrollbarScrollbar反向 · 属于
表达可滚动区域位置和可操作范围的滚动条。
- Page HeaderPage Header反向 · 属于
组织页面标题、上下文、主要操作和辅助信息的页头
- Resizable PanelResizable Panel反向 · 属于
允许用户拖拽调整面板、列或区域尺寸的复合容器。
- SidebarSidebar反向 · 属于
承载辅助内容、筛选或上下文工具的侧边区域
- Split ViewSplit View反向 · 属于
在同一视图中并列展示列表与详情或两个相关区域
- SplitterSplitter反向 · 属于
把相邻区域分成可拖拽调整大小的面板。
- Dashboard LayoutDashboard Layout反向 · 属于
组织高密度信息、指标、筛选器和数据视图。
- Page ShellPage Shell反向 · 属于
定义页面级容器、导航、主体和页脚的组合骨架。
- Responsive ShellResponsive Shell反向 · 属于
根据屏幕和任务上下文调整导航、内容和辅助栏的应用壳