面板干啥的

如圖，一個(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的類，然后把圖片嵌在里面就好了。

參考

面板 - UIkit 中文文檔