Поиск сообщества

Классы кнопок, описанные в этой инструкции, могут быть применены к элементам, например как input[type="submit"] или кнопки, таким образом, чтобы пользователь мог взаимодействовать в этим. Как минимум, кнопка должна получить базовый класс ipsButton, а также класс размера и класс стиля (описание ниже). Стили кнопок ipsButton_normal Нормальная кнопка ipsButton_primary Основная кнопка ipsButton_alternate Альтернативная кнопка ipsButton_important Важная кнопка ipsButton_light Светлая кнопка ipsButton_veryLight Очень светлая кнопка ipsButton_overlaid Наложенная кнопка ipsButton_link Кнопка ссылка Размеры кнопок ipsButton_medium Средняя кнопка ipsButton_verySmall Очень маленькая кнопка ipsButton_small Маленькая кнопка ipsButton_large Большая кнопка ipsButton_veryLarge Очень большая кнопка ipsButton_fullWidth Может быть объединена с другими размерами, указанными выше. Кнопка во всю ширину Отключённые кнопки Кнопки могут быть визуально неактивными, либо путём добавления класса ipsButton_disabled, либо указания свойства disabled к элементу ввода input. Например: <a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Неактивная кнопка (ссылка)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Неактивная кнопка (input)'> Это будет выглядеть примерно так: Неактивная кнопка (ссылка) Совместные кнопки Совместные кнопки позволяют вам легко создавать панели инструментов, указав список кнопок, которые отображаются совместно друг с другом. Они создаются с помощью специального класса ipsButton_split в элементе обложки, содержащем две или более кнопки. Элемент обложки может быть тегом <ul>, или любым другим по смыслу тегом. Все кнопки в группе совместных кнопок должны быть одинакового размера, в противном случае результаты отображения будут непредсказуемы. К каждой кнопке могут быть применены различные стили. <ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Кнопка 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 3</a></li> </ul> Кнопка 1 Кнопка 2 Кнопка 3