Продолжение темы Foundation, в которой рассмотрен вопрос создания группы кнопок (button group) и панели кнопок (button bar).
В предыдущем обзоре я с вами научился создавать кнопки на Foundation - “Foundation - создаем кнопки”. В этом обзоре мы научимся создавать группы кнопок (button group) - несколько кнопок, объединенных в группу. Такие кнопки могут применяться на странице для самых различных целей.
Группы кнопок (button group) на Foundation
С точки зрения HTML струкрута такой группы представляет из себя
обычный маркированный список с вложенными ссылками. Все дело в
CSS-классах фреймворка Foundation, которые применяются к этому списку.
Ссылку мы создаем с помощью класса .button
, как и в предыдущей статье. А для элемента ul
мы присваиваем класс .button-group
:
<ul class="button-group">
<li><a href="#" class="button">Link 1</a></li>
<li><a href="#" class="button">Link 2</a></li>
<li><a href="#" class="button">Link 3</a></li>
</ul>
В результате получаем группу с набором кнопок внутри:
Видоизменение группы кнопок (button group) на Foundation
Созданную таким образом группу кнопок можно видоизменять с помощью
дополнительных классов, как это делалось ранее. К примеру создадим две
группы кнопок и применим к ним дополнительные классы. .radius
, .round
, .alert
, .secondary
, .success
Кстати, дополнительные классы можно применять не только к элементам a
, но и к элементу ul
:
<ul class="button-group radius">
<li><a href="#" class="button alert">Link 1</a></li>
<li><a href="#" class="button secondary">Link 2</a></li>
<li><a href="#" class="button success">Link 3</a></li>
</ul>
<ul class="button-group round">
<li><a href="#" class="button alert">Link 1</a></li>
<li><a href="#" class="button secondary">Link 2</a></li>
<li><a href="#" class="button success">Link 3</a></li>
</ul>
Результат будет что-то в виде цветов итальянского флага:
Панели кнопок (button bar) на Foundation
Группы кнопок, в свою очередь, можно объединять между собой, создавая
панели кнопок (button bar). Для этой цели применяется элемент div
в классом .button-bar
:
<div class="button-bar">
<ul class="button-group">
<li><a href="#" class="button success small round">Link 1</a></li>
<li><a href="#" class="button success small round">Link 2</a></li>
<li><a href="#" class="button success small round">Link 3</a></li>
</ul>
<ul class="button-group round">
<li><a href="#" class="button alert small">Link 1</a></li>
<li><a href="#" class="button alert small">Link 2</a></li>
<li><a href="#" class="button alert small">Link 3</a></li>
</ul>
</div>
Результат будет примерно таким:
Видоизменение панели кнопок (button bar) на Foundation
Точно также, как и группу кнопок с классом .button-group
, панель кнопок .button-bar
можно видоизменять с помощью все тех же дополнительных классов, как показано на примере выше.
Создание button group и button bar c помощью Sass
Ну и по становящейся уже традиции переходим к вопросу создания панели кнопок (button bar) на Foundation c помощью Sass. Для этой цели служат два миксина:
button-group-container
button-group-style
Создаю HTML-разметку с произвольным именем класса .horizontal
:
<ul class="horizontal">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
В файле app.scss
прописываю для него следующие правила:
.horizontal{
@include button-group-container;
a{
@include button;
}
&>li{
@include button-group-style;
}
} /* end horizontal */
Результат получается таким:
У миксинов button-group-container
и button-group-style
имеются дополнительные параметры для тонкой настройки. Пример
использования данных параметров показан на странице официальной
документации - Button groups.
Редактирование файла app.scss
До этого момента так и не удосужился рассмотреть вопрос редактирования файла app.scss
.
Точнее, я уже упоминал о нем в начале обзора Foundation как о
пользовательской таблице стилей, куда можно и нужно писать свои
собственные CSS-правила. Вот теперь решил, что как раз настало время
исправить свой недочет.
В начале файла app.scss
имеются две строки:
@import "settings";
@import "foundation";
Назначение их должно быть понятно:
- строка
@import "settings";
импортирует Sass-переменные и их значения в проект - строка
@import "foundation";
импортирует сам фреймворк Foundation в проект
Однако, по аналогии с библиотекой Compass под препроцесор Sass,
фреймворк Foundation позволяет выборочно импортировать в проект те свои
возможности, которые необходимы на данный момент. Все эти возможности
оформлены в виде отдельных модулей и прописаны каждый в отдельной строке
файла app.scss
в виде длинного закоментированного списка:
@import "settings";
@import "foundation";
// Or selectively include components
// @import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
...
Допустим, на данный момент нам необходим модуль фреймворка Foundation для создания групп (button group) и панелей (button bar) кнопок. Такой модуль располагается в строке (легко найти по названию!):
// "foundation/components/button-groups";
И чтобы подключить только его, нужно выключить весь фреймворк Foundation целиком - закоментировать строку:
// @import "foundation";
и раскомментировать нижележащие строки следующим образом (только не забыть заменить запятую на точку с запятой в конце):
@import "settings";
// @import "foundation";
// Or selectively include components
@import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
"foundation/components/button-groups";
// @import "foundation/components/buttons";
// "foundation/components/clearing",
Вуаля! Все работает и не нужно “тащить” за собой целый воз плюшек, которые не нужны на данный момент.
Комментарии