网站
SiteShell - 页面框架
页面地标、页脚导航分组与共用章节标题。
用法
什么时候用它
通过应用传入的链接和内容构建文档的整体框架。
来自@misoto22/folio/website
import { SiteShell } from '@misoto22/folio/website'说明
包含一个主内容地标、键盘跳转链接和出版物共用框架。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
页脚目的地
出版物页脚将传入的链接组织为具名导航区域。应用负责每个目的地，组件负责间距和层级。
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
SiteFooter
简洁的页脚，包含具有语义且独立命名的目的地分组。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| brand必填 | ReactNode | — | |
| copyright必填 | ReactNode | — | |
| groups必填 | SiteFooterGroup[] | — | |
| colophon | ReactNode | — | |
| contact | ReactNode | — | |
| description | ReactNode | — |
SiteSectionHeading
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title必填 | string | — | |
| subtitle | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
SiteLink
为应用路由链接提供样式，不决定链接目的地。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactElement | — | |
| className | string | — | |
| variant | 'text' | 'back' | 'meta' | 'text' | — |