# nav-tab

**Repository Path**: lisl4/nav-tab

## Basic Information

- **Project Name**: nav-tab
- **Description**: 通用的移动端 web 页签导航栏组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-12-19
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 欢迎

本项目有任何问题，欢迎提 issue 。

## 项目介绍

这是一个移动端 UI 插件项目，是一个可滑动切换的导航栏组件，基于 Vue3.x + TypeScript + Vite 开发。

入口文件为 `src/index.ts` 。

支持全局注册和按需引入，详见 `src/index.ts` 。

## 安装

```bash
npm install nav-tab
```

## 构建

```bash
npm run build
```

示例：
```bash
$ npm run build

> nav-tab@0.0.1-rc.2 build
> vue-tsc -b && vite build --mode build

vite v6.1.0 building for build...
transforming...
✓ 13 modules transformed.
rendering chunks...
computing gzip size...
dist/nav-tab.css     1.14 kB │ gzip: 0.49 kB
dist/es/nav-tab.js  10.67 kB │ gzip: 4.04 kB │ map: 33.58 kB
Entry module "src/index.ts" is using named and default exports together. Consumers of your bundle will have to use `chunk.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
dist/nav-tab.css      1.14 kB │ gzip: 0.49 kB
dist/cjs/nav-tab.cjs  7.54 kB │ gzip: 2.91 kB │ map: 32.97 kB
✓ built in 208ms

```

## 作为依赖库使用

### 全局注册或按需引入

#### case1、全局注册

示例：
```ts
import { createApp } from 'vue'
import App from './App.vue'
import NavTab from 'nav-tab'
// - 【#警告】：此处引入的样式较早，会被后面引入的样式覆盖;也可能被前面引入的样式（如 ./style.css）影响（非覆盖）。
import 'nav-tab/nav-tab.css';

const app = createApp(App)
app.use(NavTab) // 全局引入 nav-tab 插件
app.mount('#app')
```

#### case2、按需引入

示例：
```ts
import { TabItem, TabsHead, TabsBottom } from 'nav-tab';
import 'nav-tab/nav-tab.css';
```

### 样式的引用

样式的引用方式，要参考**「nav-tab 库 -> package.json -> exports 选项」**中，导出样式文件的方式。

比如：

```json
"exports": {
    "./nav-tab.css": "./dist/nav-tab.css",
},
```

那么，

```ts
import 'nav-tab/nav-tab.css';
```

 就相当于引入了 `./dist/nav-tab.css` 。