Panel 面板

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

用法

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

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

账号安全

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

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

export default function Demo() {
  return (
    <Panel title="账号安全" className="w-96">
      <Text>上次登录：今天 09:12，来自杭州。</Text>
    </Panel>
  )
}

tsx

示例

操作

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

邮件通知

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

import { Button, Panel, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Panel
      title="邮件通知"
      className="w-96"
      actions={
        <>
          <Button size="sm" variant="outline" tone="neutral">
            测试发送
          </Button>
          <Button size="sm">保存</Button>
        </>
      }
    >
      <Text>有新的回复、关注与私信时发送邮件。</Text>
    </Panel>
  )
}

tsx

图标与计数

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

128

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

import { MessageSquare } from 'lucide-react'
import { Panel, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Panel title="评论" count={128} className="w-96" icon={<MessageSquare />}>
      <Text>按时间倒序排列，最新的在前。</Text>
    </Panel>
  )
}

tsx

说明文字

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

公开资料

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

显示收藏列表

import { Panel, Switch } from '@hina-ui/react'

export default function Demo() {
  return (
    <Panel
      title="公开资料"
      description="这些信息会显示在你的个人页上，所有人可见。"
      className="w-96"
    >
      <Switch>显示收藏列表</Switch>
    </Panel>
  )
}

tsx

无内边距的正文

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

成员

星见书音

管理员

偷瞄

成员

玻璃

成员

import { Avatar, Inline, Panel, Stack, Text } from '@hina-ui/react'

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

export default function Demo() {
  return (
    <Panel title="成员" count={members.length} padded={false} className="w-96">
      <Stack gap="none" align="stretch" className="divide-line divide-y">
        {members.map(member => (
          <Inline key={member.name} gap="sm" align="center" className="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>
  )
}

tsx

标题层级

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

设置

通知

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

隐私

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

import { Heading, Panel, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="md" className="w-96">
      <Heading level={2} size="lg">
        设置
      </Heading>
      <Panel title="通知" level={3}>
        <Text>这块面板嵌在「设置」之下，标题降为三级。</Text>
      </Panel>
      <Panel title="隐私" level={3}>
        <Text>同一层级的面板用同一级标题。</Text>
      </Panel>
    </Stack>
  )
}

tsx

API

Props

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

内容属性

属性	说明
`children`	正文
`icon`	标题前的图标
`title`	标题内容
`description`	说明内容
`actions`	标题行末尾的操作

最近活动

用法