组件

OneCard

OneCard 将标题、主体与操作区域组织为语义化 section。

default 主体内容

查看代码收起代码

import { createComponent } from '@geektech/tsone';
import { OneButton, OneCard } from '@geektech/one';

createComponent(OneCard, { title: '项目概览' }, [
  { tag: 'p', children: ['卡片内容'] },
  { component: OneButton, slot: 'footer', children: ['继续'] },
]);

插槽与优先级

带 slot: 'header' 的显式 header 插槽优先于 title。无 slot 的 children 进入 default 主体，带 slot: 'footer' 的节点进入 footer；未提供 footer 时不会渲染空区域。

import { createComponent } from '@geektech/tsone';
import { OneButton, OneCard } from '@geektech/one';

createComponent(OneCard, { title: '后备标题' }, [
  { tag: 'strong', slot: 'header', children: ['显式标题'] },
  { tag: 'p', children: ['default 内容'] },
  { component: OneButton, slot: 'footer', children: ['继续'] },
]);

API

OneCard 属性
名称	签名	说明
`title`	`title?: string`	没有 header 插槽时显示的标题。
`children`	`children?: Array<VNode \| string>`	默认内容和命名插槽节点。

OneCard 插槽
名称	签名	说明
`header`	`Array<VNode & { slot: 'header' }>`	标题区域，优先于 title。
`default`	`Array<VNode \| string>`	卡片主体内容。
`footer`	`Array<VNode & { slot: 'footer' }>`	可选底部操作区域。