Status and Media

状态与媒体

These helpers cover small status affordances and media output, plus the shared color tokens used across buttons, badges, alerts, and links.

这些辅助类型覆盖小型状态提示、媒体展示，以及按钮、徽章、提示框和链接共用的颜色常量。

paw.Alertpaw.Badgepaw.Iconpaw.Img

Covered APIs

涵盖 API

API 接口	Description 说明
`Alert`	Contextual message box for inline feedback. 用于行内反馈的上下文提示框。
`Badge`	Small pill-style status label. 小型胶囊样式状态标签。
`Icon`	Bootstrap icon helper. Bootstrap 图标辅助类型。
`Img`	Image helper with width, height, style, and circle support. 支持宽高、样式和圆形裁切的图片辅助类型。
`ColorBodyEmphasis`	Default text color token used by ordinary links. 普通文本链接默认使用的文字颜色常量。
`ColorPrimary .. ColorDark`	Context color tokens for filled or text-backed widgets. 用于实色或带文本背景组件的上下文颜色常量。
`ColorPrimaryOutline .. ColorDarkOutline`	Outline-style button color tokens. 描边按钮风格的颜色常量。

Minimal Example: Inline status helpers

最小示例：行内状态辅助类型

Alerts, badges, and icons are lightweight enough to use throughout normal layouts and tables.

Alert、Badge 和 Icon 足够轻量，适合贯穿普通布局和表格使用。

Paw ships small display helpers for common state messaging.

Paw 提供了适合常见状态提示的小型展示辅助类型。

HealthyQueuedBlocked

paw.Alert{
	Color: paw.ColorPrimary,
	Body:  paw.String("Paw ships small display helpers."),
}

paw.Badge{Text: "Healthy", Color: paw.ColorSuccess}
paw.Icon("info-circle-fill")

Advanced Example: Images and color tokens

进阶示例：图片与颜色常量

Color tokens are just string constants, so the same palette works across buttons, badges, and other widgets.

颜色 token 本质上只是字符串常量，因此同一套配色可以复用到按钮、徽章和其他组件上。

Img

图片

Color tokens

颜色常量

Primary Success Danger

outline-primary outline-dark

Default link color

paw.Img{Src: "/assets/meme_ai.jpg", Width: 160}
paw.Img{Src: "/assets/meme_ai.jpg", Width: 96, Height: 96, Circle: true}

paw.Link{Name: "Primary"}.Button().Primary()
paw.Link{Name: paw.ColorPrimaryOutline, Color: paw.ColorPrimaryOutline}.Button()

Notes and Related Docs

说明与相关文档

Notes

说明

Img defaults to max-width:100%, so it expands to the available width unless you also set Width or Height.

Img 默认使用 max-width:100%，因此除非你额外设置 Width 或 Height，否则它会按可用宽度扩展。

Regular text links default to ColorBodyEmphasis; button-style links default to ColorPrimary unless you pick another token.

普通文本链接默认使用 ColorBodyEmphasis；按钮式链接若未显式指定，则默认使用 ColorPrimary。

Notes

Related Pages