AdmonitionBlock (Vue)
Эта страница не завершена
Приносим свои извинения, но данная страница ещё не завершена.
Рамки с текстом использовались ещё задолго до компьютеризации — в книгах и другой печатной продукции. Хотя чаще всего рамкой выделяют важный текст, иногда рамкой обрамляются заметки, примечания и прочая второстепенная информация.
В разработке сайтов и приложений, выделение блока текста в рамку стало более продвинутым и частым.
- Как и в печатной продукции, рамка используется на сайтах с большим количеством текста для выделения его фрагментов. Чтобы посетитель мог мгновенно оценить важность выделяемого текста, используется цветовая кодировка: для важных блоков обычно выбирают тёплые цвета (красный, оранжевый, жёлтый), в остальных случаях — холодные (синий, голубой, зелёный) или ахроматические (чёрная или серая рамка с белым или светло-серым фоном). Кроме того, иногда используются иконки.
- В графических пользовательских интерфейсах (GUI) рамка с текстом приобрела дополнительную функцию, став одним из способов оповещения пользователя. В отличие от всплывающих сообщений, отображающихся короткий промежуток времени, рамка с текстом обычно отображается постоянно или до тех пор, пока пока пользователь не уберёт её с помощью соответствующей кнопки (если таковая имеется). Рекомендуется также предложить пользователю отреагировать на сообщение, добавив внутрь рамки дополнительные кнопки.
Использовать рамку с текстом для оповещения пользователя рекомендуется в следующих случаях:
- Отображение ошибки при получении данных с сервера
- В этом случае рекомендуется добавить кнопку для инициирования повторной попытки получения данных.
- Отображение сообщения об отсутствии данных, которые можно показать
- Следует подготовить отдельные сообщения для случаев, когда нет данных, удовлетворяющих поисковому запросу, и для случая, когда данных нет вообще. Предложить пользователю отреагировать на сообщение тоже следует по-разному: в первом случае — подготовить копку для сброса поискового запроса, а во втором — предложить добавить данные, если пользователю это позволено авторизованному на данный момент пользователю.
- Отображение коротких инструкций по использованию сайта или приложения
- Это очень важно делать для не только для новых пользователей конкретно Вашего сайта или приложения, но и для пользователей с низким уровнем компьютерной грамотности, которых ещё очень много.
- Побуждение пользователей к конкретному действию
- Например, если на Вашем сайте или приложении регистрация опциональная, то можно предложить пользователю зарегистрироваться и объяснить, какие преимущества это даст. Разумеется, в данном случае должны быть ссылки на страницу регистрации и авторизации (для уже загеристрированных пользователей).
Напротив, в следующих случах рамка с текстом не является лучших выбором:
- Отображение ошибки при отправке данных
- Отображение сообщения об успешной отправке данных
- Отображение сообщения об успешном входе в систему или выходе из неё
Для этих сценариев гораздо лучше подходят всплывающие сообщения (в YDF это компонент Snackbar).
Краткий обзор
- Класс компонента
AdmonitionBlock- Live template-ы Vue-компонента (официальный плагин для семейства сред разработки IntelliJ IDEA)
- Наподобие автодополнения
- Pug-синтаксис
AdmonitionBlock--YDF-Vue-Pug- HTML-синтаксис
AdmonitionBlock--YDF-Vue-HTML
- Сокращённый
- Pug-синтаксис
ab-ydf-vue-pug- HTML-синтаксис
ab-ydf-vue-html
- Stylus-примесь для генерации стилей
generateAdmonitionBlockYDF_GUI_ComponentStyles- Готовые темы
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-свойства
AdmonitionBlock.Properties
{
- title
- Русскоязычное наименование
- Заголовок
- Тип
- string
- Запрещён ли undefined
- Нет
- Запрещён ли null
- Да
- Минимум символов
- 1
- dismissible
- Русскоязычное наименование
- Возможно ли убрать
- Тип
- boolean
- Замещение значения undefined
- false
- Запрещён ли null
- Да
- theme
- Русскоязычное наименование
- Тема
- Тип
- string
- Замещение значения undefined
- AdmonitionBlock.Themes.regular
- Запрещён ли null
- Да
- Допустимые варианты
- AdmonitionBlock.Themes.regular
- (Любые, определённые через `AdmonitionBlock.defineThemes(themesNames)`)
- areThemesCSS_ClassesCommon
- Русскоязычное наименование
- Являются ли CSS-классы тем общими для всех компонентов
- Тип
- boolean
- Замещение значения undefined
- AdmonitionBlock.areThemesCSS_ClassesCommon
- Запрещён ли null
- Да
- geometricVariation
- Русскоязычное наименование
- Геометрическая вариация
- Тип
- string
- Замещение значения undefined
- AdmonitionBlock.GeometricVariations.regular
- Запрещён ли null
- Да
- Допустимые варианты
- AdmonitionBlock.GeometricVariations.regular
- AdmonitionBlock.GeometricVariations.stickyNoteLike
- (Любые, определённые через `AdmonitionBlock.defineGeometricVariations(geometricVariationsNames)`)
- decorativeVariation
- Русскоязычное наименование
- Декоративная вариация
- Тип
- string
- Запрещён ли undefined
- Да
- Запрещён ли null
- Да
- Допустимые варианты
- AdmonitionBlock.DecorativeVariations.notice
- AdmonitionBlock.DecorativeVariations.error
- AdmonitionBlock.DecorativeVariations.warning
- AdmonitionBlock.DecorativeVariations.success
- AdmonitionBlock.DecorativeVariations.guidance
- AdmonitionBlock.DecorativeVariations.question
- (Любые, определённые через `AdmonitionBlock.defineDecorativeVariations(decorativeVariationsNames)`)
- hasDefaultSVG_Icon
- Тип
- boolean
- Замещение значения undefined
- false
- Запрещён ли null
- Да