Badge

В рамках YDF, значок (badge) — информационный неинтерактивный компонент, отображающий внутри прямоугольника со скруглёнными углами либо без таковых слово или другой набор символов наподобие даты и/или времени. Возможно добавить иконку, однако она не является заменой надписи, а дополняет её.

В UI/UX-фреймворках схожие компоненты могут иметь другие названия: Chip, Pill, Tag. Официальных определений у этих компонентов, а также официально установленных чётких различий нет: иногда в зависимости от фреймворка один и тот же компонент называется по-разному, а некоторые фреймворки дают свои определения, право чего оставляет за собой и YDF, не позиционирующий себя как фреймворк.

В YDF значком называется («badge») именно неинтерактивный компонент, который лишь отображает информацию. Его следует отличать от внешне похожих компонентов, с которыми можно взаимодействовать: использовать в качестве кнопки или ссылки, скрывать по клику на соответствующую внутреннюю кнопку и так далее. Также, YDF-значок поддерживает две надписи: ключ и значение, что очень важно когда, например, надо указать дату, но по одной иконке календаря может быть непонятно, дата чего именно указана.

• Сводка
• Использование
  • Разметка
    • Подключение в проект
    • Pug-примесь Badge--YDF
      • Минимальный пример (только обязательные свойства)
  • Логика

Сводка

Pug-примесь

Badge--YDF

Stylus-примесь для генерации стилей

provideBadgeYDF_Component

Готовые темы

Badge__YDF.Themes.regular

Базовая (по умолчанию)

Готовые геометрические вариации

Badge__YDF.GeometricVariations.regular

Базовая (по умолчанию)

Badge__YDF.GeometricVariations.small

Маленькая

Геометрические модификаторы

Badge__YDF.GeometricModifiers.pillShape

Максимальное скругление углов

Badge__YDF.GeometricModifiers.singleLine

Всегда одна строка с усечением текста при нехватке ширины

Готовые декоративные вариации

Badge__YDF.DecorativeVariations.veryCatchyBright

Очень броская яркая (красная по умолчанию)

Badge__YDF.DecorativeVariations.catchyBright

Броская яркая (оранжевая по умолчанию)

Badge__YDF.DecorativeVariations.modestlyCatchyBright

Умеренно броская яркая (жёлтая по умолчанию)

Badge__YDF.DecorativeVariations.neutralBright

Нейтральная яркая (голубая по умолчанию)

Badge__YDF.DecorativeVariations.modestlyCalmingBright

Умеренно успокаивающая яркая (синяя по умолчанию)

Badge__YDF.DecorativeVariations.calmingBright

Успокаивающая яркая (зелёная по умолчанию)

Badge__YDF.DecorativeVariations.achromaticBright

Ахроматическая яркая (тёмно-серая по умолчанию)

Badge__YDF.DecorativeVariations.veryCatchyPastel

Очень броская пастельная (красная по умолчанию)

Badge__YDF.DecorativeVariations.catchyPastel

Броская пастельная (оранжевая по умолчанию)

Badge__YDF.DecorativeVariations.modestlyCatchyPastel

Умеренно броская пастельная (жёлтая по умолчанию)

Badge__YDF.DecorativeVariations.neutralPastel

Нейтральная пастельная (голубая по умолчанию)

Badge__YDF.DecorativeVariations.modestlyCalmingPastel

Умеренно успокаивающая пастельная (синяя по умолчанию)

Badge__YDF.DecorativeVariations.calmingPastel

Успокаивающая пастельная (зелёная по умолчанию)

Badge__YDF.DecorativeVariations.achromaticPastel

Ахроматическая пастельная (светло-серая по умолчанию)

Декоративные модификаторы

Badge__YDF.DecorativeModifiers.bordersDisguising

Эффект отсутствия обводки без изменения размеров

Badge__YDF.DecorativeModifiers.noBackground

Без заливки

Loading placeholder

Badge--YDF-LoadingPlaceholder

Использование

Разметка

Подключение в проект

Разметка данного GUI-компонента поставляется в виде Pug-примеси Badge--YDF. Способ подключения — стандартный: путём включения Pug-файла Components.pug в Ваш pug-файл, при этом туда же предварительно должен быть включён файл Functionality.pug (последний уже входит в шаблоны страниц , повторное включение приведёт к ошибке).

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug