# ly-tab

> A better mobile touch-swappable reusable component for vue2.*

Latest version **3.0.2** (published 2022-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ly-tab
pnpm add ly-tab
yarn add ly-tab
bun add ly-tab
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2022-04-30 |
| First published | 2018-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 0 |
| Unpacked size | 61.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 325 |
| Author | ScoutYin |
| Maintainers | peanuty |
| Keywords | Vue, components, mobile, swap, reusable, tabs, tabBar, tab |

## Links

- npm: https://www.npmjs.com/package/ly-tab
- Repository: https://github.com/ScoutYin/ly-tab
- Issues: https://github.com/ScoutYin/ly-tab/issues
- npm.io page: https://npm.io/package/ly-tab

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2022-04-30
- 3.0.1 — 2022-04-29
- 3.0.0 — 2022-04-29
- 2.1.3 — 2022-04-16
- 2.1.2 — 2018-11-17
- 2.1.1 — 2018-09-22
- 2.1.0 — 2018-08-14
- 2.0.2 — 2018-08-09
- 1.0.3 — 2018-03-06
- 1.0.2 — 2018-03-03
- 1.0.1 — 2018-03-02
- 1.0.0 — 2018-03-02

## README

# 3.x版本（非Vue3）

3.x版本将和目前的2.x版本存在使用方法及API上的不兼容，使用者如需升级，请参照3.x版本。**强烈建议**使用3.x版本，2.x版本将不再进行更新维护。

## 基本效果展示

![v3 0 0](https://user-images.githubusercontent.com/32835712/166098427-fef7c973-00aa-4a3a-82a5-41ce74dbe62f.gif)

## 安装

```shell
yarn add ly-tab
# or
npm i ly-tab
```
## 使用

### 全局注册

```js
import LyTab from 'ly-tab';

Vue.use(LyTab);
```

### 局部注册

```js
import { LyTabs, LyTabBar, LyTabItem } from 'ly-tab';

export default {
  components: {
    LyTabs,
    LyTabBar,
    LyTabItem
  }
  // ...
}
```

## LyTabs

### 简单示例

```javascript
<ly-tabs v-model="value">
  <ly-tab-item name="1" title="选项卡1" />
  <ly-tab-item name="2" title="选项卡2" />
</ly-tabs>
```

```javascript
export default {
  data() {
    return  {
      value: '1'
    }
  }
}
```

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| ---- | -----|---|----|
| value | 当前激活的 `tab` 的 name 属性值 | `string \| number` | '' |
| lineWidth | 当前激活 `tab` 下划线的宽度，单位 `px` | `number` | 30 |
| lineHeight | 当前激活 `tab` 下划线的高度，单位 `px` | `number` | 3 |
| activeColor | 激活状态下 `tab` 文案及下划线的颜色 | `string` | #1677ff |
| additionalX | 近似等于超出边界时最大可拖动距离，单位 `px` | `number` | 50 |
| reBoundExponent | 惯性回弹指数，值越大，惯性回弹距离越长 | `number` | 10 |
| inertialDuration | 惯性滑动过程的持续时间，值越小，感知上阻力越大，可近似认为惯性滑动过程速度减为零所需的时间(ms) | `number` | 1000 |
| reBoundingDuration | 回弹过程动画duration，单位 `ms` | `number` | 1000 |

### 事件

| 事件名 | 说明 | 回调参数 |
| ----- | ---- | ----- |
| change | 切换激活 tab 项的回调 | `name: string \| number` |

### 插槽

| 名称 | 说明 |
| --- | ---- |
| default | 默认插槽，放置 `LyTabItem` 组件 |

## LyTabItem

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| ---- | -----|---|----|
| title | 选项卡显示文字 | `string` | - |
| name | 选项卡标识符 | `string \| number` | 选项卡索引 |
| badge | 右上角徽标内容 | `string \| number` | - |

### 方法

| 方法名 | 说明 | 参数 | 返回值 |
| ----- | ---- | ---- | ---- |
| resize | 外层元素大小或组件布局、尺寸变化时，可以调用此方法来进行重绘 | - | - |

### 插槽

| 名称 | 说明 |
| --- | ---- |
| default | 选项卡文字内容插槽，优先级高于传入的 `title` 属性 |
| icon | 选项卡图标 |

## LyTabBar

### 简单示例

```javascript
<ly-tab-bar v-model="value">
  <ly-tab-item name="1" title="选项卡1" />
  <ly-tab-item name="2" title="选项卡2" />
</ly-tab-bar>
```

```javascript
export default {
  data() {
    return  {
      value: '1'
    }
  }
}
```

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| ---- | -----|---|----|
| value | 当前激活的 `tab` 的 name 属性值 | `string \| number` | '' |
| activeColor | 激活状态下 `tab` 文案及icon的颜色 | `string` | #1677ff |

### 事件

| 事件名 | 说明 | 回调参数 |
| ----- | ---- | ----- |
| change | 切换激活 tab 项的回调 | `name: string \| number` |

### 插槽

| 名称 | 说明 |
| --- | ---- |
| default | 默认插槽，放置 `LyTabItem` 组件 |

# Vue3版本

Vue3版本正在路上，即将到来，敬请期待。

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