iantype.com
Layout布局

Semantic / 布局

Layout

页面容器、正文宽度、区块和控件组间距。

展示

系统样例

页面容器
正文宽度
控件组
  • semantic.spacing.controlGroup控件组间距0.75rem
  • semantic.spacing.controlGap控件内部间距0.5rem
  • semantic.spacing.controlInline.sm小控件横向内距0.75rem
  • semantic.spacing.controlInline.md中控件横向内距1rem
  • semantic.spacing.controlInline.lg大控件横向内距1.25rem
  • semantic.spacing.segmentInset分段控制内距0.25rem
  • semantic.spacing.segmentGap分段控制项目间距0.25rem
  • semantic.spacing.card卡片内距1.25rem
  • semantic.spacing.section内容区块间距4rem
  • semantic.layout.contentMax内容最大宽度90rem
  • semantic.layout.readable正文宽度68ch

Token

2 个分类

名称类型浅色深色预览
semantic.spacing.controlGroup控件组间距dimension0.75rem0.75remAa
semantic.spacing.controlGap控件内部间距dimension0.5rem0.5remAa
semantic.spacing.controlInline.sm小控件横向内距dimension0.75rem0.75remAa
semantic.spacing.controlInline.md中控件横向内距dimension1rem1remAa
semantic.spacing.controlInline.lg大控件横向内距dimension1.25rem1.25remAa
semantic.spacing.segmentInset分段控制内距dimension0.25rem0.25remAa
semantic.spacing.segmentGap分段控制项目间距dimension0.25rem0.25remAa
semantic.spacing.card卡片内距dimension1.25rem1.25remAa
semantic.spacing.section内容区块间距dimension4rem4remAa
semantic.layout.contentMax内容最大宽度dimension90rem90remAa
semantic.layout.readable正文宽度dimension68ch68chAa

使用

使用规则

  • 页面和组件通过语义或组件 Token 使用这些值。
  • 不要在页面中复制原始值。
  • 浅色和深色主题分别检查实际组合。
Design system