sunzhongyi
729e6ab287
- Auto-generated sidebar from file structure - Built-in search and TOC - MDX native support with frontmatter - Removed hand-written Sidebar component - Docs now at /docs/* route (Landing/Blocks/Create/Examples unchanged) - Content in content/docs/ as MDX files
79 lines
2.4 KiB
Plaintext
79 lines
2.4 KiB
Plaintext
---
|
|
title: 媒体组件
|
|
description: Image、Figure、Video、PullQuote — 报纸版面中的视觉元素
|
|
---
|
|
|
|
## Image
|
|
|
|
基础图片组件。`display: block; width: 100%`，在 Section 栅格内通过 span 跨栏。
|
|
|
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
|---|---|---|---|
|
|
| `src` | `string` | **必填** | 图片 URL。 |
|
|
| `alt` | `string` | **必填** | 替代文本。 |
|
|
| `span` | `number` | - | 跨栏数。 |
|
|
|
|
## Figure
|
|
|
|
组合 Image + Caption + Credit 的语义容器。自动渲染 figcaption。
|
|
|
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
|---|---|---|---|
|
|
| `src` | `string` | **必填** | 图片 URL。 |
|
|
| `alt` | `string` | **必填** | 替代文本。 |
|
|
| `caption` | `string` | - | 图片说明。 |
|
|
| `credit` | `string` | - | 摄影师/来源（small-caps 渲染）。 |
|
|
| `span` | `number` | - | 跨栏数。 |
|
|
|
|
```tsx
|
|
<Figure
|
|
src="https://images.unsplash.com/photo-1495020689067-958852a7765e?w=800&h=400&fit=crop"
|
|
alt="Newspapers on a wooden table"
|
|
caption="A view of the morning editions, arranged on the newsroom table."
|
|
credit="Photograph by Roman Kraft / Unsplash"
|
|
/>
|
|
```
|
|
|
|
## Video
|
|
|
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
|---|---|---|---|
|
|
| `src` | `string` | **必填** | 视频 URL。 |
|
|
| `poster` | `string` | - | 封面图 URL。 |
|
|
| `caption` | `string` | - | 视频说明。 |
|
|
| `credit` | `string` | - | 来源。 |
|
|
| `controls` | `boolean` | `true` | 显示播放控件。 |
|
|
| `span` | `number` | - | 跨栏数。 |
|
|
|
|
Video 组件与 Figure 结构类似，包裹 `<video>` 标签并附带 caption/credit。
|
|
|
|
## PullQuote
|
|
|
|
上下双 hairline + Display 字体的拉引组件。在多栏 BodyText 内设置 `spanAllColumns` 可跨所有栏（通过 `column-span: all`）。
|
|
|
|
| 属性 | 类型 | 默认值 | 说明 |
|
|
|---|---|---|---|
|
|
| `weight` | `'High' \| 'Medium'` | `'High'` | 视觉权重。 |
|
|
| `span` | `number` | - | 在 Section 栅格内跨栏。 |
|
|
| `spanAllColumns` | `boolean` | `false` | 在多栏 BodyText 内跨所有栏。 |
|
|
| `author` | `string` | - | 引用来源。 |
|
|
| `align` | `'left' \| 'center'` | `'left'` | 文本对齐。 |
|
|
|
|
### 独立使用
|
|
|
|
```tsx
|
|
<PullQuote author="Senior Cabinet Official">
|
|
We have lobbied for this kind of clarity for the better part of a decade.
|
|
</PullQuote>
|
|
```
|
|
|
|
### 在多栏 BodyText 内跨栏
|
|
|
|
```tsx
|
|
<BodyText columns={3}>
|
|
<p>...</p>
|
|
<PullQuote spanAllColumns author="...">...</PullQuote>
|
|
<p>...</p>
|
|
</BodyText>
|
|
```
|