-
This commit is contained in:
sunzhongyi
@@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
import {
|
||||
Layout,
|
||||
Section,
|
||||
Article,
|
||||
Headline,
|
||||
Subhead,
|
||||
BodyText,
|
||||
Figure,
|
||||
PullQuote,
|
||||
} from '@newspaperui/components';
|
||||
import { Demo } from '@/components/Demo';
|
||||
import { PropsTable } from '@/components/PropsTable';
|
||||
|
||||
export default function MediaPage() {
|
||||
return (
|
||||
<Layout columns={24} maxWidth="900px" padding="2rem">
|
||||
<Section columns={24}>
|
||||
<Article span={24}>
|
||||
<Headline weight="Medium" as="h1">
|
||||
媒体组件
|
||||
</Headline>
|
||||
<Subhead weight="Medium">
|
||||
Image、Figure、Video、PullQuote — 报纸版面中的视觉元素。
|
||||
</Subhead>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
Image
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>
|
||||
基础图片组件。<code>display: block; width: 100%</code>，在 Section 栅格内通过
|
||||
span 跨栏。
|
||||
</p>
|
||||
</BodyText>
|
||||
<PropsTable
|
||||
data={[
|
||||
{ name: 'src', type: 'string', required: true, description: '图片 URL。' },
|
||||
{ name: 'alt', type: 'string', required: true, description: '替代文本。' },
|
||||
{ name: 'span', type: 'number', description: '跨栏数。' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
Figure
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>
|
||||
组合 Image + Caption + Credit 的语义容器。自动渲染 figcaption。
|
||||
</p>
|
||||
</BodyText>
|
||||
<PropsTable
|
||||
data={[
|
||||
{ name: 'src', type: 'string', required: true, description: '图片 URL。' },
|
||||
{ name: 'alt', type: 'string', required: true, description: '替代文本。' },
|
||||
{ name: 'caption', type: 'string', description: '图片说明。' },
|
||||
{ name: 'credit', type: 'string', description: '摄影师/来源（small-caps 渲染）。' },
|
||||
{ name: 'span', type: 'number', description: '跨栏数。' },
|
||||
]}
|
||||
/>
|
||||
<Demo
|
||||
title="Figure 带 caption 和 credit"
|
||||
description="使用 Unsplash 占位图演示完整效果。"
|
||||
code={`<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"
|
||||
/>`}
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</Demo>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
Video
|
||||
</Headline>
|
||||
<PropsTable
|
||||
data={[
|
||||
{ name: 'src', type: 'string', required: true, description: '视频 URL。' },
|
||||
{ name: 'poster', type: 'string', description: '封面图 URL。' },
|
||||
{ name: 'caption', type: 'string', description: '视频说明。' },
|
||||
{ name: 'credit', type: 'string', description: '来源。' },
|
||||
{ name: 'controls', type: 'boolean', default: 'true', description: '显示播放控件。' },
|
||||
{ name: 'span', type: 'number', description: '跨栏数。' },
|
||||
]}
|
||||
/>
|
||||
<BodyText weight="Low">
|
||||
<p>
|
||||
Video 组件与 Figure 结构类似，包裹 <code><video></code> 标签并附带
|
||||
caption/credit。
|
||||
</p>
|
||||
</BodyText>
|
||||
|
||||
<Headline weight="Low" as="h2">
|
||||
PullQuote
|
||||
</Headline>
|
||||
<BodyText weight="Low">
|
||||
<p>
|
||||
上下双 hairline + Display 字体的拉引组件。在多栏 BodyText 内设置
|
||||
<code>spanAllColumns</code> 可跨所有栏（通过 <code>column-span: all</code>）。
|
||||
</p>
|
||||
</BodyText>
|
||||
<PropsTable
|
||||
data={[
|
||||
{ name: 'weight', type: "'High' | 'Medium'", default: "'High'", description: '视觉权重。' },
|
||||
{ name: 'span', type: 'number', description: '在 Section 栅格内跨栏。' },
|
||||
{ name: 'spanAllColumns', type: 'boolean', default: 'false', description: '在多栏 BodyText 内跨所有栏。' },
|
||||
{ name: 'author', type: 'string', description: '引用来源。' },
|
||||
{ name: 'align', type: "'left' | 'center'", default: "'left'", description: '文本对齐。' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Demo
|
||||
title="PullQuote 独立使用"
|
||||
code={`<PullQuote author="Senior Cabinet Official">
|
||||
We have lobbied for this kind of clarity for the better part of a decade.
|
||||
</PullQuote>`}
|
||||
>
|
||||
<PullQuote author="Senior Cabinet Official">
|
||||
We have lobbied for this kind of clarity for the better part of a decade.
|
||||
</PullQuote>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="PullQuote 在多栏 BodyText 内跨栏"
|
||||
description="spanAllColumns 使 PullQuote 通过 column-span: all 跨越所有文字栏。"
|
||||
code={`<BodyText columns={3}>
|
||||
<p>...</p>
|
||||
<PullQuote spanAllColumns author="...">...</PullQuote>
|
||||
<p>...</p>
|
||||
</BodyText>`}
|
||||
>
|
||||
<BodyText columns={3}>
|
||||
<p>
|
||||
Whitehall officials confirmed late Tuesday that the long-anticipated review
|
||||
of national infrastructure funding will be tabled before the recess. The
|
||||
248-page document, drafted across three departments, recommends a
|
||||
recalibration of regional priorities and a measured shift toward rail
|
||||
electrification.
|
||||
</p>
|
||||
<PullQuote spanAllColumns author="Senior Cabinet Official">
|
||||
The most coherent strategic blueprint in a generation.
|
||||
</PullQuote>
|
||||
<p>
|
||||
Markets responded cautiously through the morning session. The pound traded
|
||||
sideways against the dollar, gilts firmed by three basis points, and the
|
||||
FTSE 100 closed marginally lower as defensive sectors absorbed the
|
||||
day’s modest outflows.
|
||||
</p>
|
||||
<p>
|
||||
In Manchester, regional officials greeted the announcement with measured
|
||||
optimism. The mayor’s office is expected to issue a formal response by
|
||||
week’s end, focusing on commitments to the trans-Pennine corridor.
|
||||
</p>
|
||||
</BodyText>
|
||||
</Demo>
|
||||
</Article>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user