Markers

Markers

Één capsule voor alles wat over een ding in één woord is gezegd: een staat, een naam, een versie, een categorie. Het waren twee objecten tot de dag dat een code en een staat zij aan zij in één kop stonden, een hoofd apart, en niemand kon zeggen wat het verschil betekende — dus de vorm is één en de toon is het geheel van wat hen onderscheidt. Wat het draagt is vrij: een woord, een cijfer, een glyph, of twee van de drie. De cirkel staat waar er geen ruimte is voor een capsule, en de teller, die hangt aan een rij en is afgestemd op de tekst waaraan hij hangt, is het enige dat hier geen marker is.

In het midden van een zin

Een woord apart gezet terwijl het wordt gelezen: een versie, een fase, een categorie. De neutrale toon, omdat een marker die gekleurd aankomt al een claim heeft gemaakt over wat hij markeert — en in een zin is er niets te claimen.

Versie 2.4 is Vrijgegeven Deze API is Verouderd

De categorieën

Tonen die dingen onderscheiden zonder ze te rangschikken. Ze dragen geen betekenis — niets zegt dat de derde beter is dan de vijfde — wat precies is wat ze bruikbaar maakt voor een taxonomie, waar betekenis een leugen zou zijn. Draagt precies zoals een staat is: dezelfde capsule, hetzelfde ritme.
Neutraal ruby grapefruit bittersweet sunflower straw grass mint teal aqua blue-jeans plum lavender pink-rose

Een staat in woorden

Aangekondigd in een zin of naast een titel, waar het de boodschap is in plaats van een markering in een kolom.
Operatie succesvol Er is een fout opgetreden Ga voorzichtig te werk Voor uw informatie

Een staat gelezen per dozijn

In een kolom leest een vinkje naast een neutrale telling als twee objecten en een tabel van hen leest als ruis. Hier omhult de kleur het cijfer en de kolom wordt in één keer gescand — compact, aangezien een cel geen ruimte heeft om te verspillen.
15 success 15 error 15 warning 15 info 15 running 15 pending 15 paused 15 play 15 skipped 15 disabled

Wat het draagt

Een woord voor wat de staat is, een cijfer voor hoeveel ervan zijn, beide, of geen van beide. Het cijfer is altijd een stap teruggetrokken van de rest: het kwalificeert de staat, het is niet de staat.
Geslaagd 15 Geslaagd15

De drie vormen naast elkaar

Dezelfde informatie op de plaats waar het daadwerkelijk wordt gelezen. De cirkel is de vorm voor een cel die te smal is voor een capsule, en de enige die kan laten zien dat een staat een hoeveelheid is — en het wordt getekend met de kleur die de capsule vult.
Vormsuccesswarningerrorskipped
Capsule 15 15 15 15
Cirkel

Cirkels

Een staat verteld door een cirkel in plaats van door een woord, voor een plaats waar staten per dozijn worden gelezen — een lijst van runs, een rij van taken. De ring draagt de kleur, de glyph binnenin zegt welke staat het is, en beide zijden van de stapel tekenen dezelfde markup.
success error warning info running pending paused play skipped disabled

LED's

Een verlichte stip en zijn woorden: een staat in één oogopslag gelezen in een regel, per dozijn in een samenvatting of een lijst van diensten. Kleiner dan een markeerder, stiller dan een cirkel. uit is de stip niet verlicht — een telling op nul —, bezig ademt.
success info running warning error dev off cat-mint
34 ok 2 bezig 0 fouten 0 in de wachtrij

Aantallen

Hoeveel wachten om gezien te worden, als een pil: op de hoek van een pictogram of een knop (in een has-count ouder), rood tenzij anders gezegd, 99+ na 99; een woord (« Nieuw ») of een stip in plaats van het cijfer; niets op nul tenzij gevraagd. countApply() houdt er één bij terwijl de pagina verandert.
3 99+ 12 2 Nieuw
Inbox 4 error 7 warning 14 success 21 info 28 accent 35 Tonen op nul 0

Een staat die een hoeveelheid is

Een run is de enige staat met een hoeveelheid, dus zijn ring wordt getekend tot waar de run is gekomen. Twig print de waarde die het krijgt; het daarna verplaatsen is de zaak van de browser.
0% 25% 50% 75% 100%

Cirkelgroottes

Een teller naast een marker

Het enige onderscheid dat overblijft, en het gaat niet om betekenis. Aan de linkerkant een teller: twaalf van iets, hangend aan de rij die er naartoe leidt en afgestemd op de tekst van die rij. Aan de rechterkant een marker: twaalf van iets dat goed ging, staand op zichzelf en afgestemd op tokens. Een telling naast een menu-item is een teller; hetzelfde cijfer in een pijplijnkolom is een marker.
12 12

Vue

Dezelfde component, aangestuurd: het type of de waarde wisselen verplaatst de boog in plaats van het opnieuw te tekenen. Dit is wat een app plaatst wanneer de staat onder de ogen van de lezer gaat veranderen.

Gebruik

{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}
v1.0.29