130 lines
5.2 KiB
TypeScript
130 lines
5.2 KiB
TypeScript
import { Paragraph, Space, Text, Title } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Typographies() {
|
||
return (
|
||
<Section
|
||
id="typography"
|
||
title="排版"
|
||
api="Title / Text / Paragraph"
|
||
desc="把字号、字重、文字层级收进三个组件；页面不再各写 font-size。字号阶梯来自参考站实测：13 / 14 / 16 / 18 / 24，正文（Paragraph）默认 16/24。"
|
||
>
|
||
<Demo
|
||
title="标题层级"
|
||
desc="level 决定字号并输出对应的 h1–h4；要换语义标签时传 as。组件不带外边距，间距交给 Space。"
|
||
layout="column"
|
||
code={`<Title level={1}>页面标题</Title>
|
||
<Title level={2}>区块标题</Title>
|
||
<Title level={3}>卡片标题</Title>
|
||
<Title level={4}>小节标题</Title>`}
|
||
>
|
||
<Title level={1}>页面标题 24/32</Title>
|
||
<Title level={2}>区块标题 18/26</Title>
|
||
<Title level={3}>卡片标题 16/24</Title>
|
||
<Title level={4}>小节标题 14/22</Title>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="文字层级与尺寸"
|
||
desc="tone 控制颜色层级（main → secondary → sub → muted），size 控制字号；strong 是主题的 500 字重，truncate 做单行省略。"
|
||
layout="column"
|
||
code={`<Text tone="main">主文字</Text>
|
||
<Text tone="secondary">次级文字</Text>
|
||
<Text tone="sub">说明文字</Text>
|
||
<Text tone="muted">占位文字</Text>
|
||
|
||
<Text size="xs">12</Text>
|
||
<Text size="sm">13</Text>
|
||
<Text size="md">14</Text>
|
||
<Text size="base">16</Text>
|
||
<Text size="lg">18</Text>`}
|
||
>
|
||
<Space direction="column" gap="sm" align="start">
|
||
<Text tone="main">主文字：标题、正文重点</Text>
|
||
<Text tone="secondary">次级文字：默认段落</Text>
|
||
<Text tone="sub">说明文字：摘要、描述</Text>
|
||
<Text tone="muted">占位文字：时间、元信息</Text>
|
||
</Space>
|
||
|
||
<Space gap="lg" wrap>
|
||
<Text size="xs">12 角标</Text>
|
||
<Text size="sm">13 标签</Text>
|
||
<Text size="md">14 控件</Text>
|
||
<Text size="base">16 正文</Text>
|
||
<Text size="lg">18 标题</Text>
|
||
</Space>
|
||
|
||
<Space gap="lg" wrap>
|
||
<Text strong>500 加粗</Text>
|
||
<Text truncate style={{ maxWidth: 180 }}>
|
||
单行截断：这一行文字太长时会在末尾显示省略号，不会换行
|
||
</Text>
|
||
</Space>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="段落与行数截断"
|
||
desc="文章摘要常用 2–3 行截断；lines 用 -webkit-line-clamp 实现，不破坏文本可选中。"
|
||
layout="column"
|
||
code={`<Paragraph>正文段落，默认 16/24、次级颜色。</Paragraph>
|
||
<Paragraph lines={2}>两行后省略……</Paragraph>`}
|
||
>
|
||
<Paragraph>
|
||
组件只负责排版：字号、行高、颜色都来自令牌。段落之间不要用 <code>margin</code>，
|
||
放进 <code>Space</code> 里控制间距，这样换页面时节奏是一致的。
|
||
</Paragraph>
|
||
<Paragraph lines={2}>
|
||
这一段的文字比较长，用来演示两行截断：用 -webkit-line-clamp 做视觉截断，
|
||
文本本身仍然完整保留在 DOM 里，复制、搜索、屏幕阅读器都能拿到全文，只是超出两行后不再显示。
|
||
</Paragraph>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="字重"
|
||
desc="库内置 400 / 500 / 600 / 700 四档；默认 500，参考站的标题是 600，用 weight='semibold'。"
|
||
layout="column"
|
||
code={`<Title level={3} weight="medium">默认 500</Title>
|
||
<Title level={3} weight="semibold">600（参考站标题）</Title>
|
||
<Title level={3} weight="strong">700（强调）</Title>`}
|
||
>
|
||
<Title level={3} weight="medium">
|
||
默认 500
|
||
</Title>
|
||
<Title level={3} weight="semibold">
|
||
600（参考站标题）
|
||
</Title>
|
||
<Title level={3} weight="strong">
|
||
700（强调）
|
||
</Title>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'level', type: '1 | 2 | 3 | 4', defaultValue: '2', desc: '字号档位，默认输出 h1–h4' },
|
||
{ name: 'as', type: "'h1' | 'h2' | 'h3' | 'h4' | 'div'", desc: '换语义标签' },
|
||
{ name: '…rest', type: 'HTMLAttributes', desc: '透传原生属性' },
|
||
]}
|
||
/>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'tone', type: "'main' | 'secondary' | 'sub' | 'muted'", defaultValue: "'main'", desc: '文字层级' },
|
||
{ name: 'size', type: "'xs' | 'sm' | 'md' | 'base' | 'lg'", defaultValue: "'md'", desc: '12 / 13 / 14 / 16 / 18' },
|
||
{ name: 'strong', type: 'boolean', defaultValue: 'false', desc: '500 字重' },
|
||
{ name: 'truncate', type: 'boolean', defaultValue: 'false', desc: '单行省略' },
|
||
{ name: 'as', type: "'span' | 'p' | 'div'", defaultValue: "'span'", desc: '语义标签' },
|
||
]}
|
||
/>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'tone', type: "'main' | 'secondary' | 'sub'", defaultValue: "'sub'", desc: '文字层级' },
|
||
{ name: 'lines', type: 'number', desc: '最多显示几行，超出省略' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|