``uni-app`` 扩展了常用的的UI组件，使用方式：
1. 从 [hello uniapp](https://github.com/dcloudio/hello-uniapp) 的 ``components`` 目录拷贝出以 ``uni`` 开头的相关组件，从 ``common`` 目录拷贝出 ``uni.css``（在 [HBuilderX](http://www.dcloud.io/hbuilderx.html) 中新建 ``hello uniapp`` 示例也可得到相关组件和css）。
2. 将拷贝出的组件放置于自己工程下的 ``components`` 目录，组件的使用可参考各组件的使用说明。
3. 项目中如果有多个页面用到扩展组件，可在 ``App.vue`` 里引入 ``uni.css``，若只是很少的页面用到扩展组件，仅需在用到的页面里引入 ``uni.css``，引入外部css可参考 [样式导入](/frame?id=样式导入)。
### Badge 数字角标
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，组件名：``uni-badge``，代码块： uBadge。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniBadge from "@/components/uni-badge.vue"
export default {
components: {uniBadge}
}
```
在 ``template`` 中使用组件
```html
```
**Badge 属性说明：**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|text |String | |角标内容 |
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、danger(红色)、royal(紫色) |
|inverted |Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色|
|@click |EventHandle| |点击 Badge 触发事件 |
### CountDown 倒计时
倒计时组件，组件名：``uni-countdown``，代码块： uCountDown。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniCountdown from "@/components/uni-countdown.vue"
export default {
components: {uniCountdown}
}
```
CountDown 在 ``template`` 中的使用
```html
```
**CountDown 属性说明：**
|属性名|类型|默认值 |说明|
|---|----|---|---|
|bgr-color |String|#FFFFFF|背景色|
|border-color|String|#000000|边框颜色|
|font-color |String |#000000|文字颜色|
|splitor-color|String|#000000|割符号颜色|
|timer|String||倒计时时间，格式为：``YY-mm-dd HH:ii:ss``（日期和时间之间以空格隔开），如：``2018-12-23 12:00:00``|
### Drawer 抽屉
抽屉侧滑菜单，组件名：``uni-drawer``，代码块： uDrawer。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniDrawer from "@/components/uni-drawer.vue"
export default {
components: {uniDrawer}
}
```
Drawer 在 ``template`` 中以 **插槽** 形式插入内容
```html
抽屉式导航
Item1
Item2
```
**Drawer 属性说明：**
|属性名 |类型|默认值 |说明|
|---|----|---|---|
|visible |Boolean|false|Drawer的显示状态|
|mask |Boolean |true|是否显示遮罩|
|mode|String|left|Drawe滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出|
|@close|EventHandle||组件关闭时触发事件 |
### Icon 图标
用于展示 icon，组件名：``uni-icon``，代码块： uIcon。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniIcon from "@/components/uni-icon.vue"
export default {
components: {uniIcon}
}
```
在 ``template`` 中使用组件
```html
```
**Icon 属性说明：**
|属性名 |类型|默认值 |说明|
|---|----|---|---|
|type |String ||图标图案，参考下表|
|color |String ||图标颜色 |
|size |Number |24|图标大小|
|@click |EventHandle||点击 Icon 触发事件|
**type 类型**
- contact
- person
- personadd
- contact-filled
- person-filled
- personadd-filled
- phone
- email
- chatbubble
- chatboxes
- phone-filled
- email-filled
- chatbubble-filled
- chatboxes-filled
- weibo
- weixin
- pengyouquan
- chat
- qq
- videocam
- camera
- mic
- location
- mic-filled
- location-filled
- micoff
- image
- map
- compose
- trash
- upload
- download
- close
- redo
- undo
- refresh
- star
- plus
- minus
- circle
- clear
- refresh-filled
- star-filled
- plus-filled
- minus-filled
- circle-filled
- checkbox-filled
- closeempty
- refreshempty
- reload
- starhalf
- spinner
- spinner-cycle
- search
- plusempty
- forward
- back
- checkmarkempty
- home
- navigate
- gear
- paperplane
- info
- help
- locked
- more
- flag
- home-filled
- gear-filled
- info-filled
- help-filled
- more-filled
- settings
- list
- bars
- loop
- paperclip
- eye
- arrowup
- arrowdown
- arrowleft
- arrowright
- arrowthinup
- arrowthindown
- arrowthinleft
- arrowthinright
- pulldown
- scan
### LoadMore 加载更多
用于列表中，做滚动加载使用，展示 loading 的各种状态，组件名：``uni-load-more``，代码块： uLoadMore。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniLoadMore from "@/components/uni-load-more.vue"
export default {
components: {uniLoadMore}
}
```
在 ``template`` 中使用组件
```html
```
**LoadMore 属性说明：**
|属性名 |类型|默认值 |说明|
|---|----|---|---|
|loadingType |Number |0|loading 的状态，可选值：0（loading前），1（loading中），2（没有更多了）|
|showImage |Boolean |true|是否显示 loading 图|
|color |String |#777777|图标和文字颜色 |
|contentText |Object |```{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}```|各状态文字说明|
### NavBar 导航栏
导航栏组件，主要用于头部导航，组件名：``uni-nav-bar``，代码块： uNavBar。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniNavBar from "@/components/uni-nav-bar.vue"
export default {
components: {uniNavBar}
}
```
在 ``template`` 中使用组件
```html
```
**NavBar 属性说明：**
|属性名 |类型|默认值 |说明|
|---|----|---|---|
|title |String ||标题文字|
|left-text |String ||右侧按钮文本|
|right-text |String ||右侧按钮文本|
|left-tcon |String ||左侧按钮图标（图标类型参考 [Icon 图标](/uniUI?id=icon-图标) type 属性）|
|right-tcon |String ||右侧按钮图标（图标类型参考 [Icon 图标](/uniUI?id=icon-图标) type 属性）|
|fixed |Boolean |false|是否固定顶部|
|status-bar |Boolean|false（fixed为true时，status-bar默认值为true）|是否包含状态栏，|
|shadow |Boolean|true|导航栏下是否有阴影|
|color |String |#000000|图标和文字颜色 |
|background-color|String|#FFFFFF|导航栏背景颜色 |
|@click-left|EventHandle||左侧按钮点击时触发 |
|@click-right|EventHandle||右侧按钮点击时触发 |
**NavBar 插槽**
开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
|子元素 slot 的值|说明|
|---|----|
|left |向导航栏左侧插入|
|right |向导航栏右侧插入|
|其他 |向导航栏中间插入|
```html
标题栏
left
right
```
### NumberBox 数字输入框
带加减按钮的数字输入框，组件名：``uni-number-box``，代码块： uNumberBox。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniNumberBox from "@/components/uni-number-box.vue"
export default {
components: {uniNumberBox}
}
```
在 ``template`` 中使用组件
```html
```
**NumberBox 属性说明：**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|value |Number |0|输入框当前值 |
|min |Number |-|最小值 |
|max |Number |-|最大值|
|step |Number |1|每次点击改变的间隔大小|
|disabled |Boolean|false |是否为禁用状态|
|@change |EventHandle| |输入框值改变时触发的事件，参数为输入框当前的 value |
### Popup 弹出层
在页面不同位置显示弹出层，组件名：``uni-popup``，代码块： uPopup。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniPopup from "@/components/uni-popup.vue"
export default {
components: {uniPopup}
}
```
在 ``template`` 中使用组件
```html
```
**Popup 属性说明：**
|属性名 |类型|默认值 |说明|
|---|----|---|---|
|show |Boolean|false|是否显示弹出层|
|type|String|middle|弹出层内容出现在页面的位置，可选值：top（顶部）， middle（居中）, bottom（底部）|
|msg |String ||弹出层文字内容|
|@hidePopup|EventHandle||点击遮罩时触发事件 |
**Popup 插槽**
开发者使用 Popup 时，支持向 Popup 里插入不同内容，以达到自定义的目的。
```html
使用插槽
```
### SegmentedControl 分段器
用作不同视图的显示，组件名：``uni-segmented-control``，代码块： uSegmentedControl。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniSegmentedControl from "@/components/uni-segmented-control.vue"
export default {
components: {uniSegmentedControl},
data() {
return {
items: ['选项卡1','选项卡2','选项卡3'],
current: 0
}
},
methods: {
onClickItem(index) {
if (this.current !== index) {
this.current = index;
}
}
}
}
```
SegmentedControl 在 ``template`` 中的使用
```html
选项卡1的内容
选项卡2的内容
选项卡3的内容
```
**SegmentedControl 属性说明：**
|属性名 |类型|默认值 |说明|
|---|----|---|---|
|current |Number|0|当前选中的tab索引值，从0计数|
|values |Array<String>||选项数组|
|style-type |String |button|分段器样式类型，可选值：button（按钮类型），text（文字类型）|
|active-color|String |#007aff|选中的标签背景色与边框颜色|
|@clickItem|EventHandle||组件触发点击事件时触发，参数为当前选中的tab索引值 current |
### Tag 标签
用于展示1个或多个文字标签，可点击切换选中、不选中的状态，组件名：``uni-tag``，代码块： uTag。
**使用方式：**
在 ``script`` 中引用组件
```javascript
import uniTag from "@/components/uni-tag.vue"
export default {
components: {uniTag}
}
```
在 ``template`` 中使用组件
```html
```
**Tag 属性说明：**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|text |String |- |标签内容 |
|size |String |normal|大小尺寸，可选值：normal、small |
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、danger(红色)、royal(紫色) |
|disabled |Boolean|false |是否为禁用状态|
|inverted |Boolean|false |是否无需背景颜色（空心标签）|
|circle |Boolean|false |是否为圆角|
|@click |EventHandle| |点击 Tag 触发事件 |