Yamato DaiwaFrontend (2.0.0-beta.4)

Badge

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

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

В YDF значком называется («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

В Вашем случае относительный путь к директории node_modules может быть другим в в зависимости от того, насколько глубже корневой директории проекта находится Ваш Pug-файл с этим кодом.

Напомним, что одно только включение этих файлов никакого выходного HTML-кода не даст: чтобы сгенерировать HTML-код компонента Badge, нужно вызывать Pug-примесь Badge--YDF. Кроме того, если на данном этапе пока ещё не подключены стили, то при вызове этой примеси HTML-код хотя и будет сгенерирован, но корректного отображения пока не будет. Но если Вы ещё не знаете, как подключать стили, то не волнуйтесь, так ниже это будет обязательно описано.