徽章
要显示小段信息,例如状态或类别,请使用 <Badge>
组件。
新
import { Badge } from '@astrojs/starlight/components';
使用 <Badge>
组件显示徽章,并将要显示的内容传递给 <Badge>
组件的 text
属性。
默认情况下,徽章将使用你网站主题的强调色。
要使用徽章内置的某一种颜色,请将 variant
属性设置为支持的值之一。
import { Badge } from '@astrojs/starlight/components';
- <Badge text="注释" variant="note" />- <Badge text="成功" variant="success" />- <Badge text="提示" variant="tip" />- <Badge text="注意" variant="caution" />- <Badge text="危险" variant="danger" />
- {% badge text="注释" variant="note" /%}- {% badge text="成功" variant="success" /%}- {% badge text="提示" variant="tip" /%}- {% badge text="注意" variant="caution" /%}- {% badge text="危险" variant="danger" /%}
- 注释
- 成功
- 提示
- 注意
- 危险
使用不同的尺寸
Section titled “使用不同的尺寸”使用 size
属性来控制徽章文本的大小。
import { Badge } from '@astrojs/starlight/components';
- <Badge text="新" size="small" />- <Badge text="更新更强" size="medium" />- <Badge text="更新更强更逼格" size="large" />
- {% badge text="新" size="small" /%}- {% badge text="更新更强" size="medium" /%}- {% badge text="更新更强更逼格" size="large" /%}
- 新
- 更新更强
- 更新更强更逼格
通过使用任何其他 <span>
属性(例如带有自定义 CSS 的 class
或 style
)来自定义徽章。
import { Badge } from '@astrojs/starlight/components';
<Badge text="自定义" variant="success" style={{ fontStyle: 'italic' }} />
{% badge text="自定义" variant="success" style="font-style: italic;" /%}
自定义
<Badge>
的属性
Section titled “<Badge> 的属性”实现: Badge.astro
<Badge>
组件接受以下属性,以及所有 其他的 <span>
属性:
必要属性
类型: string
要在徽章中显示的文本内容。
variant
Section titled “variant”类型: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
默认值: 'default'
要使用的徽章颜色变体:note
(蓝色)、tip
(紫色)、danger
(红色)、caution
(橙色)、success
(绿色)或 defaul
(主题强调色)。
类型: 'small' | 'medium' | 'large'
定义要显示的徽章的大小。