Yamato DaiwaFrontend (2.0.0-beta.4)
English
日本語
Русский

AdmonitionBlock

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

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

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

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

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

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

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

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

Сводка

Класс компонента
AdmonitionBlock
Live template компонента (официальный плагин для семейства сред разработки IntelliJ IDEA)
ab-ydf-v
Stylus-примесь для генерации стилей
provideAdmonitionBlockYDF_Component
Готовые темы
AdmonitionBlock.Themes.regular`
Базовая (по умолчанию)
Готовые геометрические вариации
AdmonitionBlock.GeometricVariations.regular
Базовая (по умолчанию)
AdmonitionBlock.GeometricVariations.stickyNoteLike
Похожая на клейкие листочки
Готовые декоративные вариации
AdmonitionBlock.DecorativeVariations.notice
Заметка
AdmonitionBlock.DecorativeVariations.error
Ошибка либо критически важное примечание
AdmonitionBlock.DecorativeVariations.warning
Предупреждение
AdmonitionBlock.DecorativeVariations.success
Успешное выполннение действия
AdmonitionBlock.DecorativeVariations.guidance
Объяснение
AdmonitionBlock.DecorativeVariations.question
Вопрос
Loading placeholder
Недоступен

Класс AdmonitionBlockClass

Vue-свойства

Properties
Свойства
{
title
Русскоязычное наименование
Заголовок
Обязательное
Нет
Тип
string
Минимум символов
1
dismissible
Русскоязычное наименование
Возможно ли убрать
Значение по умолчанию
false
Тип
boolean
theme
Русскоязычное наименование
Тема
Значение по умолчанию
AdmonitionBlock.Themes.regular
Тип
string
Допустимые варианты
  • AdmonitionBlock.Themes.regular
  • (Любые, определённые через AdmonitionBlock.defineThemes(themesNames))
areThemesCSS_ClassesCommon
Русскоязычное наименование
Являются ли CSS-классы тем общими для всех компонентов
Значение по умолчанию
AdmonitionBlock.areThemesCSS_ClassesCommon
Тип
boolean
geometricVariation
Русскоязычное наименование
Геометрическая вариация
Значение по умолчанию
AdmonitionBlock.GeometricVariations.regular
Тип
string
Допустимые варианты
  • AdmonitionBlock.GeometricVariations.regular
  • AdmonitionBlock.GeometricVariations.stickyNoteLike
  • (Любые, определённые через AdmonitionBlock.defineGeometricVariations(geometricVariationsNames))
decorativeVariation
Русскоязычное наименование
Декоративная вариация
Обязательное
Да
Тип
string
Допустимые варианты
  • AdmonitionBlock.DecorativeVariations.notice
  • AdmonitionBlock.DecorativeVariations.error
  • AdmonitionBlock.DecorativeVariations.warning
  • AdmonitionBlock.DecorativeVariations.success
  • AdmonitionBlock.DecorativeVariations.guidance
  • AdmonitionBlock.DecorativeVariations.question
  • (Любые, определённые через AdmonitionBlock.defineDecorativeVariations(decorativeVariationsNames))
hasDefaultSVG_Icon
Русскоязычное наименование
Имеется ли SVG-иконка по умолчанию
Значение по умолчанию
false
Тип
boolean
}

Примеры

Минимальный пример (только обязательные свойства)

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

Заголовок (свойство title)

Русскоязычное наименование
Заголовок
Обязательное
Нет
Тип
string
Минимум символов
1

Сообщение в рамке будет с большей вероятностью прочитано и осмыслено, если снабдить его кратким и чётким заголовком. В условиях острого дефицита времени, характерного для современного образа жизни, люди часто не читают страницу полностью, а пробегают глазами по заголовкам, и если какой-то из них для конкретного человека чем-то важен, то только тогда он начнёт читать связанный с этим заголовком текст. Хотя добавленный заголовок не будет использовать тэги HTML-заголовков (h1-h6), он будет семантически связан с содержимым vue-слота.

SVG-иконки

Иконка вдобавок к цвету фона позволяет лучше передать важность сообщения. Для того, чтобы отобразилась иконка по умолчанию (зависит от декоративной вариации), необходимо указать Vue-свойству hasDefaultSVG_Icon значение true:

Наиболее рекомендуемым вариантом является сочетание заголовков и иконок:

Используя Vue-слоты, можно также указать пользовательскую SVG-иконку, при этом у её корневого элемента должен быть CSS-класс AdmonitionBlock--YDF-SVG_Icon:

Как видно, пользовательская иконка меньше по размерам, чем стандартная. На самом деле, высота у них одинаковая (она задана в через стили), а проблема заключается в том, что у этой иконки между областью, называемой «view box» и фигурой, которую образует элемент path, имеется зазор. Этот зазор не имеет отношения к CSS-свойствам padding и margin, ровно как и не имеет отношения с CSS как к таковому — дело в самом SVG-изображении. Проблема в том, что у каждого поставщика SVG-иконок своя величина этого зазора, а в YDF такого зазора нет, потому что регулировать расстояние до других элементов надлежит уже с помощью CSS.

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

Кнопки

Многие сообщения могут вызвать ступор у пользователей с низкой компьютерной грамотностью, а таковых всё ещё немало. Чтобы повысить комфорт таких пользователей, следует предложить им как-либо отреагировать на сообщение, при этом подготовить кнопку для соответствующего действия. Например:

  • В случае сообщения об ошибке при получении данных можно подготовить кнопку, которая запустит процесс повторного получения данных. Если ошибка произошла из-за нестабильного интернет соединения, то при его восстановлении повторная попытка получения данных может завершиться успешно.
  • В случае сообщения о том, что данных пока нет, можно предложить пользователю эти данные добавить, если у него есть на это право. Если для добавления данных существует отдельная страница, то кнопка в данном случае будет ссылкой, ведущей на эту страницу.
  • Если же вообще данные есть, но нет данных, соответствующей конкретному фильтру, то соответствующему сообщению можно добавить кнопку сброса фильтров.

Если кнопка или ссылка одна, и Вы хотите расположить её по центру, то укажите ей CSS-класс AdmonitionBlock--YDF-CenteredButton:

© 2023 Yamato Daiwa Co., Ltd.