CSS: badge

.instui-badge — Pwynt bach sy'n dangos cyfrif neu statws wedi'i osod dros gornel targed.

I osod bathodyn dros darged, wrapiwch y ddau mewn .instui-badge-wrapper (y cwlwm safle) a phinwch y bathodyn gyda modiwffwr -placement-*.

Source: badge.css

Defnydd

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

Dangosfa

Enghreifftiau

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

Strwythur

Mae'r bathodyn yn rendro mewn-linell ar ei ben ei hun, neu o fewn instui-badge-wrapper dewisol sy'n ei gloi dros darged.

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

Modyfiwyr

Modyfiwr	Disgrifiad
.-color-danger	Cyfrif sylw/gwall.
.-color-inverse	On-dark: a light chip with dark text.
.-color-success	Cyfrif cadarnhaol/cyflawn.
.-placement-bottom-end	Safle yn nghornel gwaelod-diwedd.
.-placement-bottom-start	Safle yn nghornel gwaelod-dechrau.
.-placement-end-center	Safle wedi'i ganoli ar ymyl y diwedd.
.-placement-start-center	Safle wedi'i ganoli ar ymyl y dechrau.
.-placement-top-end	Safle yn nghornel brig-diwedd.
.-placement-top-start	Safle yn nghornel brig-dechrau.
.-pulse	Cylch sylw sy'n pulsu.
.-standalone	Rendro mewn-linell, nid wedi'i leoli dros gornel targed.
.-type-notification	Pwynt yn unig, dim cyfrif.

Is-elfennau

Is-elfen	Disgrifiad
::before	Y cylch sylw pulsu a dynodir yn lliw accent y bathodyn (amrywiad -pulse).

Priodweddau arferiad

Eiddo	Math	Diofyn	Disgrifiad
--pantoken-badge-accent	<color>	—	Llenwad y chip; mae pob amrywiad -color-* a'r cylch pulsu yn ei ddefnyddio.
--pantoken-badge-text	<color>	—	Lliw y testun, wedi'i paru â'r accent i sicrhau darllenadwyedd.

Animeiddiadau

Animeiddiad	Disgrifiad
pantoken-badge-pulse	Animiad y cylch pulsu.

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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

Perthnasol

• pill — Cyfatebol label-chip mewn-linell.