Button (React)

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

• Сводка

Сводка

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

Badge

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

provideBadgeYDF_Component

Готовые темы

Badge.Themes.regular

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

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

Badge.GeometricVariations.regular

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

Badge.GeometricVariations.small

Компактная

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

Badge.GeometricModifiers.pillShape

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

Badge.GeometricModifiers.singleLine

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

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

Badge.DecorativeVariations.veryCatchyBright

Badge.DecorativeVariations.catchyBright

Badge.DecorativeVariations.modestlyCatchyBright

Badge.DecorativeVariations.neutralBright

Badge.DecorativeVariations.modestlyCalmingBright

Badge.DecorativeVariations.calmingBright

Badge.DecorativeVariations.achromaticBright

Badge.DecorativeVariations.veryCatchyPastel

Badge.DecorativeVariations.catchyPastel

Badge.DecorativeVariations.modestlyCatchyPastel

Badge.DecorativeVariations.neutralPastel

Badge.DecorativeVariations.modestlyCalmingPastel

Badge.DecorativeVariations.calmingPastel

Badge.DecorativeVariations.achromaticPastel

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

Badge__YDF.DecorativeModifiers.bordersDisguising

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

Badge__YDF.DecorativeModifiers.noBackground

Без заливки

Loading placeholder

Доступен