网站
Portfolio - 作品介绍
编辑式个人介绍、精选图片、内容条目与提问卡片。
用法
什么时候用它
用传入的文字、图片和操作构建个人或工作室首页。
来自@misoto22/folio/website
import { Portfolio } from '@misoto22/folio/website'说明
个人介绍与一张精选照片，内容由应用提供。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
个人介绍
简短传记与辅助索引组成同一块介绍区域。文字、基本资料和分类数量都由应用传入。
Designer and writer exploring the everyday tools that help people think.
Independent practice
Working across places
Start by paying attention.
Selected work
- Essays
- 12
- Projects
- 4
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
PortfolioImage
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactElement | — | |
| index | string | — | |
| metadata | ReactNode | — | |
| natural | boolean | false | 保留传入图片的原始比例，不裁切图片。 |
| size | 'feature' | 'tile' | 'thumbnail' | 'tile' | — |
| title | ReactNode | — |
PortfolioRecord
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title必填 | ReactNode | — | |
| action | ReactNode | — | |
| context | ReactNode | — | |
| description | ReactNode | — | |
| image | ReactNode | — | |
| metadata | ReactNode | — |
PortfolioList
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| label | string | — | |
| variant | 'records' | 'frames' | 'thumbnails' | 'records' | — |
PortfolioCategories
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | { id: string; label: ReactNode; count: number }[] | — | |
| label必填 | string | — |
QuestionCard
简洁的提问入口，引导用户进入应用管理的对话。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| description必填 | string | — | |
| examples必填 | string[] | — | |
| examplesLabel必填 | string | — | |
| label必填 | string | — | |
| onChange必填 | (value: string) => void | — | |
| onSubmit必填 | (value: string) => void | — | |
| placeholder必填 | string | — | |
| submitLabel必填 | string | — | |
| title必填 | ReactNode | — | |
| value必填 | string | — | |
| disabled | boolean | — | |
| inputId | string | — | |
| maxLength | number | — |