UIkit panel学习记录

面板干啥的

如图，一个面板由3部分组成

image.png

举个例子
如下，首先创建面板组件，再div中添加uk-panel类可以。接下来创建面板徽章。添加uk-badge类。之后是面板标题，以及内容。

<div class="uk-panel">
  <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
  <h3 class="uk-panel-title">Title</h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

结果如下

image.png

在grid中创建面板

既然grid是用来布局的，那么布局里面当然是可以放面板的。
首先创建grid。
然后在创建两块区域，uk-width-1-2之后分别把面板嵌套在这两块区域里面。

<div class="uk-grid">
    <div class="uk-width-1-2">
        <div class="uk-panel">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>
    <div class="uk-width-1-2">
        <div class="uk-panel">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>
    
</div>

结果如下

image.png

给面板添加修饰

比如uk-panel-box可以为面板添加边框。当然你也可以利用传统的css自定义边框。

    <div class="uk-panel uk-panel-box">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

结果如下可以看到这个uk-panel-box还自带阴影效果。

image.png

面板添加背景色，只要加上uk-panel-box-primary 类即可，结果背景色变了

image.png

鼠标经过效果

什么意思呢？就是说鼠经过面板之前面板是一个风格，经过面板时是另一个风格，类似hover 。这个添加uk-panerl-hover类就可以

给标题和内容添加分割线

    <div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title">Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

结果如下

image.png

就是添加一个uk-panel-header而已。

带图标的面板

    <div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title"><i class="uk-icon-user"></i>Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

在面板标题内添加一个图标即可。
结果如下

image.png

带图片的面板

    <div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
            <div class="uk-panel-teaser">
                <img src="data:image">
            </div>
            <div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
            <h3 class="uk-panel-title"><i class="uk-icon-user"></i>Title</h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.    
        </div>
    </div>

结果如下

image.png

这个得添加一个div，这个div还得添加一个叫做uk-panel-teaser的类，然后把图片嵌在里面就好了。

参考

面板 - UIkit 中文文档