Badge

为状态或数量提供紧凑标记。

实时预览

正在加载预览…

参数配置

文字 label颜色 color尺寸 size样式 variant图标 icon方形 square否

全部字段 8

BadgeOptions

Color

Variant

Size

Square

Leading

Trailing

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
nui.Badge(c.Key("badge"), t, "Ready", nui.BadgeOptions{Color: nui.ColorDefault, Size: nui.SizeDefault, Variant: nui.VariantDefault, Leading: nil, Square: false}).AlignSelf(ui.Start)

使用说明

调整文字、图标、颜色和样式，比较适合状态说明与数量提示的效果。Badge 用来呈现信息；需要执行操作时可使用 Button。

API 参考

Badge

源码

func Badge(c *ui.Context, t Theme, label string, opts BadgeOptions) ui.Element

BadgeOptions

源码

type BadgeOptions struct {
	Color             Color
	Variant           Variant
	Size              Size
	Square            bool
	Leading, Trailing *ui.SVG
	Decoration
}

字段	类型	说明
`Color`	`Color` Go 零值: `ColorDefault`	语义颜色；默认值继承主题或组件配色。
`Variant`	`Variant` Go 零值: `VariantDefault`	组件外观样式，支持范围取决于组件。
`Size`	`Size` Go 零值: `SizeDefault`	组件尺寸；默认值继承主题或组件尺寸。
`Square`	`bool` Go 零值: `false`	使用适合方形内容的间距。
`Leading`	`*ui.SVG` Go 零值: `nil`	内容前方的 SVG 图标。
`Trailing`	`*ui.SVG` Go 零值: `nil`	内容后方的 SVG 图标。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。