Badge (Blazor)

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

В разработке сайтов и приложений, выделение блока текста в рамку стало более продвинутым и частым.

• Как и в печатной продукции, рамка используется на сайтах с большим количеством текста для выделения его фрагментов. Чтобы посетитель мог мгновенно оценить важность выделяемого текста, используется цветовая кодировка: для важных блоков обычно выбирают тёплые цвета (красный, оранжевый, жёлтый), в остальных случаях — холодные (синий, голубой, зелёный) или ахроматические (чёрная или серая рамка с белым или светло-серым фоном). Кроме того, иногда используются иконки.
• В графических пользовательских интерфейсах (GUI) рамка с текстом приобрела дополнительную функцию, став одним из способов оповещения пользователя. В отличие от всплывающих сообщений, отображающихся короткий промежуток времени, рамка с текстом обычно отображается постоянно или до тех пор, пока пока пользователь не уберёт её с помощью соответствующей кнопки (если таковая имеется). Рекомендуется также предложить пользователю отреагировать на сообщение, добавив внутрь рамки дополнительные кнопки.

Использовать рамку с текстом для оповещения пользователя рекомендуется в следующих случаях:

Отображение ошибки при получении данных с сервера

В этом случае рекомендуется добавить кнопку для инициирования повторной попытки получения данных.

Отображение сообщения об отсутствии данных, которые можно показать

Следует подготовить отдельные сообщения для случаев, когда нет данных, удовлетворяющих поисковому запросу, и для случая, когда данных нет вообще. Предложить пользователю отреагировать на сообщение тоже следует по-разному: в первом случае — подготовить копку для сброса поискового запроса, а во втором — предложить добавить данные, если пользователю это позволено авторизованному на данный момент пользователю.

Отображение коротких инструкций по использованию сайта или приложения

Это очень важно делать для не только для новых пользователей конкретно Вашего сайта или приложения, но и для пользователей с низким уровнем компьютерной грамотности, которых ещё очень много.

Побуждение пользователей к конкретному действию

Например, если на Вашем сайте или приложении регистрация опциональная, то можно предложить пользователю зарегистрироваться и объяснить, какие преимущества это даст. Разумеется, в данном случае должны быть ссылки на страницу регистрации и авторизации (для уже загеристрированных пользователей).

Напротив, в следующих случах рамка с текстом не является лучших выбором:

• Отображение ошибки при отправке данных
• Отображение сообщения об успешной отправке данных
• Отображение сообщения об успешном входе в систему или выходе из неё

Для этих сценариев гораздо лучше подходят всплывающие сообщения (в YDF это компонент Snackbar).

• Сводка

Сводка

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

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

Доступен