跳转到内容

徽章

要显示小段信息,例如状态或类别,请使用 <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" />
预览
  • 注释
  • 成功
  • 提示
  • 注意
  • 危险

使用 size 属性来控制徽章文本的大小。

import { Badge } from '@astrojs/starlight/components';
- <Badge text="" size="small" />
- <Badge text="更新更强" size="medium" />
- <Badge text="更新更强更逼格" size="large" />
预览
  • 更新更强
  • 更新更强更逼格

通过使用任何其他 <span> 属性(例如带有自定义 CSS 的 classstyle)来自定义徽章。

import { Badge } from '@astrojs/starlight/components';
<Badge text="自定义" variant="success" style={{ fontStyle: 'italic' }} />
预览
自定义

实现: Badge.astro

<Badge> 组件接受以下属性,以及所有 其他的 <span> 属性

必要属性
类型: string

要在徽章中显示的文本内容。

类型: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
默认值: 'default'

要使用的徽章颜色变体:note(蓝色)、tip(紫色)、danger(红色)、caution(橙色)、success(绿色)或 defaul(主题强调色)。

类型: 'small' | 'medium' | 'large'

定义要显示的徽章的大小。