面板

创建具有不同样式的布局框。

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>