Skip to main content

布局与卡片

参考资料​

效果展示​

项目概览
标题、正文与页脚共享同一个面板。
ReactTypeScriptCSS Modules
布局与业务内容可以分别维护。

页面布局​

组件主要属性行为
PageContainerchildren、width居中限制内容宽度，默认最大 1120 px
Stackchildren、gap纵向排列，默认间距 16 px
Clusterchildren、gap横向排列并换行，默认间距 12 px
PageHeaderchildren、aside标题区域与附加内容
PageTitletitle、description页面标题与说明
PageContentchildren、as、className页面正文容器，可选择元素类型

PageContainer、Stack 和 Cluster 支持原生 div 属性。width、gap 是像素数值，例如 width={960}、gap={16}。

486 Btsx
import { PageContainer, Panel, PanelBody, PanelFooter, PanelHeader, Stack } from '@lailai0916/ui';

export function ProjectPanel() {
  return (
    <PageContainer width={960}>
      <Stack gap={24}>
        <Panel>
          <PanelHeader>
            <h2>项目概览</h2>
          </PanelHeader>
          <PanelBody>应用自己的内容。</PanelBody>
          <PanelFooter>最近更新于 2026 年 9 月。</PanelFooter>
        </Panel>
      </Stack>
    </PageContainer>
  );
}

PageTitle.title 保留 HTML 字符串接口，只能使用应用自己编写的可信内容。来自用户或远程数据的标题应使用普通 React 文本元素；文章标题可以选择接受 ReactNode 的 MDTitle。

面板​

Panel 使用 tone="default" 或 tone="muted" 控制表面，feature 可强调面板。PanelHeader、PanelBody、PanelFooter 按需组合，均支持原生 div 属性。

面板不会代替语义标题，应在 PanelHeader 中使用符合页面层级的 h2、h3 等元素。只需一层内容表面时，也可以使用 Card。

卡片​

组件必要属性可选属性
Cardchildrenpadding、className、wrapperClassName、style；to 或 href
TitleCardtitle、childrenicon、description、count、padding、bodyAlign、size
LinkCardtitle，以及 to 或 hrefdescription、image、fallbackIcon、imageVariant
DataCardvalue、label、iconformat
ShareCardurl、titledescription、image

Card、LinkCard 的 to 与 href 二选一；站内导航使用 to，并通过 LaikitProvider 接入路由。链接卡片内不要再放按钮或其他链接，以免嵌套交互元素。

TitleCard.size 为 md、sm 或 plain，bodyAlign 为 top 或 bottom。卡片保留外部焦点环，铺满卡片的图片如需裁剪，应由自己的图片容器设置溢出裁剪。

449 Btsx
import { DataCard, LaikitProvider, LinkCard, Stack } from '@lailai0916/ui';

export function ProjectCards() {
  return (
    <LaikitProvider locale="zh-Hans">
      <Stack>
        <DataCard value={42} label="组件" icon="lucide:boxes" />
        <LinkCard
          title="快速开始"
          description="安装组件库并接入应用。"
          to="/docs/project/ui/getting-started"
        />
      </Stack>
    </LaikitProvider>
  );
}

DataCard.label 支持按语言选择单复数。英文使用 'Component|Components'，中文使用单一形式 '组件'，详见 框架接入。