网站
Media - 影像集合
照片集合、灯箱、图片详情与地图控件。
用法
什么时候用它
来自@misoto22/folio/website
import { MediaMasthead } from '@misoto22/folio/website'说明
图片集合的简洁开场，位于控件和作品之前。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
照片集合
图库接收链接和图片插槽，同时保留每张作品的方向。示意图代替应用提供的照片，并保留描述清楚的替代文本。
照片详情
媒体详情保留应用提供的返回链接，并在浏览器子像素取整后仍维持可测得的触控尺寸。
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
PhotographFeature
将照片与编辑式介绍组合展示，保留原图比例。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| image必填 | ReactNode | — | |
| title必填 | ReactNode | — | |
| action | ReactNode | — | |
| caption | ReactNode | — | |
| description | ReactNode | — | |
| eyebrow | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaCollection
页面级图库组合；应用负责筛选和内容集合。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| masthead必填 | ReactNode | — | |
| collectionId | string | — | |
| controls | ReactNode | — | |
| footer | ReactNode | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaGallery
用齐平的展示框对齐不同比例的图片，同时保留作品完整画面。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children | ReactNode | — | |
| emptyAction | ReactNode | — | |
| emptyTitle | ReactNode | 集合可能没有内容时，提供本地化的空状态文字。 |
同时接受 HTMLAttributes<HTMLUListElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaGalleryItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactElement | 包含图片的应用链接。组件包负责作品的展示布局。 | |
| title必填 | ReactNode | — | |
| index | ReactNode | — | |
| location | ReactNode | — | |
| orientation | 'portrait' | 'landscape' | 'square' | — |
同时接受 Omit<HTMLAttributes<HTMLLIElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaGallerySkeleton
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| count | number | 6 | — |
MediaDetailLayout
竖图与说明并排展示，横图以通栏画面开场。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| backLink必填 | ReactElement | — | |
| media必填 | ReactNode | — | |
| notesLabel必填 | string | — | |
| orientation必填 | 'portrait' | 'landscape' | 'square' | — | |
| title必填 | ReactNode | — | |
| titleId必填 | string | — | |
| actions | ReactNode | — | |
| category | ReactNode | — | |
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 1 | 当页面组合嵌入另一份文档时，指定标题层级。 |
| index | ReactNode | — | |
| light | ReactNode | — | |
| location | ReactNode | — | |
| metadata | ReactNode | — | |
| pager | ReactNode | — | |
| related | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaMetadata
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | DescriptionListItem[] | — |
同时接受 HTMLAttributes<HTMLDListElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaPager
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| next | ReactNode | — | |
| previous | ReactNode | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaPagerItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| direction必填 | 'previous' | 'next' | — | |
| label必填 | ReactNode | — | |
| link必填 | ReactElement | — | |
| title必填 | ReactNode | — | |
| image | ReactNode | — |
MediaThumbnailStrip
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| heading必填 | ReactNode | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaThumbnail
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactElement | — |
MediaLightNote
应用提供观察内容和格式化标签；此组件仅负责展示。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | ReactNode | — | |
| lines必填 | MediaLightNoteLine[] | — |
MediaMapSection
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| map必填 | ReactNode | — | |
| preview必填 | ReactNode | — | |
| title必填 | ReactNode | — | |
| aliasId | string | 可选的旧版锚点，由应用定义和命名。 | |
| hint | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaMapFrame
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| compact | boolean | false | — |
| hint | ReactNode | — | |
| label | ReactNode | — | |
| navigation | ReactNode | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaMapNavigation
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onZoomIn必填 | () => void | — | |
| onZoomOut必填 | () => void | — | |
| zoomInLabel必填 | string | — | |
| zoomOutLabel必填 | string | — |
MediaMapCanvas
具有明确尺寸的地图容器。地图创建、主题和地理计算保留在应用中。
同时接受 ComponentPropsWithRef<'div'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaMapPreview
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title必填 | ReactNode | — | |
| action | ReactNode | — | |
| children | ReactNode | — | |
| coordinates | ReactNode | — | |
| image | ReactNode | — | |
| place | ReactNode | — |
MediaMapAreaList
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | MediaMapArea[] | — | |
| onValueChange必填 | (value: string) => void | — | |
| value | string | — |
MediaMapMarker
适用于应用地图门户的 44px 标记，支持键盘操作。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| active | boolean | false | — |
同时接受 Omit<Extract<ButtonProps, { href?: undefined }>, 'children' | 'iconOnly'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaMapPin
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| active | boolean | false | — |
MediaMapSkeleton
这个组件没有自己的属性。
MediaLightbox
图片及其受控全屏弹窗，打开时焦点限制在弹窗内。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| aspectRatio必填 | number | 原始宽度除以高度；尺寸无效时使用安全的回退值。 | |
| closeLabel必填 | string | — | |
| media必填 | ReactNode | — | |
| onOpenChange必填 | (open: boolean) => void | — | |
| open必填 | boolean | — | |
| title必填 | string | — | |
| triggerLabel必填 | string | — | |
| expandedMedia | ReactNode | media | — |