Панель

• Применение
• Панель в грид-контейнере
• Модификаторы
• Panel box
• Panel box primary
• Panel box secondary
• Panel hover
• Panel header
• Panel space
• Panel divider
• Panel teaser
• Panel с иконками

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

Применение

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

Заметка Самый простой способ стилизовать ваш 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, чтобы создать оформленный блок. Это модификатор оформленной панели по умолчанию.

Пример

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

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

Panel box primary

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

Пример

<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 и придать светлый фон.

Пример

<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 , чтобы разделить заголовок панели и ее содержимое горизонтальной линией.

Пример

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

Panel space

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

Пример

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

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>