容器

容器把内容居中、给宽度封顶让文字行保持易读，并留出一圈边距，免得在手机上有东西贴到屏幕边缘。它通常是 body() 里的第一样东西。

基础容器

里面的一切都保持居中，到了尺寸上限就不再变宽。

container(
  text({ variant: 'lead' }, '里面的一切都保持居中，到了尺寸上限就不再变宽。'),
)

尺寸

五档，从单栏可读宽度一直到完全不限。sm 大约是 40rem——差不多就是正文想要的宽度。

sm — 40rem

md — 56rem

lg — 72rem（默认）

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem（默认）'),
  ),
)

自定义宽度

width 接受任意 CSS 长度，并盖过 size，留给那种尺度里没有的特殊页面。

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

边距

边距是内容与视口边缘之间保留的内边距。它接受一个间距令牌、若干个间距单位，或者一个原始长度值。

更宽的边距，适合那种在平板上内容不该顶到边缘的页面。

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, '更宽的边距，适合那种在平板上内容不该顶到边缘的页面。'),
)

渲染为其他元素

as 只换标签，其余一概不变——当容器同时也是页面的 <main> 或某个 <section> 时很有用。

一个 main 元素

布局一样，地标正确。

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, '一个 main 元素'),
  text({ tone: 'muted' }, '布局一样，地标正确。'),
)

属性

属性	类型	默认值	说明
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	采用哪一档宽度上限。
`width`	`string`	—	原始的 max-width，会盖过 size。
`gutter`	`Space`	`'md'`	与视口边缘之间保留的横向内边距。
`as`	`string`	`'div'`	渲染成哪个元素，例如 main 或 section。