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

AdmonitionBlock

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

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

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

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

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

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

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

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

Обзор

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

Использование

Разметка

Подключение в проект

Разметка данного GUI-компонента поставляется в виде Pug-примеси AdmonitionBlock--YDF. Способ подключения — стандартный: путём включения Pug-файла Components.pug в Ваш pug-файл, при этом туда же предварительно должен быть включён файл Functionality.pug (последний уже входит в шаблоны страниц , повторное включение приведёт к ошибке).

Pug-примесь AdmonitionBlock--YDF

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

© 2023 Yamato Daiwa Co., Ltd.