Button (Vue)

Кнопка имеет репутацию простейшего GUI-компонента, с которого обычно начинают изучение UI/UX-фреймворков. Однако, несмотря на свой неприметный вид прямоугольника с надписью, этот компонент очень обманчив своей кажущейся простотой.

Его вид могу принимают целых 3 HTML-элемента: button, input и a, причём при работе с каждым из них есть свои особенности. Например иметь вложенные тэги могут иметь только button и a, а атрибуты disabled может быть добавлен только для button и input.

Что же со стилями? Да, поменять цвет обводки или фона очень просто, но по мере приближения требований к функциональности кнопки к уровню спроса на современном рынке, количество переменных в уравнении резко возрастает. Во-первых, будучи элементом управления, кнопка имеет множество состояний, такие как hover, focus, active, disabled. Все эти состояния должны быть визуально различимы, причём если есть темы, то для каждой их них (тут даже неважно, темы в понимании YDF или нет). Некоторые из этих состояний взаимоисключающие, а некоторые могут возникать одновременно, потому стили для каждого из этих состояний нужно применять в таком порядке, чтобы они не конфликтовали между собой.

А если надпись на кнопке не помещается? А если нужно добавить к надписи SVG-иконку? А у всех иконок разные размеры, и поля в SVG-холсте тоже у всех разные! Способ изменения цвета иконки зависит от её SVG-кода, а иконка должна менять свой цвет в зависимости от конкретных состояний! А если нужно, чтобы кнопка была квадратной, когда на ней одна иконка без надписи? (Хотя мы обычно не рекомендуем иконки без надписей в силу того что они могут быть непонятны пользователями с малым опытом, не всегда удаётся переубедить заказчика добавить надпись). По мере поддержке всех этих запросов выходной CSS-код стремительно увеличивается как в объёме, так и по сложности.

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

• Сводка
• Класс Button
  • Vue-свойства

Сводка

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

Button

Live template-ы Vue-компонента (официальный плагин для семейства сред разработки IntelliJ IDEA)

Наподобие автодополнения

Pug-синтаксис

Button--YDF-Vue-Pug

HTML-синтаксис

Button--YDF-Vue-HTML

Сокращённый

Pug-синтаксис

btn-ydf-vue-pug

HTML-синтаксис

btn-ydf-vue-html

Индикатор загрузки

Pug-синтаксис

Button-LoadingPlaceholder--YDF-Vue-Pug

HTML-синтаксис

Button-LoadingPlaceholder--YDF-Vue-HTML

Stylus-примесь для генерации стилей

generateButtonYDF_GUI_ComponentStyles

Готовые темы

Button.Themes.regular

Базовая (по умолчанию)

Готовые геометрические вариации

Button.GeometricVariations.regular

Базовая (по умолчанию)

Button.GeometricVariations.small

Компактная

Button.GeometricVariations.linkLike

Внешний вид обычной ссылки

Геометрические модификаторы

Button.GeometricModifiers.pillShape

Максимальное скругление углов

Button.GeometricModifiers.squareShape

Квадратная форма

Button.GeometricModifiers.squareShapeUnlessOverflowed

Квадратная форма покуда не переполнена

Button.GeometricModifiers.singleLine

Всегда одна строка с усечением текста при нехватке ширины

Button.GeometricModifiers.noLeftBorderAndRoundings

Отсутствие обводки и скруглений слева

Button.GeometricModifiers.noRightBorderAndRoundings

Отсутствие обводки и скруглений справа

Button.GeometricModifiers.noTopBorderAndRoundings

Отсутствие обводки и скруглений сверху

Button.GeometricModifiers.noBottomBorderAndRoundings

Отсутствие обводки и скруглений снизу

Button.GeometricModifiers.noRoundings

Отсутствие скруглений

Button.GeometricModifiers.horizontallyShrinkable

Сжимаема по горизонтали

Готовые декоративные вариации

Button.DecorativeVariations.regular

Базовая (по умолчанию)

Button.DecorativeVariations.accented

Акцентированная

Button.DecorativeVariations.danger

Опасное действие

Button.DecorativeVariations.linkLike

Внешний вид обычной ссылки

Декоративные модификаторы

Button__YDF.DecorativeModifiers.bordersDisguising

Эффект отсутствия обводки без изменения размеров

Button__YDF.DecorativeModifiers.noBackground

Без заливки

Button__YDF.DecorativeModifiers.noBackgroundInDefaultState

Нет заливки в начальном состоянии

Loading placeholder

Недоступен

Класс Button

Vue-свойства