Сворачиваемая панель Bootstrap со значком состояния

Категория: Разработка
Опубликовано: 01.02.2018
465

Введение

Часто усердные поиски элементарного элемента управления в интернете дают огромное количество примеров, основанных на написании дополнительных скриптов на jQuery (или JavaScript). Это не является преступлением, но не так удобно, как использование чистого CSS. Проблема использования скриптов для оформления простых элементов особенно ощутима при разработке качественных модулей для CMS: когда один модуль должен быть загружен на страницу несколько раз, правильная загрузка скриптов оказывается серьезной головной болью, особенно в «живых» проектах.

Поэтому в данной статье будет описан простой способ создания сворачиваемой панели со значком, отображающим текущее состояние панели (свернута/развернута) при помощи нескольких строк чистого CSS.

Разумеется, полностью избежать использования JavaScript нам не удастся, но для работы предложенного примера достаточно будет подключить две проверенные и надежные библиотеки: Bootstrap и jQuery.

Инструкции

1. Подключаем необходимые стили и скрипты

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

Добавлять стили можно прямо в тексте страницы при помощи тэга <style>…</style>, но по мере роста проекта искать отдельные вставки со стилями в фале-макете становится не совсем удобно. В моем случае все дополнительные стили будут прописаны в файле «style.css».

2. Вставляем в нужное место код панели Bootstrap

<div class="panel panel-default">
	<div class="panel-heading" data-toggle="collapse" data-target="#test-panel" aria-expanded="false">
		<h3 class="panel-title">Заголовок панели</h3>
	</div>
	<div class="panel-body collapse" id="test-panel">
		<h3>Содержимое панели</h3>
		<p>Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
	</div>
</div>

Это почти стандартная панель для Bootstrap, примеры которой можно найти на многих ресурсах, но в нее внесены несколько дополнений, которые помогут решить поставленную задачу.

В качестве элемента управления, при нажатии на который будет сворачиваться и разворачиваться панель будет использован заголовок панели (блок с классом «panel-heading»). В качестве блока с содержимым будет использовано «тело» панели (блок с классом «panel-body»)

В связи с этим у заголовка появляются дополнительные атрибуты:

  • data-toggle="collapse" – элемент используется для сворачивания/разворачивания
  • aria-expanded="false" – при загрузке страницы панель не развернута (ниже приведены примеры развернутого состояния).
  • data-target="#test-panel" – указан ID элемента, состояние которого будет изменяться

Для «тела» панели тоже появляется дополнительный атрибут, а также добавляется класс «collapse»:

  • id="test-panel" (такой же ID, какой указан в атрибуте «data-target» у заголовка, но без знака решетки)
  • class="panel-body collapse"

3. Добавляем стили для отображения иконки

Для того чтобы показать значок состояния панели, используем следующий CSS:

.panel-heading[data-toggle="collapse"] .panel-title {
	cursor: pointer;
}
.panel-heading[data-toggle="collapse"] .panel-title:after {
	font-family: 'Glyphicons Halflings';
	content: "\e079";
	float: right;
	padding-left: 1em;
}
.panel-heading[data-toggle="collapse"][aria-expanded="true"] .panel-title:after {
	content: "\e114";
}

Для отображения значка используется псевдо-элемент «after» со шрифтом «Glyphicons Halflings» (иконочный шрифт Bootstrap), расположенный сразу после заголовка и выровненный по правому краю.

Для вывода подходящего значка состояния панели используется простой прием. Так как Bootstrap устанавливает атрибут заголовка панели «aria-expanded» в значения «true» или «false» в зависимости от текущего состояния, достаточно установить необходимое значение содержимого (content) псевдо-элемента «after».

В значении параметра «content» указывается Юникод требуемого символа. Подробнее о работе с иконочными шрифтами и определении их кодов можно прочитать здесь.

 

Примеры и варианты

При помощи небольших изменений HTML и CSS можно изменить внешний вид панели.

Пример 1: Начальное состояние

Для того, чтобы при начальной загрузке панель была развернута необходимо в заголовке установить атрибут «aria-expanded» в значение «true», а в «теле» добавить класс «in».

...
<div class="panel-heading" ... aria-expanded="true">
	...
</div>
<div class="panel-body collapse in" ...>
	...
</div>
...

 

Пример 2: Варианты оформления

Bootstrap позволяет использовать несколько вариантов оформления панелей «panel-default», «panel-primary», «panel-success», «panel-info», «panel panel-warning», «panel-danger». Для установки варианта достаточно добавить выбранный класс к «обертке» панели.

<div class="panel panel-primary">
...
</div>

 

 

Пример 3: Варианты значков

Поменяв в CSS коды символов, можно отобразить другие значки состояния. Например:

...
.panel-heading[data-toggle="collapse"] .panel-title:after {
	...
	content: "\e105";
	...
}
.panel-heading[data-toggle="collapse"][aria-expanded="true"] .panel-title:after {
	...
	content: "\e106";
	...
}

 

Пример 4: Положение значков

Если содержимое панели выровнено по правому краю, а панель растянута на всю ширину экрана, возможно, стоит разместить значки состояния панели слева от заголовка. При этом желательно установить небольшой отступ, чтобы значок не сливался с текстом.

...
.panel-heading[data-toggle="collapse"] .panel-title:after {
	...
	float: left;
	padding-right: 1em;
	...
}
...


Комментарии