返回介绍

面板

发布于 2019-05-26 16:28:18 字数 3710 浏览 904 评论 0 收藏 0

创建拥有不同样式的布局盒。

UIKit使用面板勾勒网页内容中的某些部分,它可以拥有不同的样式。通常,面板被布置在网格组件的网格列中。

用法

面板组件由面板本身,面板标题和面板徽章组成。为了防止产生多余的空白,面板内容顶部和底部的maigin都被移除了。

Class描述
.uk-panel<div>元素添加这个类,定义面板组件。
.uk-panel-title为标题元素添加这个类创建面板标题。
.uk-panel-badge<div> 元素添加这个类创建一个面板的徽章。风格化徽章样式最简单的方法,就是通过加入徽章组件中的修饰符类。

注意默认情况下,面板是空白的也没有样式。因此,为面板添加修饰符类的样式是很重要的。在例子中,我们使用了 .uk-panel-box 类。

Markup

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

网格中的面板Panels in a grid

这是一个关于如何在网格组件中使用面板的简单例子。两个面板都使用了.uk-width-medium-1-2类。

Markup

<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 类来创建一个可见的面板框。这是默认的面板修饰样式。

Markup

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

注意 为面板创建鼠标经过效果,只需添加 .uk-panel-box-hover 类。这将在使用锚文本时带来方便。

醒目的面板盒/Panel box primary

添加 .uk-panel-box-primary 类来修饰面板框,并以不同的颜色使其显得突出。

Markup

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

注意 为面板创建鼠标经过效果,只需添加 .uk-panel-box-primary-hover 类。这将在使用锚文本时带来方便。

次要的面板盒/Panel box secondary

为面板框添加 .uk-panel-box-secondary 类,给它一个白色的背景。

Markup

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

注意 为面板创建鼠标经过效果,只需添加 .uk-panel-box-secondary-hover 类。这将在使用锚文本时带来方便。

鼠标经过面板/Panel hover

添加 .uk-panel-hover 类为面板天鼠标经过效果,这将为用作锚的面板带来便利。

Markup

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

面板标题/Panel header

添加.uk-panel-header类,用一条水平线分隔面板的标题和内容。

Markup

<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>元素。

Markup

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

带图标的面板

在面板标题中为 <i><span> 元素添加一个 .uk-icon-* 类,可以轻松地将 图标组件中的图标应用在面板中。

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文