Перейти к содержанию
Invision byte
  • Регистрация

Кнопки

Классы кнопок, описанные в этой инструкции, могут быть применены к элементам, например как 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>

 

  Пожаловаться на Документ


×
×
  • Создать...

Важная информация

Используя наш сайт вы соглашаетесь с нашей Политикой конфиденциальности

  Я принимаю