@gulcc/tabler-vue

📖 中文文档 | 🌐 English Documentation

基于 Tabler 设计规范的 Vue 3 企业级 UI 组件库。

保留 Tabler 优雅的视觉规范，提供开箱即用的 Vue 组件体验。严格遵循 Tabler CSS 类名体系，无需编写额外样式即可获得统一的视觉体验。

技术栈

• Vue 3.5+ — Composition API + <script setup lang="ts">
• TypeScript — 完善的类型推导与 IDE 支持
• Tabler CSS — 原生 Tabler 类名

安装

pnpm add @gulcc/tabler-vue

依赖

使用本组件库需要同时安装以下 peer 依赖：

pnpm add @tabler/core @tabler/icons-vue

⚠️ 注意：引入 @tabler/core 会带来 Bootstrap 的全局样式重置（Reboot）。 强烈建议在全新项目或以 Tabler 为核心架构的项目中使用，避免与其他 UI 库或 Tailwind 产生样式冲突。 详见文档说明。

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import TablerVue from '@gulcc/tabler-vue'
import '@tabler/core/dist/css/tabler.min.css'

const app = createApp(App)
app.use(TablerVue)
app.mount('#app')

按需引入

<script setup lang="ts">
import { TButton, TBadge } from '@gulcc/tabler-vue'
import { IconHeart } from '@tabler/icons-vue'
</script>

<template>
  <TButton color="primary">
    <IconHeart class="icon" />
    点赞
  </TButton>
</template>

使用 Vite + unplugin-auto-import 可实现自动按需引入。

包含的组件

目前组件库已提供数十个开箱即用的高质量组件，覆盖绝大多数业务场景：

• 通用基础：Button / Badge / Spinner 等
• 导航与布局：Card / Tabs / Breadcrumb / Pagination / Steps 等
• 数据录入：Input / Select / Checkbox / Switch / ColorPicker 等完整表单体系
• 反馈与交互：Modal / Offcanvas / Dropdown / Popover / Toasts 等
• 数据展示：Avatar / Empty / Progress / Ribbon / Placeholder 等

💡 完整组件列表与交互演示，请访问 官方文档。

设计原则

• 原生体验 — 拥抱 Vue 3 Composition API 与 TypeScript。
• 原汁原味 — 严格遵循官方设计规范，无需编写繁琐的样式代码。
• 克制与灵活 — 拒绝过度封装，保留 HTML 原生语义，通过插槽释放最大扩展性。

TypeScript 支持

完整类型定义已内建，无需额外安装 @types 包：

import type { TablerColor } from '@gulcc/tabler-vue'
const color: TablerColor = 'primary'

完整文档

访问项目文档查看所有组件的交互演示、使用示例和 API 详情：

• 🇨🇳 中文官方文档
• 🇬🇧 English Documentation

许可证

MIT