跳转到内容
Starlight
Filters

    徽章

    要显示小段信息，例如状态或类别，请使用 <Badge> 组件。

    预览
    新

    导入

    Section titled “导入”
    import { Badge } from '@astrojs/starlight/components';

    用法

    Section titled “用法”

    使用 <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" />
    预览
    • 注释
    • 成功
    • 提示
    • 注意
    • 危险

    使用不同的尺寸

    Section titled “使用不同的尺寸”

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

    import { Badge } from '@astrojs/starlight/components';
    

    - <Badge text="新" size="small" />
    - <Badge text="更新更强" size="medium" />
    - <Badge text="更新更强更逼格" size="large" />
    预览
    • 新
    • 更新更强
    • 更新更强更逼格

    自定义徽章

    Section titled “自定义徽章”

    通过使用任何其他 <span> 属性（例如带有自定义 CSS 的 class 或 style）来自定义徽章。

    import { Badge } from '@astrojs/starlight/components';
    

    <Badge text="自定义" variant="success" style={{ fontStyle: 'italic' }} />
    预览
    自定义

    <Badge> 的属性

    Section titled “<Badge> 的属性”

    实现： Badge.astro

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

    text

    Section titled “text”

    必要属性
    类型： string

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

    variant

    Section titled “variant”

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

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

    size

    Section titled “size”

    类型： 'small' | 'medium' | 'large'

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