Container 内容容器

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

サクラノ詩

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

<script setup lang="ts">
  import { Container, Heading, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="none" class="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>
</template>

vue

用法

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

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

居中且限宽的内容

<script setup lang="ts">
  import { Card, Container, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="none" class="bg-inset w-full rounded-md py-4">
    <Container>
      <Card class="grid h-16 place-items-center">居中且限宽的内容</Card>
    </Container>
  </Stack>
</template>

vue

示例

尺寸

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

<script setup lang="ts">
  import { Card, Container, Stack } from '@hina-ui/vue'

  const sizes = ['sm', 'md', 'lg', 'xl'] as const
</script>

<template>
  <Stack class="w-full">
    <Stack v-for="size in sizes" :key="size" gap="none" class="bg-inset w-full rounded-md py-3">
      <Container :size="size">
        <Card class="grid h-10 place-items-center text-sm" :padded="false">{{ size }}</Card>
      </Container>
    </Stack>
  </Stack>
</template>

vue

API

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

插槽	说明
`default`	子元素