# jmhc-tabbar

> A simple roving tabbar component based on uniapp

Latest version **0.1.1** (published 2020-03-11) · 0 weekly downloads

## Install

```sh
npm install jmhc-tabbar
pnpm add jmhc-tabbar
yarn add jmhc-tabbar
bun add jmhc-tabbar
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-03-11 |
| First published | 2020-03-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jumihc |
| Maintainers | demonyang1012 |
| Keywords | uni, uniapp, tabbar |

## Links

- npm: https://www.npmjs.com/package/jmhc-tabbar
- Repository: https://github.com/jumihc-company/uni-tabbar
- Homepage: https://github.com/jumihc-company/uni-tabbar#readme
- Issues: https://github.com/jumihc-company/uni-tabbar/issues
- npm.io page: https://npm.io/package/jmhc-tabbar

## Dependencies (2)

- [@dcloudio/uni-h5](https://npm.io/package/@dcloudio/uni-h5.md) latest
- [@dcloudio/uni-app-plus](https://npm.io/package/@dcloudio/uni-app-plus.md) latest

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2020-03-11
- 0.1.0 — 2020-03-10

## README

### 介绍

一款基于uniapp的简易tabBar组件

### 使用方式

引用组件

```
npm install jmhc-tabbar
import jmhcTabbar from "jmhc-tabbar"
Vue.use(jmhcTabbar)
```

使用组件

```
<jmhc-tabbar :list='list' :midButton="midButton" :tabbarStyle="tabbarStyle"></jmhc-tabbar>
```

```
export default {
	data() {
		return {
			midButton:true,
			tabbarStyle:{
				height:'60px',
				boxShadow:' 0 -1px 6px red'
			},
			list: [
				{
					hasBadge: false,
					pagePath: '/pages/index/index2',
					text: 'ss', 
					iconPath: '../../static/fuwu1.png', 
					selectedIconPath: '../../static/fuwu2.png'
				},
				{
					hasBadge: true,
					pagePath: '/pages/index/index', 
					text: 'ss', 
					iconPath: '../../static/fuwu1.png', 
					selectedIconPath: '../../static/fuwu2.png' 
				},
			]
		}
	},
}
```



### 属性说明

|    属性     |  类型   | 默认值 |               说明               | 是否必填 |
| :---------: | :-----: | :----: | :------------------------------: | -------- |
|    list     |  Array  |        |          tabbar数据数组          | yes      |
|  midButton  | Boolean | false  | 是否突起（仅在list为奇数时有效） |          |
| tabbarStyle | Object  |        |  tabbar样式（支持css所有样式）   |          |
| circleStyle | Object  |        |       凸起圆的样式（如下）       |          |
|  textStyle  | Object  |        |      list中文本样式（如下）      |          |
|  imgStyle   | Object  |        |         图片样式（如下）         |          |
| badgeStyle  | Object  |        |   角标样式（支持css所有样式）    |          |

list属性说明：

|       属性       |  类型  |            值            |                  说明                  |
| :--------------: | :----: | :----------------------: | :------------------------------------: |
|      badge       | Number |                          | 如果有角标传入角标的值，没有不写该参数 |
|     pagePath     | String |  '/pages/index/index2'   |  页面路径，必须在 pages .json中先定义  |
|       text       | String |          "ssss"          |             tab按钮上文字              |
|     iconPath     | String | '../../static/fuwu1.png' |                图片路径                |
| selectedIconPath | String | '../../static/fuwu2.png' |             选中时图片途径             |

circleStyle属性说明：

|   属性    |  类型  |         值         |                             说明                             |
| :-------: | :----: | :----------------: | :----------------------------------------------------------: |
|    top    | String |       '10px'       | 相对于tabbar的位置（还包括right,left,bottom,translate等与位置相关的） |
|   width   | String |       ‘50px’       |                 凸起圆的宽度（还包括height）                 |
| boxShadow | String | '0 -1px 6px black' |                          突起的阴影                          |

textStyle属性说明：

|     属性      |  类型  |   值    |       说明       |
| :-----------: | :----: | :-----: | :--------------: |
|     color     | String | 'black' |     文本颜色     |
| selectedColor | String | ‘green’ | 选中时文本的颜色 |
|   fontSize    | Number |   16    |     字体大小     |
|  paddingTop   | Number |    1    | 文字与图片的距离 |

imgStyle属性说明：

|   属性    |  类型  |  值  |      说明      |
| :-------: | :----: | :--: | :------------: |
| imgWidth  | Number |  21  |    图片宽度    |
| imgHeight | Number |  21  |    图片高度    |
| midWidth  | Number |  51  | 突起图片的宽度 |
| midHeight | Number |  51  | 突起图片的高度 |

---
_Source: https://npm.io/package/jmhc-tabbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._