Panel 面板

带有标准标题栏的卡片，标题、计数与操作各有固定位置。

用法

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

面板是一张 Card 加一条标准标题栏：title 是标题，description 是标题下方的说明，count 在标题旁显示计数，icon 插槽放置标题前的图标，actions 插槽放置标题行末尾的操作，默认插槽是正文。同一页面中的各个面板因此外观一致，不必逐个手写标题行。

账号安全

上次登录：今天 09:12，来自杭州。

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

<template>
  <Panel title="账号安全" class="w-96">
    <Text>上次登录：今天 09:12，来自杭州。</Text>
  </Panel>
</template>

vue

示例

操作

actions 插槽通常放置一两个小号按钮或一个链接。

邮件通知

有新的回复、关注与私信时发送邮件。

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

<template>
  <Panel title="邮件通知" class="w-96">
    <template #actions>
      <Button size="sm" variant="outline" tone="neutral">测试发送</Button>
      <Button size="sm">保存</Button>
    </template>
    <Text>有新的回复、关注与私信时发送邮件。</Text>
  </Panel>
</template>

vue

图标与计数

icon 插槽的图标显示在标题前，count 显示在标题后；两者都是为标题补充信息，不改变标题的层级。

128

按时间倒序排列，最新的在前。

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

<template>
  <Panel title="评论" :count="128" class="w-96">
    <template #icon><MessageSquare /></template>
    <Text>按时间倒序排列，最新的在前。</Text>
  </Panel>
</template>

vue

说明文字

description 显示在标题下方，用一句话说明该区块的内容。

公开资料

这些信息会显示在你的个人页上，所有人可见。

显示收藏列表

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

<template>
  <Panel title="公开资料" description="这些信息会显示在你的个人页上，所有人可见。" class="w-96">
    <Switch>显示收藏列表</Switch>
  </Panel>
</template>

vue

无内边距的正文

padded 设为 false 时正文不带内边距，列表、表格这类自带行边距的内容可以贴至卡片边缘。

成员

星见书音

管理员

偷瞄

成员

玻璃

成员

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

  const members = [
    { name: '星见书音', src: '/avatars/selfie.webp', role: '管理员' },
    { name: '偷瞄', src: '/avatars/peek.webp', role: '成员' },
    { name: '玻璃', src: '/avatars/glass.webp', role: '成员' },
  ]
</script>

<template>
  <Panel title="成员" :count="members.length" :padded="false" class="w-96">
    <Stack gap="none" align="stretch" class="divide-line divide-y">
      <Inline
        v-for="member in members"
        :key="member.name"
        gap="sm"
        align="center"
        class="px-(--hn-panel-p) py-2.5"
      >
        <Avatar :src="member.src" :name="member.name" size="sm" />
        <Text size="sm">{{ member.name }}</Text>
        <Text size="sm" tone="muted">{{ member.role }}</Text>
      </Inline>
    </Stack>
  </Panel>
</template>

vue

标题层级

level 决定标题渲染为 h2、h3 还是 h4，默认 h2；页面中只有一个 h1，面板的标题从二级开始，嵌套在另一个区块内时再降一级。

设置

通知

这块面板嵌在「设置」之下，标题降为三级。

隐私

同一层级的面板用同一级标题。

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

<template>
  <Stack gap="md" class="w-96">
    <Heading :level="2" size="lg">设置</Heading>
    <Panel title="通知" :level="3">
      <Text>这块面板嵌在「设置」之下，标题降为三级。</Text>
    </Panel>
    <Panel title="隐私" :level="3">
      <Text>同一层级的面板用同一级标题。</Text>
    </Panel>
  </Stack>
</template>

vue

API

Props

属性	类型	默认值	说明
`title`	`string`	—	必填。标题
`description`	`string`	—	标题下方的说明
`count`	`number`	—	标题旁的计数
`level`	`2 \| 3 \| 4`	`2`	标题的层级
`padded`	`boolean`	`true`	正文是否带内边距
`class`	`string`	—	追加至卡片的类名

插槽

插槽	说明
default	正文
`icon`	标题前的图标
`title`	标题内容
`description`	说明内容
`actions`	标题行末尾的操作

最近活动

用法