Container 内容容器

把页面内容限制在可读宽度内并居中。

サクラノ詩

容器把内容限制在可读的宽度内，并在页面里居中。两侧的内边距随屏幕宽度变化，窄屏 16 像素，宽屏 24 像素。

import { Container, Heading, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="none" className="bg-inset w-full rounded-md py-8">
      <Container size="sm">
        <Stack gap="xs">
          <Heading level={3} size="lg">
            サクラノ詩
          </Heading>
          <Text tone="muted">
            容器把内容限制在可读的宽度内，并在页面里居中。两侧的内边距随屏幕宽度变化，窄屏 16
            像素，宽屏 24 像素。
          </Text>
        </Stack>
      </Container>
    </Stack>
  )
}

tsx

用法

import { Container } from '@hina-ui/react'

Container 限制内容的最大宽度并在父元素中居中，两侧带内边距：窄屏 16 像素，sm 断点以上 24 像素。

居中且限宽的内容

import { Card, Container, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="none" className="bg-inset w-full rounded-md py-4">
      <Container>
        <Card className="grid h-16 place-items-center">居中且限宽的内容</Card>
      </Container>
    </Stack>
  )
}

tsx

示例

尺寸

四档最大宽度分别是 768、1024、1152 与 1280 像素。正文类页面用 sm，列表与仪表盘用 lg 或者 xl。

import { Card, Container, Stack } from '@hina-ui/react'

const sizes = ['sm', 'md', 'lg', 'xl'] as const

export default function Demo() {
  return (
    <Stack className="w-full">
      {sizes.map(size => (
        <Stack key={size} gap="none" className="bg-inset w-full rounded-md py-3">
          <Container size={size}>
            <Card className="grid h-10 place-items-center text-sm" padded={false}>
              {size}
            </Card>
          </Container>
        </Stack>
      ))}
    </Stack>
  )
}

tsx

API

属性	类型	默认值	说明
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	内容的最大宽度
`as`	`string`	`'div'`	渲染的标签
`className`	`string`	—	追加至容器的类名

属性	说明
`children`	子元素