Badge (Vue)
В рамках YDF, значок (badge) — информационный неинтерактивный компонент, отображающий внутри прямоугольника со скруглёнными углами либо без таковых слово или другой набор символов наподобие даты и/или времени. Возможно добавить иконку, однако она не является заменой надписи, а дополняет её.
В UI/UX-фреймворках схожие компоненты могут иметь другие названия: Chip, Pill, Tag. Официальных определений у этих компонентов, а также официально установленных чётких различий нет: иногда в зависимости от фреймворка один и тот же компонент называется по-разному, а некоторые фреймворки дают свои определения, право чего оставляет за собой и YDF, не позиционирующий себя как фреймворк.
В YDF значком называется («badge») именно неинтерактивный компонент, который лишь отображает информацию. Его следует отличать от внешне похожих компонентов, с которыми можно взаимодействовать: использовать в качестве кнопки или ссылки, скрывать по клику на соответствующую внутреннюю кнопку и так далее. Также, YDF-значок поддерживает две надписи: ключ и значение, что очень важно когда, например, надо указать дату, но по одной иконке календаря может быть непонятно, дата чего именно указана.
Сводка
- Класс компонента
Badge- Stylus-примесь для генерации стилей
provideBadgeYDF_Component- Готовые темы
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
- Доступен