Badge (Blazor)

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

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

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

• Краткий обзор
• Класс Badge
  • Параметры Razor-компонента

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

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

Badge

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

generateBadgeYDF_GUI_ComponentStyles

Готовые темы

Badge.StandardThemes.regular

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

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

Badge.StandardGeometricVariations.regular

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

Badge.StandardGeometricVariations.small

Маленькая

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

Badge.GeometricModifiers.pillShape

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

Badge.GeometricModifiers.singleLine

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

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

Badge.StandardDecorativeVariations.veryCatchyBright

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

Badge.StandardDecorativeVariations.catchyBright

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

Badge.StandardDecorativeVariations.modestlyCatchyBright

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

Badge.StandardDecorativeVariations.neutralBright

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

Badge.StandardDecorativeVariations.modestlyCalmingBright

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

Badge.StandardDecorativeVariations.calmingBright

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

Badge.StandardDecorativeVariations.achromaticBright

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

Badge.StandardDecorativeVariations.veryCatchyPastel

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

Badge.StandardDecorativeVariations.catchyPastel

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

Badge.StandardDecorativeVariations.modestlyCatchyPastel

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

Badge.StandardDecorativeVariations.neutralPastel

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

Badge.StandardDecorativeVariations.modestlyCalmingPastel

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

Badge.StandardDecorativeVariations.calmingPastel

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

Badge.StandardDecorativeVariations.achromaticPastel

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

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

Badge__YDF.DecorativeModifiers.bordersDisguising

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

Badge__YDF.DecorativeModifiers.noBackground

Без заливки

Loading placeholder

Недоступен

Класс Badge

Параметры Razor-компонента