Yamato DaiwaFrontend (2.0.0-beta.4)
English
日本語
Русский

Badge

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

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

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

Краткий обзор

Pug-примесь
Badge--YDF
Live template-ы Pug-примеси (официальный плагин для семейства сред разработки IntelliJ IDEA)
Наподобие автодополнения
Badge--YDF
Сокращённый
bdg-ydf
Loading Placeholder
Badge--YDF-LoadingPlaceholder
Stylus-примесь для генерации стилей
generateBadgeYDF_GUI_ComponentStyles
Готовые темы
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
Недоступен

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

Разметка

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

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

Pug-примесь Badge--YDF

Badge--YDF
(
Параметр №1
Обязательный
Общее техническое наименование
properties
Русскоязычное имя
Свойства
Тип
Properties
):void
Badge.propertiesSpecification
{
keyLabel
Русскоязычное наименование
Надпись-ключ
Тип
string
Запрещён ли undefined
Нет
Запрещён ли null
Да
Минимум символов
1
valueLabel
Русскоязычное наименование
Надпись-значение
Тип
string
Запрещён ли undefined
Да
Запрещён ли null
Да
Минимум символов
1
theme
Русскоязычное наименование
Тема
Тип
string
Замещение значения undefined
Badge__YDF.Themes.regular
Запрещён ли null
Да
Допустимые варианты
  • Badge__YDF.Themes.regular
  • (Любые, определённые через `Badge__YDF.defineThemes(themesNames)`)
areThemesCSS_ClassesCommon
Русскоязычное наименование
Являются ли CSS-классы тем общими для всех компонентов
Тип
boolean
Замещение значения undefined
Badge__YDF.areThemesCSS_ClassesCommon
Запрещён ли null
Да
geometricVariation
Русскоязычное наименование
Геометрическая вариация
Тип
string
Замещение значения undefined
Badge__YDF.GeometricVariations.regular
Запрещён ли null
Да
Допустимые варианты
  • Badge__YDF.GeometricVariations.regular
  • Badge__YDF.GeometricVariations.small
  • (Любые, определённые через `Badge__YDF.defineGeometricVariations(geometricVariationsNames)`)
geometricModifiers
Русскоязычное наименование
Геометрические модификаторы
Тип
индексный массив
Замещение значения undefined
[]
Запрещён ли null
Да
Запрещены ли элементы типа undefined
Да
Запрещены ли элементы типа null
Да
Элементы массива
Тип
string
Допустимые варианты
  • Badge__YDF.GeometricModifiers.pillShape
  • Badge__YDF.GeometricModifiers.singleLine
decorativeVariation
Русскоязычное наименование
Декоративная вариация
Тип
string
Запрещён ли undefined
Да
Запрещён ли null
Да
Допустимые варианты
  • 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.defineDecorativeVariations(decorativeVariationsNames)`)
decorativeModifiers
Русскоязычное наименование
Декоративные модификаторы
Тип
индексный массив
Замещение значения undefined
[]
Запрещён ли null
Да
Запрещены ли элементы типа undefined
Да
Запрещены ли элементы типа null
Да
Элементы массива
Тип
string
Допустимые варианты
  • Badge__YDF.DecorativeModifiers.bordersDisguising
  • Badge__YDF.DecorativeModifiers.noBackground
rootElementTag
Русскоязычное наименование
Тэг корневого элемента
Тип
string
Замещение значения undefined
"span"
Запрещён ли null
Да
Минимум символов
1
}

© 2023 Yamato Daiwa Co., Ltd.