@gulcc/tabler

Vue 3 组件库，基于 Tabler 设计系统（Vue 3.5+）。

安装

pnpm add @gulcc/tabler

样式（必读）

⚠️ 组件样式依赖 Tabler 基础样式。TButton 等组件内部使用 Tabler 的全局类 （.btn、.btn-*、.w-100 等）与 :root 下的 --tblr-* 变量， 组件包本身不自动注入样式，需消费方自行引入（二选一）：

// 方式一：子路径入口（推荐）
import '@gulcc/tabler/style'

// 方式二：直接指向产物
import '@gulcc/tabler/dist/tabler.css'

不引入样式时组件可以渲染，但无 Tabler 外观。

使用

<script setup lang="ts">
import { TButton } from '@gulcc/tabler'
</script>

<template>
  <TButton color="primary">按钮</TButton>
</template>

全局注册

import { createApp } from 'vue'
import { Tabler } from '@gulcc/tabler'
import '@gulcc/tabler/style'

createApp(App).use(Tabler).mount('#app')

注册后可在模板中直接使用 <TButton>（组件名 TButton，并已声明 GlobalComponents 类型增强，模板内自动获得类型提示）。

与 Tabler 的关系

@gulcc/tabler 是独立于 Tabler 的另一个产物，两者并非同一项目：

• 本包是 Vue 3 组件库，基于 Tabler 设计系统构建： 组件的类名与 --tblr-* 变量沿用 Tabler 约定，样式产物 dist/tabler.css 由官方 @tabler/core 的编译 CSS 引入并构建。
• 图标组件由 @tabler/icons-vue 提供。
• Tabler 与 @tabler/icons-vue 均以 MIT License 授权，版权归原作者 （Tabler Authors / Paweł Kuna）所有；本包 LICENSE 文件末尾附有完整的 Third-Party Notices，请在使用或分发时一并保留。