Page 页面骨架

页面内容的骨架，含标题区、正文与侧栏。

Galgame

サクラノ詩

枕 · 2015-10-23 · 剧本すかぢ

作品简介与详情放在这里。

正文各节之间由 PageBody 统一间距。

import { Button, Card, NavLink, Page, PageAside, PageBody, PageHeader, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card padded={false} className="w-full overflow-hidden">
      <Page
        size="lg"
        aside={
          <PageAside label="本页目录">
            <NavLink href="#" label="简介">
              简介
            </NavLink>
            <NavLink href="#" label="角色">
              角色
            </NavLink>
            <NavLink href="#" label="制作人员">
              制作人员
            </NavLink>
          </PageAside>
        }
      >
        <PageHeader
          eyebrow="Galgame"
          title="サクラノ詩"
          description="枕 · 2015-10-23 · 剧本 すかぢ"
          actions={
            <>
              <Button variant="soft" tone="neutral" size="sm">
                收藏
              </Button>
              <Button size="sm">标记为在玩</Button>
            </>
          }
        />

        <PageBody>
          <Text size="sm" tone="muted">
            作品简介与详情放在这里。
          </Text>
          <Text size="sm" tone="muted">
            正文各节之间由 PageBody 统一间距。
          </Text>
        </PageBody>
      </Page>
    </Card>
  )
}

tsx

用法

import { Page, PageAside, PageBody, PageHeader } from '@hina-ui/react'

Page 是页面内容的容器，负责限宽、居中与上下留白。PageHeader 是标题区，PageBody 是正文区，PageAside 是右侧的次要栏，通过 aside 属性传入。

Page 与 AppShell 是两层：AppShell 分的是侧栏、顶部条与主区域，Page 分的是主区域内部的结构。两者可以叠用，也可以只用其中一个。

我的书架

收录了 48 部作品。

页面正文。

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

export default function Demo() {
  return (
    <Card padded={false} className="w-full overflow-hidden">
      <Page size="sm">
        <PageHeader title="我的书架" description="收录了 48 部作品。" />
        <PageBody>
          <Text size="sm" tone="muted">
            页面正文。
          </Text>
        </PageBody>
      </Page>
    </Card>
  )
}

tsx

PageHeader 的 title 渲染为页面的一级标题，因此一个页面里只应有一个 PageHeader。

size 决定内容区的最大宽度，透传给内部的 Container：sm 为 48rem，md 为 64rem，lg 为 72rem，xl 为 80rem，默认 md。长文用窄一档，带侧栏的详情页用宽一档。

示例

标题区

eyebrow 是标题上方的一行小字，通常放分类或所属；title 是标题；description 是标题下的一句说明。三者都可省略。

actions 属性放页面级操作，窄屏时落到标题下方、宽屏时移到标题右侧。children 在标题区末尾，用于标签、评分一类紧随标题的内容。

轻小说

春与修罗

全三卷，连载中。

奇幻校园编辑推荐

import { Button, Card, Inline, Page, PageHeader, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card padded={false} className="w-full overflow-hidden">
      <Page size="sm">
        <PageHeader
          eyebrow="轻小说"
          title="春与修罗"
          description="全三卷，连载中。"
          actions={
            <>
              <Button variant="soft" tone="neutral" size="sm">
                收藏
              </Button>
              <Button size="sm">开始阅读</Button>
            </>
          }
        >
          <Inline gap="xs">
            <Tag>奇幻</Tag>
            <Tag>校园</Tag>
            <Tag tone="accent">编辑推荐</Tag>
          </Inline>
        </PageHeader>
      </Page>
    </Card>
  )
}

tsx

侧栏

PageAside 用于页内目录、相关条目一类的次要内容。它随页面滚动吸附在顶部，并且在视口窄于 1280 像素时整体不显示，因此不能把只有这里才有的信息放进去。

label 会渲染为侧栏的小标题，同时作为该区域的可访问名。

制作人员

主栏内容。侧栏在视口窄于 1280 像素时不显示。

import { Card, NavLink, Page, PageAside, PageBody, PageHeader, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card padded={false} className="w-full overflow-hidden">
      <Page
        size="lg"
        aside={
          <PageAside label="相关条目">
            <NavLink href="#" label="同社作品">
              同社作品
            </NavLink>
            <NavLink href="#" label="同一剧本">
              同一剧本
            </NavLink>
          </PageAside>
        }
      >
        <PageHeader title="制作人员" />
        <PageBody>
          <Text size="sm" tone="muted">
            主栏内容。侧栏在视口窄于 1280 像素时不显示。
          </Text>
        </PageBody>
      </Page>
    </Card>
  )
}

tsx

行为

Page 的直接子节点之间间距为 8 个单位，PageBody 的子节点之间为 6 个单位。
侧栏与主栏并排，主栏占据剩余宽度，两者间距 10 个单位。
侧栏在容器内吸顶，滚动时保持在视口上方。
标题区在中等屏幕及以上把操作区移到标题右侧，窄屏时换行到下方。

API

Page

属性	类型	默认值	说明
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	内容区的最大宽度
`className`	`string`	—	追加到根元素的类

属性	说明
`children`	页面主栏内容
`aside`	右侧的次要栏

PageHeader

属性	类型	默认值	说明
`eyebrow`	`string`	—	标题上方的一行小字
`title`	`string`	—	页面标题，渲染为一级标题
`description`	`string`	—	标题下的说明
`className`	`string`	—	追加到根元素的类

属性	说明
`children`	标题区末尾的内容
`actions`	页面级操作

PageBody

属性	类型	默认值	说明
`className`	`string`	—	追加到根元素的类

属性	说明
`children`	正文内容

PageAside

属性	类型	默认值	说明
`label`	`string`	—	侧栏小标题，同时作为可访问名
`className`	`string`	—	追加到根元素的类

属性	说明
`children`	侧栏内容

用法

示例

标题区

侧栏

行为

无障碍

API

Page

PageHeader

PageBody

PageAside