108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import { Badge, Card, Icon, IconButton, Space } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
export function Cards() {
|
|
return (
|
|
<Section
|
|
id="cards"
|
|
title="卡片"
|
|
api="Card"
|
|
desc="白色容器 + 1px 细边 + 极轻阴影，是页面里的基本承载单位。Card 只负责容器，标题栏、角标、操作区由使用方组合。"
|
|
>
|
|
<Demo
|
|
title="基础用法"
|
|
desc="默认 md 内边距（20px）。放在白底页面上时，靠 1px 描边而不是阴影区分边界，和主题一致。"
|
|
muted
|
|
layout="column"
|
|
code={`<Card>
|
|
<p>卡片内容</p>
|
|
</Card>`}
|
|
>
|
|
<Card>
|
|
<Space direction="column" gap="sm" align="start">
|
|
<strong style={{ fontWeight: 500 }}>常用推荐</strong>
|
|
<span style={{ color: 'var(--su-text-muted)' }}>
|
|
卡片是最小布局单元，内容完全由使用方决定。
|
|
</span>
|
|
</Space>
|
|
</Card>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="内边距"
|
|
desc="padding=none 用于封面贴边的卡片；sm 用于紧凑列表；lg 用于详情页大块内容。"
|
|
code={`<Card padding="none">…</Card>
|
|
<Card padding="sm">…</Card>
|
|
<Card padding="lg">…</Card>`}
|
|
>
|
|
<Card padding="sm">
|
|
<span style={{ color: 'var(--su-text-muted)' }}>sm · 12px</span>
|
|
</Card>
|
|
<Card padding="md">
|
|
<span style={{ color: 'var(--su-text-muted)' }}>md · 20px</span>
|
|
</Card>
|
|
<Card padding="lg">
|
|
<span style={{ color: 'var(--su-text-muted)' }}>lg · 24px</span>
|
|
</Card>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="可点击卡片"
|
|
desc="hoverable 只加深阴影，不改变尺寸，避免列表在悬停时抖动。"
|
|
code={`<Card hoverable>整张卡片可点击</Card>`}
|
|
>
|
|
<Card hoverable padding="sm">
|
|
<span style={{ color: 'var(--su-text-muted)' }}>把鼠标放上来</span>
|
|
</Card>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="组合出标题栏"
|
|
desc="卡片本身不带标题栏；色条 + 标题 + 角标 + 更多按钮是一组可复用的「分区头部」，这里用基础组件拼出来。"
|
|
muted
|
|
layout="column"
|
|
code={`<Card>
|
|
<Space justify="between">
|
|
<Space gap="md">
|
|
<span style={{ width: 4, height: 16, background: 'var(--su-color-primary)' }} />
|
|
<strong>常用站点</strong>
|
|
<Badge count={18} />
|
|
</Space>
|
|
<IconButton label="查看全部" icon={<Icon name="more_3_line" />} />
|
|
</Space>
|
|
…
|
|
</Card>`}
|
|
>
|
|
<Card>
|
|
<Space justify="between">
|
|
<Space gap="md">
|
|
<span
|
|
style={{
|
|
width: 4,
|
|
height: 16,
|
|
borderRadius: 2,
|
|
backgroundColor: 'var(--su-color-primary)',
|
|
}}
|
|
/>
|
|
<strong style={{ fontWeight: 500 }}>常用站点</strong>
|
|
<Badge count={18} />
|
|
</Space>
|
|
<IconButton label="查看全部" icon={<Icon name="more_3_line" />} />
|
|
</Space>
|
|
</Card>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'as', type: "'div' | 'section' | 'article' | 'aside'", defaultValue: "'div'", desc: '渲染标签，按语义选' },
|
|
{ name: 'padding', type: "'none' | 'sm' | 'md' | 'lg'", defaultValue: "'md'", desc: '内边距档位' },
|
|
{ name: 'hoverable', type: 'boolean', defaultValue: 'false', desc: '悬停加深阴影' },
|
|
{ name: 'className / style', type: 'string / CSSProperties', desc: '布局微调，例如绝对定位角标' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|