网站
Music - 音乐展示
精选录音、曲目行与播放列表集合。
用法
什么时候用它
展示传入的收听数据和播放控件，无需绑定某个音乐服务。
来自@misoto22/folio/website
import { MediaListRow } from '@misoto22/folio/website'说明
带排名的录音或艺术家条目，由应用的统一播放器控制。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
曲目信息与预览状态
录音信息和预览状态由应用的播放器通过属性传入。这个示例只切换可见状态，不会加载或播放音频。
Artwork unavailable
Selected recording
Morning light
The Field Ensemble
0:423:00
1
Morning light
The Field Ensemble3:00
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
MusicFeature
播放中、最近播放和不可用的录音使用相同的精选媒体布局。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| artworkFallback必填 | string | — | |
| label必填 | string | — | |
| title必填 | ReactNode | — | |
| action | ReactNode | — | |
| artwork | ReactNode | — | |
| description | ReactNode | — | |
| live | boolean | false | — |
| notice | string | — | |
| progress | { label: string; value: number; max: number; currentLabel: string; endLabel: string } | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MediaCollectionCard
播放列表、专辑或其他媒体集合，提供一个明确的预览操作。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| preview必填 | MediaPreviewAction | — | |
| title必填 | ReactNode | — | |
| artwork | ReactNode | — | |
| description | string | null | — | |
| metadata | ReactNode | — | |
| tag | string | null | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MusicSection
媒体列表的标题、说明与集合布局。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| title必填 | string | — | |
| caption | string | — | |
| layout | 'list' | 'collections' | 'list' | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。