# 面板/Panel
創建擁有不同樣式的布局盒。
UIKit使用面板勾勒網頁內容中的某些部分,它可以擁有不同的樣式。通常,面板被布置在[網格組件](grid.html)的網格列中。
* * *
## 用法
面板組件由面板本身,面板標題和面板徽章組成。為了防止產生多余的空白,面板內容頂部和底部的maigin都被移除了。
| Class | 描述 |
| --- | --- |
| `.uk-panel` | 為`<div>`元素添加這個類,定義面板組件。 |
| `.uk-panel-title` | 為標題元素添加這個類創建面板標題。 |
| `.uk-panel-badge` | 為 `<div>` 元素添加這個類創建一個面板的徽章。風格化徽章樣式最簡單的方法,就是通過加入[徽章組件](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`類至該面板內部的`<div>`元素。
### Example

### Markup
```
<div class="uk-panel uk-panel-box">
<div class="uk-panel-teaser">
<img src="" alt="">
</div>
</div>
```
* * *
## 帶圖標的面板
在面板標題中為`<i>`或`<span>`元素添加一個`.uk-icon-*`類,可以輕松地將 [圖標組件](icon.html)中的圖標應用在面板中。
### Example

#### Markup
```
<div class="uk-panel">
<h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>
```
- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳