Section 分节

带标题的内容分节。

作品简介

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

登场角色

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

制作人员

剧本、原画与音乐。

import { Card, PageBody, Section, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="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>
  )
}

tsx

用法

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

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

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

发售信息

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

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

import { Card, Section, Text } from '@hina-ui/react'

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

tsx

示例

不带标题

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

奇幻校园

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

import { Card, Section, Tag, Inline, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="w-full">
      <Section>
        <Inline gap="xs">
          <Tag>奇幻</Tag>
          <Tag>校园</Tag>
        </Inline>
        <Text size="sm" tone="muted">
          不写 title 时不渲染标题，只保留分组与间距。
        </Text>
      </Section>
    </Card>
  )
}

tsx

锚点定位

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

简介

这一节的正文。

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

角色

这一节的正文。

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

制作人员

这一节的正文。

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

import { Anchor, Card, Inline, ScrollArea, Section, Text } from '@hina-ui/react'

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

export default function Demo() {
  return (
    <Inline gap="lg" align="start" className="w-full">
      <Card padded={false} className="min-w-0 flex-1 overflow-hidden">
        <ScrollArea className="h-56">
          {items.map(item => (
            <Section key={item.id} id={item.id} title={item.label} className="p-4">
              <Text size="sm" tone="muted">
                这一节的正文。
              </Text>
              <Text size="sm" tone="muted">
                滚动或点击右侧条目都会更新当前位置。
              </Text>
            </Section>
          ))}
        </ScrollArea>
      </Card>
      <Anchor items={items} className="w-28 shrink-0" />
    </Inline>
  )
}

tsx

行为

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

API

Props

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

内容属性

属性	说明
`children`	节内内容

作品简介

登场角色

制作人员

用法

发售信息

示例

不带标题

锚点定位

简介

角色

制作人员

行为

无障碍

API

Props

内容属性