CSS: badge

.instui-badge — Egy kis szám vagy állapot pont elhelyezve egy cél sarkára.

Egy jelvény célra helyezéséhez burkolja be mindkettőt egy .instui-badge-wrapper-be (a pozíció rögzítőpont) és rögzítse a jelvényt egy -placement-* módosítóval.

Forrás: badge.css

Használat

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

Demó

Példák

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

4

Felépítés

A jelvény beágyazottan önmagában jelenik meg, vagy egy választható instui-badge-wrapper-ben, amely a cél felett rögzíti.

.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;

Módosítók

Módosító	Leírás
.-color-danger	Egy figyelem/hiba száma.
.-color-inverse	Sötét: egy világos chip sötét szöveggel.
.-color-success	Egy pozitív/teljes szám.
.-placement-bottom-end	Helyezze az alsó-végződés sarkára.
.-placement-bottom-start	Helyezze az alsó-kezdés sarkára.
.-placement-end-center	Helyezze középre a végződési élre.
.-placement-start-center	Helyezze középre a kezdési élre.
.-placement-top-end	Helyezze a felső-végződés sarkára.
.-placement-top-start	Helyezze a felső-kezdés sarkára.
.-pulse	Egy pulzáló figyelem gyűrű.
.-standalone	Ábrázolva beágyazottan, nem elhelyezve egy cél sarkára.
.-type-notification	Csak egy pont, nincs szám.

Pszeudoelemek

Pszeudoelem	Leírás
::before	A pulzáló figyelem gyűrű a jelvény hangsúly színben rajzolva (a -pulse variáns).

Egyéni tulajdonságok

Tulajdonság	Típus	Alapértelmezett	Leírás
--pantoken-badge-accent	<color>	—	A chip kitöltés; minden -color-* variáns és a pulzus gyűrű olvassa belőle.
--pantoken-badge-text	<color>	—	A szöveg szín, párosítva a hangsúlyhoz, hogy érthető marad.

Animációk

Animáció	Leírás
pantoken-badge-pulse	A pulzus gyűrű animációja.

Felhasznált tokenek

Token	Típus	Érték
--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>	light-dark(#1D354F, #EEF4FD)LightDark
--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

Kapcsolódó

• pill — Az inline címke-chip párja.