Page 页面骨架

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

Galgame

サクラノ詩

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

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

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

<script setup lang="ts">
  import { Button, Card, NavLink, Page, PageAside, PageBody, PageHeader, Text } from '@hina-ui/vue'
</script>

<template>
  <Card :padded="false" class="w-full overflow-hidden">
    <Page size="lg">
      <PageHeader eyebrow="Galgame" title="サクラノ詩" description="枕 · 2015-10-23 · 剧本 すかぢ">
        <template #actions>
          <Button variant="soft" tone="neutral" size="sm">收藏</Button>
          <Button size="sm">标记为在玩</Button>
        </template>
      </PageHeader>

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

      <template #aside>
        <PageAside label="本页目录">
          <NavLink href="#" label="简介">简介</NavLink>
          <NavLink href="#" label="角色">角色</NavLink>
          <NavLink href="#" label="制作人员">制作人员</NavLink>
        </PageAside>
      </template>
    </Page>
  </Card>
</template>

vue

用法

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

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

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

我的书架

收录了 48 部作品。

页面正文。

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

<template>
  <Card :padded="false" class="w-full overflow-hidden">
    <Page size="sm">
      <PageHeader title="我的书架" description="收录了 48 部作品。" />
      <PageBody>
        <Text size="sm" tone="muted">页面正文。</Text>
      </PageBody>
    </Page>
  </Card>
</template>

vue

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

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

示例

标题区

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

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

轻小说

春与修罗

全三卷，连载中。

奇幻校园编辑推荐

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

<template>
  <Card :padded="false" class="w-full overflow-hidden">
    <Page size="sm">
      <PageHeader eyebrow="轻小说" title="春与修罗" description="全三卷，连载中。">
        <template #actions>
          <Button variant="soft" tone="neutral" size="sm">收藏</Button>
          <Button size="sm">开始阅读</Button>
        </template>

        <Inline gap="xs">
          <Tag>奇幻</Tag>
          <Tag>校园</Tag>
          <Tag tone="accent">编辑推荐</Tag>
        </Inline>
      </PageHeader>
    </Page>
  </Card>
</template>

vue

侧栏

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

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

制作人员

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

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

<template>
  <Card :padded="false" class="w-full overflow-hidden">
    <Page size="lg">
      <PageHeader title="制作人员" />
      <PageBody>
        <Text size="sm" tone="muted">主栏内容。侧栏在视口窄于 1280 像素时不显示。</Text>
      </PageBody>

      <template #aside>
        <PageAside label="相关条目">
          <NavLink href="#" label="同社作品">同社作品</NavLink>
          <NavLink href="#" label="同一剧本">同一剧本</NavLink>
        </PageAside>
      </template>
    </Page>
  </Card>
</template>

vue

行为

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

API

Page

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

插槽	说明
`default`	页面主栏内容
`aside`	右侧的次要栏

PageHeader

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

插槽	说明
`default`	标题区末尾的内容
`actions`	页面级操作

PageBody

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

插槽	说明
`default`	正文内容

PageAside

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

插槽	说明
`default`	侧栏内容

用法

示例

标题区

侧栏

行为

无障碍

API

Page

PageHeader

PageBody

PageAside