Markery

Jedna kapsuła dla wszystkiego, co można powiedzieć o rzeczy w jednym słowie: stan, nazwa, wersja, kategoria. Były dwa obiekty, aż pewnego dnia kod i stan stanęły obok siebie w jednym nagłówku, o głowę oddalone, a nikt nie potrafił powiedzieć, co miało oznaczać różnicę — zatem kształt jest jeden, a ton to całość, co je rozróżnia. To, co niesie, jest wolne: słowo, figura, glif, lub dwa z trzech. Koło stoi tam, gdzie nie ma miejsca na kapsułę, a licznik, który wisi z rzędu i ma rozmiar w zależności od tekstu, z którego wisi, jest jedyną rzeczą, która nie jest markerem.

W środku zdania

Słowo wyróżnione podczas czytania: wersja, faza, kategoria. Neutralny ton, ponieważ marker, który przychodzi w kolorze, już złożył roszczenie co do tego, co oznacza — a w zdaniu nie ma nic do roszczenia.

Wersja 2.4 to Wydany To API jest Przestarzały

Kategorie

Tonusy, które rozróżniają rzeczy bez ich rankingowania. Nie niosą znaczenia — nic nie mówi, że trzeci jest lepszy od piątego — co dokładnie sprawia, że są użyteczne w taksonomii, gdzie znaczenie byłoby kłamstwem. Noszone dokładnie tak, jak stan: ta sama kapsuła, ten sam rytm.

Neutralny ruby grapefruit bittersweet sunflower straw grass mint teal aqua blue-jeans plum lavender pink-rose

Stan w słowach

Ogłoszony w zdaniu lub obok tytułu, gdzie jest wiadomością, a nie znakiem w kolumnie.

Operacja zakończona sukcesem Wystąpił błąd Postępuj ostrożnie Dla Twojej informacji

Stan czytany po dziesiątce

W kolumnie, zaznaczenie obok neutralnej liczby odczytywane jest jako dwa obiekty, a tabela z nich odczytywana jest jako hałas. Tutaj kolor otacza figurę, a kolumna jest skanowana za jednym razem — kompaktowo, ponieważ komórka nie ma miejsca do stracenia.

15 success 15 error 15 warning 15 info 15 running 15 pending 15 paused 15 play 15 skipped 15 disabled

Co niesie

Słowo dla tego, czym jest stan, figura dla tego, ile ich jest, oba, lub żadne. Figura zawsze rysowana jest krok w tył od reszty: kwalifikuje stan, nie jest stanem.

Zaliczono 15 Zaliczono15

Trzy formy obok siebie

Te same informacje w miejscu, w którym są faktycznie czytane. Koło jest formą dla komórki zbyt wąskiej na kapsułę, i jedyną, która może pokazać stan jako ilość — i jest rysowane tą samą barwą, którą kapsuła napełnia.

Forma	success	warning	error	skipped
Kapsuła	15	15	15	15
Koło

Koła

Stan przedstawiony przez koło, a nie słowo, w miejscu, gdzie stany są czytane po dziesiątce — lista biegów, rząd zadań. Pierścień niesie kolor, glif wewnątrz mówi, jaki to stan, a obie strony stosu rysują ten sam markup.

success error warning info running pending paused play skipped disabled

LEDy

Zaświecona kropka i jej słowa: stan odczytany na pierwszy rzut oka w linii, po tuzinie w podsumowaniu lub liście usług. Mniejsze niż znacznik, cichsze niż okrąg. off to kropka niepodświetlona — liczba na zero —, running oddycha.

success info running warning error dev off cat-mint

34 ok 2 działa 0 błędy 0 w kolejce

Liczby

Ile czeka na zobaczenie, jako pigułka: w rogu ikony lub przycisku (w rodzicu z has-count), czerwone, chyba że powiedziano inaczej, 99+ po 99; słowo („Nowe”) lub kropka zamiast liczby; nic przy zerze, chyba że poproszono. countApply() utrzymuje jedną aktualną, gdy strona się zmienia.

3 99+ 12 2 Nowe

Skrzynka odbiorcza 4 error 7 warning 14 success 21 info 28 accent 35 Pokazane jako zero 0

Stan, który jest ilością

Bieg to jedyny stan z ilością, więc jego pierścień jest rysowany tak daleko, jak bieg dotarł. Twig drukuje wartość, którą otrzymuje; przeniesienie jej później to sprawa przeglądarki.

0% 25% 50% 75% 100%

Rozmiary kół

Licznik obok markera

Jedyna pozostała różnica, i nie chodzi o znaczenie. Po lewej stronie licznik: dwanaście czegoś, wiszące z rzędu, który do niego prowadzi, i ma rozmiar według tekstu tego rzędu. Po prawej stronie marker: dwanaście czegoś, co poszło dobrze, stojące samodzielnie i mające rozmiar w tokenach. Liczba obok elementu menu to licznik; ta sama figura w kolumnie pipeline to marker.

12 12

Vue

Ten sam komponent, napędzany: zmiana typu lub wartości przesuwa łuk zamiast go przerysować. To to, co aplikacja umieszcza, gdy stan ma zmienić się na oczach czytelnika.

Użycie

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