Skip to content
fandhe-frontend
GitHub

Tag

fandhe-frontend-pre-styled-uitag mod が提供するスタイル済み Tag 部品です。

削除可能なラベル表示部品です。close_trigger(type="button")を組み合わせることで削除操作を持つ Tag を構成できますが、aria-label・視覚内容(×等)は呼び出し側が渡す責務です。削除操作を持たない単純なラベル表示には Badge を検討してください。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

ラベル・分類・除去可能なチップ表示。variant / size / colorPalette を組み合わせます。close-trigger は data-action 属性の出力のみを担い、実際のクリック処理は wasm 層のスコープです。

SolidSubtleOutline
TagTagTag
AccentInfoSuccessWarningDanger
Removable

Features

  • TagVariant(Solid/Subtle/Outline、crates/pre-styled-ui/src/tag.rs:34-58)で塗り方を切り替える
  • close_trigger(<button type="button">)で削除可能な Tag を構成できる(tag.rs:238-262)
  • close_trigger 自体は children/aria-label を持たないため呼び出し側が視覚内容とアクセシブルネームを渡す責務を持つ(tag.rs:231)

Anatomy

root
  label
  close-trigger

API Reference

Arguments

NameTypeDefaultDescription
variantTagVariantSubtle塗り方(tag.rs:70-82)。

Data Attributes

PartAttributeObserved Values
close-triggerdata-actionremove_tag

Examples

Removable

close_trigger を付与した削除可能な Tag の例です。

beta

Accessibility

WAI-ARIA

AttributeDescription
(呼び出し側責務)close_trigger の aria-label・視覚内容(×等)は呼び出し側が渡す責務であり、本部品自体は固有の ARIA を固定出力しない(tag.rs:231)。