# 面板/Panel 創建擁有不同樣式的布局盒。 UIKit使用面板勾勒網頁內容中的某些部分，它可以擁有不同的樣式。通常，面板被布置在[網格組件](grid.html)的網格列中。 * * * ## 用法 面板組件由面板本身，面板標題和面板徽章組成。為了防止產生多余的空白，面板內容頂部和底部的maigin都被移除了。 | Class | 描述 | | --- | --- | | `.uk-panel` | 為`&lt;div&gt;`元素添加這個類，定義面板組件。 | | `.uk-panel-title` | 為標題元素添加這個類創建面板標題。 | | `.uk-panel-badge` | 為 `&lt;div&gt;` 元素添加這個類創建一個面板的徽章。風格化徽章樣式最簡單的方法，就是通過加入[徽章組件](badge.html)中的修飾符類。 | ### Example  注意默認情況下，面板是空白的也沒有樣式。因此，為面板添加修飾符類的樣式是很重要的。在例子中，我們使用了 `.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 這是一個關于如何在[網格組件](grid.html)中使用面板的簡單例子。兩個面板都使用了`.uk-width-medium-1-2`類。 #### Example  #### 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` 類來創建一個可見的面板框。這是默認的面板修飾樣式。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-box">...</div> ``` 注意 為面板創建鼠標經過效果，只需添加 `.uk-panel-box-hover` 類。這將在使用錨文本時帶來方便。 * * * ### 醒目的面板盒/Panel box primary 添加 `.uk-panel-box-primary` 類來修飾面板框，并以不同的顏色使其顯得突出。 #### Example  #### 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` 類，給它一個白色的背景。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div> ``` 注意 為面板創建鼠標經過效果，只需添加 `.uk-panel-box-secondary-hover` 類。這將在使用錨文本時帶來方便。 * * * ### 鼠標經過面板/Panel hover 添加 `.uk-panel-hover` 類為面板天鼠標經過效果，這將為用作錨的面板帶來便利。 #### Example  #### Markup ``` <a class="uk-panel uk-panel-hover" href="">...</a> ``` * * * ### 面板標題/Panel header 添加`.uk-panel-header`類，用一條水平線分隔面板的標題和內容。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-header">...</div> ``` * * * ### 面板間距 添加 `.uk-panel-space` 添加類來增加面板四周的間距。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-space">...</div> ``` * * * ### 面板分隔線 添加 `.uk-panel-divider` 類將垂直堆疊的面板用水平線進行分隔。 #### Example  #### Markup ``` <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> ``` 注意使用[網格組件](grid.html) 中的 `.uk-grid-divider` 類分隔網格列。 * * * ## 帶圖片預覽的面板框 為了在一個面板內顯示不帶有任何邊框的圖片，僅需添加`.uk-panel-teaser`類至該面板內部的`&lt;div&gt;`元素。 ### Example  ### Markup ``` <div class="uk-panel uk-panel-box"> <div class="uk-panel-teaser"> <img src="" alt=""> </div> </div> ``` * * * ## 帶圖標的面板 在面板標題中為`&lt;i&gt;`或`&lt;span&gt;`元素添加一個`.uk-icon-*`類，可以輕松地將 [圖標組件](icon.html)中的圖標應用在面板中。 ### Example  #### Markup ``` <div class="uk-panel"> <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3> </div> ```