组件库使用指南

本站基于 Ink Editorial 设计系统，以下为所有可用组件完整用法。

---

Alert 提示框

用于展示重要提示信息，支持四种类型。

用法：

import Alert from '../../components/Alert.astro';

<Alert variant="info">信息内容</Alert>
<Alert variant="success">成功内容</Alert>
<Alert variant="warning">警告内容</Alert>
<Alert variant="error">错误内容</Alert>

Props： variant — info | success | warning | error（默认 info）；title（可选标题）；dismissible（可关闭）

---

Badge 徽章

小标签，用于分类、状态标记。

默认 成功 警告 错误 信息 紫色

用法：

import Badge from '../../components/Badge.astro';

<Badge>默认</Badge>
<Badge variant="success">成功</Badge>
<Badge variant="error">错误</Badge>

Props： variant — default | success | warning | error | info | purple；size — sm | md

---

Button 按钮

主要按钮 次要按钮 轮廓按钮 幽灵按钮 小按钮 中按钮 大按钮

用法：

import Button from '../../components/Button.astro';

<Button variant="primary">主要按钮</Button>
<Button variant="outline">轮廓按钮</Button>
<Button size="sm">小按钮</Button>
<Button href="https://example.com">链接按钮</Button>

Props： variant — primary | secondary | outline | ghost；size — sm | md | lg；href（链接地址）；disabled；loading

---

Card 卡片

通用内容容器。

用法：

import Card from '../../components/Card.astro';

<Card title="标题" description="描述" />
<Card title="标题" href="/blog" variant="interactive" />
<Card variant="bordered" padding="lg">自定义内容</Card>

Props： variant — default | interactive | bordered；padding — sm | md | lg；title；description；href

---

Callout 注释块

突出显示重要注释或提示。

用法：

import Callout from '../../components/Callout.astro';

<Callout variant="note">**注意：** 内容</Callout>
<Callout variant="tip">**提示：** 内容</Callout>
<Callout variant="warn">**警告：** 内容</Callout>
<Callout variant="danger">**危险：** 内容</Callout>

Props： variant — note | tip | warn | danger（默认 note）；title（可选标题）

---

Avatar 头像

用法：

import Avatar from '../../components/Avatar.astro';

<Avatar src="/avatar.png" alt="用户名" size="md" />
<Avatar name="用户名" size="lg" />

Props： src（图片地址）；alt；name（无图片时显示首字）；size — sm | md | lg | xl

---

Tooltip 提示

鼠标悬停显示提示文字。

悬停查看提示 这是悬停提示内容

用法：

import Tooltip from '../../components/Tooltip.astro';

<Tooltip text="提示内容">触发文字</Tooltip>

Props： text 或 content — 提示文字；position — top | bottom | left | right

---

Spoiler 黑幕

遮挡剧透内容，鼠标悬停时可见。

这是黑幕遮挡内容，鼠标悬停可见 自定义颜色黑幕

用法：

import Spoiler from '../../components/Spoiler.astro';

<Spoiler>被遮挡的内容</Spoiler>
<Spoiler color="#425AEF">自定义颜色</Spoiler>

Props： color（黑幕颜色）；duration（过渡时间，默认 0.3s）

---

Strike 划掉重说

划掉旧内容并显示新内容。

错误的内容 正确的内容

这个功能 很糟糕 棒 ！

用法：

import Strike from '../../components/Strike.astro';

<Strike old="旧内容">新内容</Strike>

Props： old（划掉的旧内容，必填）

---

Quote 引用

用法：

import Quote from '../../components/Quote.astro';

<Quote author="作者名" source="来源">引用内容</Quote>

Props： author（作者）；source（出处）

---

ProgressBar 进度条

用法：

import ProgressBar from '../../components/ProgressBar.astro';

<ProgressBar value={75} label="完成度" />
<ProgressBar value={30} variant="success" />
<ProgressBar value={60} variant="striped" />

Props： value（0-100）；max（默认 100）；label；showValue（布尔）；variant — default | success | striped；size — sm | md | lg

---

StatCard 统计卡片

用法：

import StatCard from '../../components/StatCard.astro';

<StatCard value="1,234" label="访问量" />
<StatCard value="99.9%" label="可用性" variant="primary" unit="%" />

Props： value；label；unit（单位）；variant — default | primary | accent；size — sm | md | lg

---

Container 容器

限制内容宽度布局容器。

用法：

import Container from '../../components/Container.astro';

<Container>内容</Container>
<Container size="lg">宽版内容</Container>

Props： size — sm | md | lg | xl | full；padding（布尔，默认 true）

---

Divider 分割线

用法：

import Divider from '../../components/Divider.astro';

<Divider />
<Divider label="或" />

Props： orientation — horizontal | vertical；label（中间文字）

---

Skeleton 骨架屏

加载中占位效果。

用法：

import Skeleton from '../../components/Skeleton.astro';

<Skeleton width="100%" height="20px" />
<Skeleton width="60%" height="16px" rounded="md" />

Props： width；height；rounded — none | sm | md | full

---

Collapsible 折叠面板

可展开/收起的内容区域。

用法：

import Collapsible from '../../components/Collapsible.astro';

<Collapsible title="面板标题">折叠内容</Collapsible>
<Collapsible title="默认展开" defaultOpen={true}>内容</Collapsible>

Props： title；defaultOpen（布尔，默认 false）；id

---

Accordion 手风琴

多个折叠面板互斥（同时只能展开一个）。

用法：

import Accordion from '../../components/Accordion.astro';
import AccordionItem from '../../components/Accordion/Item.astro';

<Accordion>
  <AccordionItem title="标题1">内容1</AccordionItem>
  <AccordionItem title="标题2">内容2</AccordionItem>
</Accordion>

Props： Accordion: title（可选组标题）；AccordionItem: title，defaultOpen

---

Modal 弹窗

点击按钮弹出模态窗口。

打开弹窗

用法：

import Modal from '../../components/Modal.astro';

<Modal triggerText="打开弹窗">弹窗内容</Modal>
<Modal triggerText="设置" title="系统设置">内容</Modal>

Props： triggerText（触发按钮文字）；title（弹窗标题）

---

Dropdown 下拉菜单

用法：

import Dropdown from '../../components/Dropdown.astro';
import DropdownItem from '../../components/Dropdown/Item.astro';

<Dropdown trigger="菜单">
  <DropdownItem>选项一</DropdownItem>
  <DropdownItem danger>删除</DropdownItem>
</Dropdown>

Props： Dropdown: trigger（触发文字）；DropdownItem: danger（布尔），divider（布尔，分割线）

---

快速参考

组件	文件	用途	主要 Prop
Alert	Alert.astro	提示框	variant
Badge	Badge.astro	徽章	variant
Button	Button.astro	按钮	variant, size
Card	Card.astro	卡片	variant, href
Callout	Callout.astro	注释块	variant
Avatar	Avatar.astro	头像	src, name, size
Tooltip	Tooltip.astro	悬停提示	text
Spoiler	Spoiler.astro	黑幕	color
Strike	Strike.astro	划掉重说	old
Quote	Quote.astro	引用	author, source
ProgressBar	ProgressBar.astro	进度条	value, variant
StatCard	StatCard.astro	统计卡片	value, label
Container	Container.astro	布局容器	size
Divider	Divider.astro	分割线	label
Skeleton	Skeleton.astro	骨架屏	width, height
Collapsible	Collapsible.astro	折叠面板	title
Accordion	Accordion.astro	手风琴	子组件 Item
Modal	Modal.astro	弹窗	triggerText
Dropdown	Dropdown.astro	下拉菜单	trigger