Badge (Vue)

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

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

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

• Сводка
• Класс Badge
  • Vue-свойства

Сводка

Класс компонента

Badge

Live template-ы Vue-компонента (официальный плагин для семейства сред разработки IntelliJ IDEA)

Наподобие автодополнения

Pug-синтаксис

Badge--YDF-Vue-Pug

HTML-синтаксис

Badge--YDF-Vue-HTML

Сокращённый

Pug-синтаксис

bdg-ydf-vue-pug

HTML-синтаксис

bdg-ydf-vue-html

Индикатор загрузки

Pug-синтаксис

Badge-LoadingPlaceholder--YDF-Vue-Pug

HTML-синтаксис

Badge-LoadingPlaceholder--YDF-Vue-HTML

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

generateBadgeYDF_GUI_ComponentStyles

Готовые темы

Badge.Themes.regular

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

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

Badge.GeometricVariations.regular

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

Badge.GeometricVariations.small

Маленькая

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

Badge.GeometricModifiers.pillShape

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

Badge.GeometricModifiers.singleLine

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

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

Badge.DecorativeVariations.veryCatchyBright

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

Badge.DecorativeVariations.catchyBright

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

Badge.DecorativeVariations.modestlyCatchyBright

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

Badge.DecorativeVariations.neutralBright

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

Badge.DecorativeVariations.modestlyCalmingBright

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

Badge.DecorativeVariations.calmingBright

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

Badge.DecorativeVariations.achromaticBright

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

Badge.DecorativeVariations.veryCatchyPastel

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

Badge.DecorativeVariations.catchyPastel

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

Badge.DecorativeVariations.modestlyCatchyPastel

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

Badge.DecorativeVariations.neutralPastel

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

Badge.DecorativeVariations.modestlyCalmingPastel

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

Badge.DecorativeVariations.calmingPastel

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

Badge.DecorativeVariations.achromaticPastel

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

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

Badge__YDF.DecorativeModifiers.bordersDisguising

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

Badge__YDF.DecorativeModifiers.noBackground

Без заливки

Loading placeholder

Недоступен

Класс Badge

Vue-свойства