Section 分节

带标题的内容分节。

作品简介

故事发生在一座临海的小镇。

登场角色

三位主要角色与若干配角。

制作人员

剧本、原画与音乐。

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

<template>
  <Card class="w-full">
    <PageBody>
      <Section title="作品简介">
        <Text size="sm" tone="muted">故事发生在一座临海的小镇。</Text>
      </Section>
      <Section title="登场角色">
        <Text size="sm" tone="muted">三位主要角色与若干配角。</Text>
      </Section>
      <Section title="制作人员">
        <Text size="sm" tone="muted">剧本、原画与音乐。</Text>
      </Section>
    </PageBody>
  </Card>
</template>

vue

用法

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

Section 把一段内容连同它的标题归为一节。title 渲染为二级标题，节内的子元素之间保持统一间距。

它通常放在 PageBody 里，一页由若干节纵向排开。节与节之间的间距由 PageBody 决定，节内的由 Section 决定。

发售信息

2015-10-23 由枕发行，支持 Windows。

标题渲染为二级标题，与正文之间由组件统一间距。

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

<template>
  <Card class="w-full">
    <Section title="发售信息">
      <Text size="sm" tone="muted">2015-10-23 由枕发行，支持 Windows。</Text>
      <Text size="sm" tone="muted">标题渲染为二级标题，与正文之间由组件统一间距。</Text>
    </Section>
  </Card>
</template>

vue

示例

不带标题

不写 title 时不渲染标题，只保留分组语义与内部间距。用于一段无需命名、但仍应独立成节的内容。

奇幻校园

不写 title 时不渲染标题，只保留分组与间距。

<script setup lang="ts">
  import { Card, Section, Tag, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full">
    <Section>
      <Inline gap="xs">
        <Tag>奇幻</Tag>
        <Tag>校园</Tag>
      </Inline>
      <Text size="sm" tone="muted">不写 title 时不渲染标题，只保留分组与间距。</Text>
    </Section>
  </Card>
</template>

vue

锚点定位

写上 id 即可成为锚点目标，配合 Anchor 使用。节自带滚动落点的上边距，跳转后标题不会紧贴容器顶缘。

简介

这一节的正文。

滚动或点击右侧条目都会更新当前位置。

角色

这一节的正文。

滚动或点击右侧条目都会更新当前位置。

制作人员

这一节的正文。

滚动或点击右侧条目都会更新当前位置。

<script setup lang="ts">
  import { Anchor, Card, Inline, ScrollArea, Section, Text } from '@hina-ui/vue'

  const items = [
    { id: 'sec-intro', label: '简介' },
    { id: 'sec-cast', label: '角色' },
    { id: 'sec-staff', label: '制作人员' },
  ]
</script>

<template>
  <Inline gap="lg" align="start" class="w-full">
    <Card :padded="false" class="min-w-0 flex-1 overflow-hidden">
      <ScrollArea class="h-56">
        <Section v-for="item in items" :id="item.id" :key="item.id" :title="item.label" class="p-4">
          <Text size="sm" tone="muted">这一节的正文。</Text>
          <Text size="sm" tone="muted">滚动或点击右侧条目都会更新当前位置。</Text>
        </Section>
      </ScrollArea>
    </Card>
    <Anchor :items="items" class="w-28 shrink-0" />
  </Inline>
</template>

vue

行为

渲染为 section 元素，子元素纵向排列，间距 4 个单位。
标题固定为二级标题，不随嵌套层级变化。
滚动定位时在顶部留出 6 个单位的余量。

API

Props

属性	类型	默认值	说明
`title`	`string`	—	节标题，渲染为二级标题
`id`	`string`	—	元素 id，用作锚点目标
`class`	`string`	—	追加到根元素的类

Slots

插槽	说明
`default`	节内内容

作品简介

登场角色

制作人员

用法

发售信息

示例

不带标题

锚点定位

简介

角色

制作人员

行为

无障碍

API

Props

Slots