AdmonitionBlock (Blazor)
Эта страница не завершена
Приносим свои извинения, но данная страница ещё не завершена.
Рамки с текстом использовались ещё задолго до компьютеризации — в книгах и другой печатной продукции. Хотя чаще всего рамкой выделяют важный текст, иногда рамкой обрамляются заметки, примечания и прочая второстепенная информация.
В разработке сайтов и приложений, выделение блока текста в рамку стало более продвинутым и частым.
- Как и в печатной продукции, рамка используется на сайтах с большим количеством текста для выделения его фрагментов. Чтобы посетитель мог мгновенно оценить важность выделяемого текста, используется цветовая кодировка: для важных блоков обычно выбирают тёплые цвета (красный, оранжевый, жёлтый), в остальных случаях — холодные (синий, голубой, зелёный) или ахроматические (чёрная или серая рамка с белым или светло-серым фоном). Кроме того, иногда используются иконки.
- В графических пользовательских интерфейсах (GUI) рамка с текстом приобрела дополнительную функцию, став одним из способов оповещения пользователя. В отличие от всплывающих сообщений, отображающихся короткий промежуток времени, рамка с текстом обычно отображается постоянно или до тех пор, пока пока пользователь не уберёт её с помощью соответствующей кнопки (если таковая имеется). Рекомендуется также предложить пользователю отреагировать на сообщение, добавив внутрь рамки дополнительные кнопки.
Использовать рамку с текстом для оповещения пользователя рекомендуется в следующих случаях:
- Отображение ошибки при получении данных с сервера
- В этом случае рекомендуется добавить кнопку для инициирования повторной попытки получения данных.
- Отображение сообщения об отсутствии данных, которые можно показать
- Следует подготовить отдельные сообщения для случаев, когда нет данных, удовлетворяющих поисковому запросу, и для случая, когда данных нет вообще. Предложить пользователю отреагировать на сообщение тоже следует по-разному: в первом случае — подготовить копку для сброса поискового запроса, а во втором — предложить добавить данные, если пользователю это позволено авторизованному на данный момент пользователю.
- Отображение коротких инструкций по использованию сайта или приложения
- Это очень важно делать для не только для новых пользователей конкретно Вашего сайта или приложения, но и для пользователей с низким уровнем компьютерной грамотности, которых ещё очень много.
- Побуждение пользователей к конкретному действию
- Например, если на Вашем сайте или приложении регистрация опциональная, то можно предложить пользователю зарегистрироваться и объяснить, какие преимущества это даст. Разумеется, в данном случае должны быть ссылки на страницу регистрации и авторизации (для уже загеристрированных пользователей).
Напротив, в следующих случах рамка с текстом не является лучших выбором:
- Отображение ошибки при отправке данных
- Отображение сообщения об успешной отправке данных
- Отображение сообщения об успешном входе в систему или выходе из неё
Для этих сценариев гораздо лучше подходят всплывающие сообщения (в YDF это компонент Snackbar).
Краткий обзор
- Класс компонента
AdmonitionBlock- Stylus-примесь для генерации стилей
generateAdmonitionBlockYDF_GUI_ComponentStyles- Готовые темы
AdmonitionBlock.StandardThemes.regular- Базовая (по умолчанию)
- Готовые геометрические вариации
AdmonitionBlock.StandardGeometricVariations.regular- Базовая (по умолчанию)
AdmonitionBlock.StandardGeometricVariations.stickyNoteLike- Похожая на клейкие листочки
- Готовые декоративные вариации
AdmonitionBlock.StandardDecorativeVariations.notice- Заметка
AdmonitionBlock.StandardDecorativeVariations.error- Ошибка либо критически важное примечание
AdmonitionBlock.StandardDecorativeVariations.warning- Предупреждение
AdmonitionBlock.StandardDecorativeVariations.success- Успешное выполнение действия
AdmonitionBlock.StandardDecorativeVariations.guidance- Объяснение
AdmonitionBlock.StandardDecorativeVariations.question- Вопрос
- Loading placeholder
- Недоступен
Класс AdmonitionBlockClass
Параметры Razor-компонента
AdmonitionBlock.Properties
{
- title
- Русскоязычное наименование
- Заголовок
- Тип
- string
- Обязательное
- Нет
- Минимум символов
- 1
- dismissible
- Русскоязычное наименование
- Возможно ли убрать
- Тип
- boolean
- Значение по умолчанию
- false
- theme
- Русскоязычное наименование
- Тема
- Тип
- string
- Значение по умолчанию
- AdmonitionBlock.StandardThemes.regular
- Допустимые варианты
- AdmonitionBlock.StandardThemes.regular
- (Любые, определённые через `AdmonitionBlock.defineCustomThemes(CustomThemesEnumeration)`)
- areThemesCSS_ClassesCommon
- Русскоязычное наименование
- Являются ли CSS-классы тем общими для всех компонентов
- Тип
- boolean
- Значение по умолчанию
- false
- geometricVariation
- Русскоязычное наименование
- Геометрическая вариация
- Тип
- string
- Значение по умолчанию
- AdmonitionBlock.StandardGeometricVariations.regular
- Допустимые варианты
- AdmonitionBlock.StandardGeometricVariations.regular
- AdmonitionBlock.StandardGeometricVariations.stickyNoteLike
- (Любые, определённые через `AdmonitionBlock.defineCustomGeometricVariations(CustomGeometricVariationsNamesEnumeration)`)
- decorativeVariation
- Русскоязычное наименование
- Декоративная вариация
- Тип
- string
- Обязательное
- Да
- Допустимые варианты
- AdmonitionBlock.StandardDecorativeVariations.notice
- AdmonitionBlock.StandardDecorativeVariations.error
- AdmonitionBlock.StandardDecorativeVariations.warning
- AdmonitionBlock.StandardDecorativeVariations.success
- AdmonitionBlock.StandardDecorativeVariations.guidance
- AdmonitionBlock.StandardDecorativeVariations.question
- (Любые, определённые через `AdmonitionBlock.defineCustomDecorativeVariations(CustomDecorativeVariationsEnumeration)`)
- rootElementModifierCSS_Class
- Русскоязычное наименование
- CSS-класс-модификатор коревого элемента
- Тип
- string
- Обязательное
- Нет
- rootElementModifierCSS_Classes
- Русскоязычное наименование
- Массив CSS-классов-модификаторов коревого элемента
- Тип
- индексный массив
- Обязательное
- Нет
- Элементы массива
- Тип
- string
- rootElementSpaceSeparatedModifierCSS_Classes
- Русскоязычное наименование
- Разделённые пробелом CSS-классы-модификаторы коревого элемента
- Тип
- string
- Обязательное
- Нет
- hasDefaultSVG_Icon
- Русскоязычное наименование
- Имеет ли SVG-иконку по умолчанию
- Тип
- boolean
- Значение по умолчанию
- false
- HTML_ID
- Русскоязычное наименование
- HTML-идентификатор
- Тип
- string
- Обязательное
- Нет
- Минимум символов
- 1