Button

Кнопка имеет репутацию простейшего 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-код получится на выходе.

• Сводка
• Использование
  • Разметка
    • Подключение в проект
    • Pug-примесь Button--YDF
      • Минимальный пример
      • Контроль переполнения
      • SVG-иконки
        • Пользовательские иконки
  • Логика

Сводка

Pug-примесь

Button--YDF

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

btn-ydf

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

provideButtonYDF_Component

Готовые темы

Button__YDF.Themes.regular

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

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

Button__YDF.GeometricVariations.regular

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

Button__YDF.GeometricVariations.small

Компактная

Button__YDF.GeometricVariations.linkLike

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

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

Button__YDF.GeometricModifiers.pillShape

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

Button__YDF.GeometricModifiers.squareShape

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

Button__YDF.GeometricModifiers.squareShapeUnlessOverflowed

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

Button__YDF.GeometricModifiers.singleLine

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

Button__YDF.GeometricModifiers.noLeftBorderAndRoundings

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

Button__YDF.GeometricModifiers.noRightBorderAndRoundings

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

Button__YDF.GeometricModifiers.noTopBorderAndRoundings

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

Button__YDF.GeometricModifiers.noBottomBorderAndRoundings

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

Button__YDF.GeometricModifiers.noRoundings

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

Button__YDF.GeometricModifiers.horizontallyShrinkable

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

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

Button__YDF.DecorativeVariations.regular

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

Button__YDF.DecorativeVariations.accented

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

Button__YDF.DecorativeVariations.danger

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

Button__YDF.DecorativeVariations.linkLike

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

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

Button__YDF.DecorativeModifiers.bordersDisguising

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

Button__YDF.DecorativeModifiers.noBackground

Без заливки

Button__YDF.DecorativeModifiers.noBackgroundInDefaultState

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

Loading placeholder

Button--YDF__LoadingPlaceholder

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

Разметка

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

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

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug