Material Design Lite. Button

Рассмотрим использование кнопок в MDL.

Кнопки реализованы на основе стандартного html-элемента button. Может содержать текст или изображение.

Доступны несколько видов кнопки: плоская (по умолчанию), поднимающая, FAB двух размеров и кнопка-значок. Все кнопки могут быть простыми (светло-серые) и цветными, а также быть в недоступном состоянии.

Классы кнопок.

mdl-button - обязательный класс для кнопки
mdl-js-button - обязательный класс для кнопки
mdl-button--raised - выпуклый эффект. Используется для fab, mini-fab, icon
mdl-button--fab - Круглая кнопка FAB. Используется для fab, mini-fab, icon
mdl-button--mini-fab - Маленькая круглая FAB. Используется для fab, mini-fab, icon
mdl-button--icon - Круглая кнопка-значок.
mdl-button--colored - Цветная кнопка (primary или accent color, в зависимости от типа кнопки). Цвета определены в material.min.css
mdl-button--primary - Цвет primary. Цвета определены в material.min.css
mdl-button--accent - Цвет accent. Цвета определены в material.min.css
mdl-js-ripple-effect - эффект ripple. Можно комбинировать с другими классами

Подключаем к элементу button один или несколько классов.


<button class="mdl-button mdl-js-button mdl-button--raised">Кнопка стандартная</button>

Примеры

FAB-кнопка с эффектом ripple (простая и цветная)

Мини-FAB

Выпуклая кнопка

Цветные выпуклые кнопки (стандарт и акцентированный)

Плоские кнопки (Стандарт, ripple, disabled

А также со цветами Prmary и Accent

Кнопка-значок (круглая) - обычная и цветная

Вернуться на общую страницу Material Design Lite