CSS: badge ​

.instui-badge — He tatau iti, he pōro tūnga i whakanoho ki runga i te kokonga o te whāinga.

Hei whakamau i te tohu ki runga i te whāinga, whakakīia rāua ki roto i te .instui-badge-wrapper (te punga tūnga) kātahi ka pīnia te tohu mā te whakarerekē -placement-*.

Source: badge.css

Ngā Whakamahi ​

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

Whakaaturanga ​

Ngā tauira ​

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

Hanganga ​

Ka whakairohia te tohu hei raina māna ake, rānei i roto i tētahi instui-badge-wrapper kōwhiringa e punga ai ki runga i te whāinga.

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;

Ngā Kaitī ​

KaiwhakatikatikaWhakamārama
.-color-dangerTatau mō te aro / hē.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successTatau mō te angitu / te oti.
.-placement-bottom-endTūnga i te kokonga raro-mutunga.
.-placement-bottom-startTūnga i te kokonga raro-tīmata.
.-placement-end-centerTūnga i waenganui o te taha mutunga.
.-placement-start-centerTūnga i waenganui o te taha tīmata.
.-placement-top-endTūnga i te kokonga runga-mutunga.
.-placement-top-startTūnga i te kokonga runga-tīmata.
.-pulseHe porowhita e pipiha ana hei tohu aro.
.-standaloneWhakaritea hei raina, kaua e tū ki runga i te kokonga o te whāinga.
.-type-notificationHe pōro anake, kāore he tatau.

Ngā pseudo-kōwae ​

Pseudo-kōwaeWhakamārama
::beforeTe porowhita pīwaiwai e pipiha ana i tāia ki te tae āwhakakākahu o te tohu (te rerekētanga -pulse).

Ngā taonga ritenga ​

RawaMomoTaunoaWhakamārama
--pantoken-badge-accent<color>—Te whakakī o te rīpene; ko ia momo -color-* me te porowhita pīwaiwai ka toro ki reira.
--pantoken-badge-text<color>—Te tae tuhinga, e ū tahi ana ki te tae āwhakakākahu kia mārama tonu te pānui.

Ngā Whakaari ​

WhakaariWhakamārama
pantoken-badge-pulseTe huringa neke o te porowhita pīwaiwai.

Ngā tohu i whakamahia ​

TokenMomoUara
--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

Hono ​

  • pill — Te hoa tapanga-rīpene ā-raina.