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 — Ինլայն պիտակ-չիպի համարժեքը։