面板干啥的
如圖，一個(gè)面板由3部分組成
image.png
舉個(gè)例子
如下铭乾，首先創(chuàng)建面板組件剪廉，再div中添加uk-panel類可以。接下來創(chuàng)建面板徽章炕檩。添加uk-badge類斗蒋。之后是面板標(biāo)題，以及內(nèi)容笛质。
<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>
結(jié)果如下
image.png
在grid中創(chuàng)建面板
既然grid是用來布局的泉沾，那么布局里面當(dāng)然是可以放面板的。
首先創(chuàng)建grid妇押。
然后在創(chuàng)建兩塊區(qū)域跷究，uk-width-1-2之后分別把面板嵌套在這兩塊區(qū)域里面。
<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>
結(jié)果如下
image.png
給面板添加修飾
比如uk-panel-box可以為面板添加邊框敲霍。當(dāng)然你也可以利用傳統(tǒng)的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>
結(jié)果如下可以看到這個(gè)uk-panel-box還自帶陰影效果丁存。
image.png
面板添加背景色，只要加上uk-panel-box-primary 類即可柴我，結(jié)果背景色變了
image.png
鼠標(biāo)經(jīng)過效果
什么意思呢柱嫌？就是說鼠經(jīng)過面板之前面板是一個(gè)風(fēng)格，經(jīng)過面板時(shí)是另一個(gè)風(fēng)格屯换，類似hover 。這個(gè)添加uk-panerl-hover類就可以
給標(biāo)題和內(nèi)容添加分割線
<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>
結(jié)果如下
image.png
就是添加一個(gè)uk-panel-header而已与学。
帶圖標(biāo)的面板
<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>
在面板標(biāo)題內(nèi)添加一個(gè)圖標(biāo)即可彤悔。
結(jié)果如下
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>
結(jié)果如下
image.png
這個(gè)得添加一個(gè)div，這個(gè)div還得添加一個(gè)叫做uk-panel-teaser的類索守，然后把圖片嵌在里面就好了晕窑。
