Маркер
Маркер
Одна капсула для всего, что сказано о вещи одним словом: состояние, имя, версия, категория. Они были двумя объектами до того дня, когда код и состояние встали бок о бок в одном заголовке, на расстоянии головы, и никто не мог сказать, что значит различие — так что форма едина, а тон составляет всё, что отличает их. То, что она несет, свободно: слово, число, символ или два из трех. Круг стоит там, где нет места для капсулы, а счетчик, который висит из ряда и имеет размер в тексте, из которого он свисает, — это единственное здесь, что не является маркером.
В середине предложения
Слово, выделенное в процессе чтения: версия, фаза, категория. Нейтральный тон, потому что маркер, пришедший окрашенным, уже сделал заявление о том, что он маркирует — а в предложении нечего заявлять.
Версия 2.4 Выпущен Этот API устарел Устаревший
Категории
Тоны, которые различают вещи без ранжирования. Они не несут смысла — ничто не говорит о том, что третья лучше пятой — что как раз и делает их пригодными для таксономии, где смысл был бы ложью. Носится так же, как состояние: та же капсула, тот же ритм.
Нейтральный
ruby
grapefruit
bittersweet
sunflower
straw
grass
mint
teal
aqua
blue-jeans
plum
lavender
pink-rose
Состояние словами
Объявлено в предложении или рядом с заголовком, где это сообщение, а не отметка в столбце.
Операция успешна
Произошла ошибка
Будьте осторожны
Для вашей информации
Состояние, читаемое по дюжинам
В столбце галочка рядом с нейтральным счетом читается как два объекта, а таблица из них читается как шум. Здесь цвет обрамляет фигуру, и столбец сканируется за один проход — компактно, так как ячейка не имеет лишнего места.
15
success
15
error
15
warning
15
info
15
running
15
pending
15
paused
15
play
15
skipped
15
disabled
То, что она несет
Слово для описания состояния, число для количества, оба или ни одно. Число всегда рисуется на шаг назад от остального: оно квалифицирует состояние, но не является состоянием.
Пройдено
15
Пройдено15
Три формы бок о бок
Та же информация в месте, где она фактически читается. Круг — это форма для ячейки, слишком узкой для капсулы, и единственная, которая может показать состояние как количество — и она рисуется тем же цветом, который заполняет капсула.
| Форма | success | warning | error | skipped |
|---|---|---|---|---|
| Капсула | 15 | 15 | 15 | 15 |
| Круг |
Круги
Состояние, рассказанное кругом, а не словом, для места, где состояния читаются по дюжинам — список пробежек, ряд заданий. Кольцо несет цвет, символ внутри говорит, какое это состояние, и обе стороны стека рисуют одни и те же разметки.
success
error
warning
info
running
pending
paused
play
skipped
disabled
Светодиоды
Зажженная точка и её слова: состояние, которое можно увидеть с первого взгляда в строке, десятками в сводке или списке сервисов. Меньше маркера, тише круга. off — это незажженная точка — счёт на нуле —, running дышит.
success
info
running
warning
error
dev
off
cat-mint
34 всё в порядке
2 в работе
0 ошибки
0 в очереди
Подсчеты
Сколько ожидает просмотра, как таблетка: на углу иконки или кнопки (в родительском элементе has-count), красная, если не указано иначе, 99+ после 99; слово (« Новый ») или точка вместо цифры; ничего на нуле, если не запрашивается. countApply() поддерживает актуальность, пока страница меняется.
2
Входящие 4
error 7
warning 14
success 21
info 28
accent 35
Показано ноль 0
Состояние, которое является количеством
Пробежка — это единственное состояние с количеством, поэтому ее кольцо рисуется так далеко, как пробежка достигла. Twig печатает значение, которое ему дано; перемещение его впоследствии — это дело браузера.
0%
25%
50%
75%
100%
Размеры кругов
Счетчик рядом с маркером
Единственное оставшееся различие, и оно не связано со смыслом. Слева счетчик: двенадцать чего-то, висящих из ряда, который ведет к нему, и размером в текст этого ряда. Справа маркер: двенадцать чего-то, что прошло успешно, стоящий отдельно и размером в токены. Счетчик рядом с элементом меню — это счетчик; то же самое число в столбце конвейера — это маркер.
12
12
Vue
Тот же компонент, управляемый: переключение типа или значения перемещает дугу вместо перерисовки. Это то, что приложение помещает, когда состояние собирается измениться на глазах у читателя.
Использование
{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}