Панель

Создать разметка коробок с разными стилями.

UIkit использует панели наметить определенные разделы вашего Контента, который можно стилизовать по-разному. Как правило, щиты располагаются в грид колонки от Грид компонент.

Использование

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

Пример

Примечание по умолчанию панель является пустым и не имеет никакого стайлинга. Именно поэтому важно добавить модификатор класса, который придает панели некоторые укладки. В наших примерах мы использовали .uk-panel-box класса.

Разметки

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">...</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>

Панели в грид

Это короткий пример того, как использовать панели с Грид компонент. Обе панели используют .uk-width-medium-1-2 класса.

Пример

Разметки

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
</div>

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

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

Панель коробка

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

Пример

Разметки

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

Примечание создать наведение влияние на панель, просто добавьте .uk-panel-box-hover класса. Это пригодится при работе с якорями.

Панель коробки первичный

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

Пример

Разметки

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

Примечание создать наведение влияние на панель, просто добавьте .uk-panel-box-primary-hover класса. Это пригодится при работе с якорями.

Панель коробки вторичный

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

Пример

Разметки

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

Примечание создать наведение влияние на панель, просто добавьте .uk-panel-box-secondary-hover класса. Это пригодится при работе с якорями.

Панель наведение

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

Пример

Разметки

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

Панель заголовка

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

Пример

Разметки

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

Панель космос

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

Пример

Разметки

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

Группа делителя

Добавить .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 класс Грид компонент отделиться грид столбцов.

Панель ящика с тизер

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

Пример

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Разметки

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

Панель с иконки

Легко применить иконка от нашего Иконка компонент на панель, добавив одну из предложенных .uk-icon-* классов <i> или <span> элемент внутри панели заголовка.

Пример

Разметки

<div class="uk-panel">
    <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>