Панель : Panel

Создавайте и оформляйте стилями невероятные макеты.

UIkit 2 использует панели для выделения определенных разделов контента, которые могут быть по разному оформлены. Обычно такие панели располагаются в колонках грида из компонента Grid.

Применение

Компонент Panel состоит из самой панели, заголовка и бейджика.

Класс Описание
.uk-panel Добавьте класс uk-panel к элементу <div>, чтобы определить панель.
.uk-panel-title Добавьте элементу класс uk-panel-title, чтобы создать заголовок панели.
.uk-panel-badge Добавьте класс uk-panel-badge к элементу <div> или <span>, чтобы создать badge - значок панели, бейдж, бейджик.
Заметка Самый простой способ стилизовать ваш badge - добавить классы-модификаторы из компонента Badge.

Пример

Новинка

Заголовок панели

Банальные, но неопровержимые выводы, а также реплицированные с зарубежных источников, современные исследования, инициированные исключительно синтетически, своевременно верифицированы.

Разметка

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">Значок</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>
Примечание В примерах используется класс .uk-panel-box. По умолчанию панель не имеет стилей. Нужно добавить класс-модификатор, чтобы придать панели стиль.

Панель в грид-контейнере

Это небольшой пример того, как использовать панели UIkit 2 с компонентом Grid. В примере ниже панели используют класс .uk-width-medium-1-2.

Пример

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.

Разметка

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">
            <h3 class="uk-panel-title">Заголовок</h3>
            ...
        </div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">
            <h3 class="uk-panel-title">Заголовок</h3>
            ...
        </div>
    </div>
</div>

Модификаторы

Классы модификаторов необходимы для добавления к панелям определенного стиля. UIkit 2 включает в себя несколько модификаторов.

Panel box

Добавьте класс .uk-panel-box, чтобы создать оформленный блок. Это модификатор панели по умолчанию.

Пример

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
.uk-panel-box

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
.uk-panel-box

Заголовок

Далеко-далеко за словесными горами в стране гласных.
.uk-panel-box
.uk-panel-box-hover

Разметка

<div class="uk-panel uk-panel-box">
   ...
</div>
Примечание Чтобы создать эффект наведения на панели, просто добавьте класс .uk-panel-box-hover.
* Проверить в стилях установленный стиль цвета при наведении.

Panel box primary

Добавьте класс .uk-panel-box-primary для изменения панели блока и выделите его другим цветом.

Пример

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты.
.uk-panel-box-primary

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты.
.uk-panel-box-primary

Заголовок

Далеко-далеко за словесными горами.
.uk-panel-box-primary
.uk-panel-box-primary-hover

Разметка

<div class="uk-panel uk-panel-box uk-panel-box-primary">
    ...
</div>
Заметка Чтобы создать эффект наведения на панели, добавьте класс .uk-panel-box-primary-hover.
* Проверить в стилях установленный стиль цвета при наведении.

Panel box secondary

Добавьте класс .uk-panel-box-secondary, чтобы изменить панель блока UIkit 2 и придать светлый фон.

Пример

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты.
.uk-panel-box-secondary

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты.
.uk-panel-box-secondary

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты.
.uk-panel-box-secondary

Разметка

<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>
Заметка Чтобы создать эффект наведения на панели, добавьте класс .uk-panel-box-secondary-hover.

Panel hover

Добавьте класс .uk-panel-hover, чтобы добавить эффект наведения на панель. Это очень удобно при использовании панели в качестве якоря, ссылки.

Пример

Разметка

<a class="uk-panel uk-panel-hover" href="">...</a>

Panel header

Добавьте класс .uk-panel-header , чтобы разделить заголовок панели и ее содержимое горизонтальной линией.

Пример

Заголовок панели

Далеко-далеко за словесными горами живут рыбные тексты. .uk-panel-header

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты. .uk-panel-header

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты. .uk-panel-header

Разметка

<div class="uk-panel uk-panel-header">
    <h3 class="uk-panel-title">Заголовок</h3>
    ...
</div>

Panel space

Добавьте класс .uk-panel-space, чтобы увеличить расстояние вокруг содержимого панели.

Пример

Заголовок панели

Далеко-далеко за словесными горами живут рыбные тексты. .uk-panel-space

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты. .uk-panel-space

Заголовок

Далеко-далеко за словесными горами живут рыбные тексты. .uk-panel-space

Разметка

<div class="uk-panel uk-panel-space">
    ...
</div>

Panel divider

Добавьте класс .uk-panel-divider для разделения вертикально сложенных панелей с линиями.

Пример

Заголовок

Далеко-далеко за словесными красивыми горами живут рыбные тексты.
.uk-panel-divider

Заголовок

Далеко-далеко за словесными красивыми горами живут рыбные тексты.
.uk-panel-divider

Заголовок

Далеко-далеко за словесными красивыми горами живут рыбные тексты.
.uk-panel-divider

Разметка

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-divider">
            ...
        </div>
        <div class="uk-panel uk-panel-divider">
            ...
        </div>
        <div class="uk-panel uk-panel-divider">
            ...
        </div>
    </div>
</div>
Совет Для разделения колонок грида используйте класс .uk-grid-divider из компонента Grid UIkit 2.

Panel teaser

Чтобы вывести изображение внутри панели, которое расположено в верху панели без пробелов, добавьте класс .uk-panel-teaser к <div> элементу внутри самой панели.

Пример

Далеко-далеко за словесными горами живут рыбные тексты в буквенных домах.

Разметка

<div class="uk-panel uk-panel-box">
    <div class="uk-panel-teaser">
        <img src="" alt="">
    </div>
    <p>...</p>
</div>

Panel с иконками

Добавляйте иконки из компонента Icon к заголовкам, добавив один из классов .uk-icon-* к элементу <i> или <span> внутри самого заголовка.

Пример

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах.

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах.

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах.

Разметка

<div class="uk-panel">
    <h3 class="uk-panel-title"><i class="uk-icon-*"></i>Заголовок</h3>
</div>