网站
Timeline - 时间线
职业经历、个人介绍与按时间排列的条目。
用法
什么时候用它
用传入的内容展示带日期的工作、教育经历和个人背景。
来自@misoto22/folio/website
import { Timeline } from '@misoto22/folio/website'说明
有序集合的展示框架，不管理排序或业务数据。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
带日期的经历
时间线条目保留传入的日期、组织和辅助信息。应用在渲染之前决定排列顺序和日期格式。
Experience
1 role- Period
- 2023 — present
- Location
- Remote
Product designer
- Designing practical tools for research and publishing.
- Working with small teams from prototype to delivery.
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
RecordSection
具名记录分区。应用提供时间顺序，组件不会重新排序。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| headingId必填 | string | — | |
| title必填 | string | — | |
| count | string | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
CareerRecord
一个带日期的条目，可用于职位、学历或其他时间记录。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| description必填 | string[] | — | |
| location必填 | string | — | |
| locationLabel必填 | string | — | |
| organization必填 | ReactNode | — | |
| period必填 | string | — | |
| periodLabel必填 | string | — | |
| tags必填 | string[] | — | |
| tagsLabel必填 | string | — | |
| title必填 | string | — | |
| currentLabel | string | — | |
| mark | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ProfileSection
个人资料分区遵循相邻分区相同的标题和间距约定。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| headingId必填 | string | — | |
| title必填 | string | — | |
| description | string | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ProfileNarrative
简短介绍包含摘录，并在旁边展示更完整的叙述。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| headingId必填 | string | — | |
| paragraphs必填 | string[] | — | |
| pull必填 | string | — | |
| title必填 | string | — | |
| action | ReactNode | — |
ProfileSkills
技能标签和适配主题的图形，由应用的内容适配层提供。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| groups必填 | { id: string; title: string; items: ProfileSkill[] }[] | — |
ProfileInterests
一组简短的兴趣或实践领域。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | { id: string; title: string; description: string }[] | — |
ProfileFigure
忠于原图的个人照片展示，保留传入图片的宽高比。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| caption | string | — |
TimelineItem
独立的条目容器，让动画遵循共用的 data-motion 设置。
这个组件没有自己的属性。