CSS: badge ​

.instui-badge — ターゲットの角に配置される小さなカウントまたはステータスのドット。

バッジをターゲットの上に配置するには、両方を.instui-badge-wrapper（位置のアンカー）でラップし、バッジを-placement-*修飾子で固定してください。

Source: badge.css

使用法 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/badge.css";

デモ ​

例 ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

構造 ​

バッジは単独でインライン表示されるか、ターゲット上にアンカーするオプションのinstui-badge-wrapperの内側で表示されます。

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾子 ​

修飾子説明
.-color-danger注意／エラーのカウント。
.-color-inverseOn-dark: a light chip with dark text.
.-color-successポジティブ／完了のカウント。
.-placement-bottom-end下端のコーナーに位置。
.-placement-bottom-start下始端のコーナーに位置。
.-placement-end-center終端の辺の中央に位置。
.-placement-start-center始端の辺の中央に位置。
.-placement-top-end上端のコーナーに位置。
.-placement-top-start上始端のコーナーに位置。
.-pulse脈打つ注意リング。
.-standaloneインラインでレンダリングされ、ターゲットの角の上には配置されません。
.-type-notificationカウントなしのドットのみ。

疑似要素 ​

疑似要素説明
::beforeバッジのアクセント色で描かれる脈打つ注意リング（-pulseバリアント）。

カスタムプロパティ ​

プロパティ型デフォルト説明
--pantoken-badge-accent<color>—チップの塗りつぶし；各-color-*バリアントとパルスリングはここから色を取得します。
--pantoken-badge-text<color>—テキストの色。アクセントに合わせて可読性を保ちます。

アニメーション ​

アニメーション説明
pantoken-badge-pulseパルスリングのアニメーション。

使用トークン ​

Token型値
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

関連項目 ​

  • pill — インラインのラベルチップの対応物。