Skip to main content

内容展示

参考资料​

效果展示​

Llailai维护者

身份与标记​

组件必要属性可选属性
Avatarname、altsrc、size，默认尺寸 36 px
BrandlogoSrc、namelogoAlt，默认空字符串
Badge无children、icon、count、active、hoverable、className
IconBlock无icon、variant、size、iconSize、className、children

Avatar 在没有图片时显示姓名首字母；alt 应描述头像用途。Brand 由应用提供标志地址与名称。IconBlock.variant 为 accent 或 muted。

Badge.hoverable 只提供悬停外观，不会把徽标变成按钮；需要点击操作时使用按钮或链接。图标名使用 Iconify 标识，例如 lucide:book-open，图标数据可能通过网络加载。

窗口​

TrafficLights 显示装饰性的窗口圆点；WindowBar 提供标题栏，可传 children、className。需要标签切换与折叠时使用 WindowPanel：

368 Btsx
import { WindowPanel } from '@lailai0916/ui';

export function ResultWindow() {
  return (
    <WindowPanel
      collapseLabel="收起结果"
      expandLabel="展开结果"
      expandTo="last"
      tabs={[
        { label: '结果', content: <p>转换成功。</p> },
        { label: '原始数据', content: <pre>{'{"ok":true}'}</pre> },
      ]}
    />
  );
}

每个标签含 label、content；bare 可移除默认正文内边距。toolbar(activeIndex, open) 可以提供附加工具。expandTo 为 first 或 last，决定重新展开时选中哪一页。

文章与仓库​

组件主要属性用途
MDTitletitle、description、className接受 React 内容的文章标题区
Quotechildren、author、source、className引用正文及明确的署名来源
GitHubrepo、className公开 GitHub 仓库卡片
EmptyStatetitle、description；可选 icon、action有说明与后续操作的空状态
PaginatorariaLabel；可选 prevItem、nextItem、className前后项导航

Quote 的作者与来源应真实；GitHub.repo 使用 owner/repo 格式，例如 lailai0916/ui。GitHub API 失败或限流时，卡片显示本地化错误，不应传入访问令牌。

Paginator 每个导航项包含 title、permalink、label。组件只渲染给定链接，排序、页数和当前页由应用决定。

360 Btsx
import { Paginator } from '@lailai0916/ui';

export function GuideNavigation() {
  return (
    <Paginator
      ariaLabel="文档导航"
      prevItem={{ title: '数据展示', permalink: '/docs/project/ui/data-display', label: '上一篇' }}
      nextItem={{ title: '主题定制', permalink: '/docs/project/ui/theming', label: '下一篇' }}
    />
  );
}

数据提示​

Tooltip 是图表使用的提示内容层，接受 leftPct、原生 div 属性和 children，可组合 Tooltip.Label 与 Tooltip.Value。它不包含悬停触发器、门户或自动避让；显示时机、定位容器和交互均由调用方控制。

361 Btsx
import { Tooltip } from '@lailai0916/ui';

export function ChartHint({ visible }: { visible: boolean }) {
  return (
    <div style={{ position: 'relative' }}>
      {visible && (
        <Tooltip leftPct={50}>
          <Tooltip.Label>星期一</Tooltip.Label>
          <Tooltip.Value>12 次访问</Tooltip.Value>
        </Tooltip>
      )}
    </div>
  );
}

完整图表优先使用 Chart 或 Donut，它们已组织图形与提示层。