Tabler Vue

简体中文

English

简体中文

English

Appearance

自定义 Tabler ​

Tabler 提供了灵活的 CSS 变量系统，你可以在不修改源码的情况下轻松调整主题风格。

自定义字体 ​

替换默认字体，以 Google Fonts 的 Inter 字体为例：

html
<!-- 在 index.html 的 <head> 中引入字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
  rel="stylesheet"
/>

<!-- 在项目的 CSS 中设置 CSS 变量 -->
<style>
  :root {
    --tblr-font-sans-serif: "Inter";
  }
</style>

自定义主色调 ​

通过覆盖 --tblr-primary CSS 变量来改变全局主色：

css
:root {
  --tblr-primary: #F11D46;
}

所有基于 primary 的组件（按钮、徽章、进度条等）将自动应用新颜色。

其他 CSS 变量 ​

Tabler 定义了大量的 CSS 变量，你可以在项目中覆盖它们来实现深度定制：

CSS 变量作用示例值
--tblr-primary主色调#206bc4
--tblr-secondary次要色#6c757d
--tblr-success成功色#2fb344
--tblr-info信息色#4299e1
--tblr-warning警告色#f76707
--tblr-danger危险色#d63939
--tblr-light浅色#f8f9fa
--tblr-dark深色#1d273b
--tblr-font-sans-serif正文字体'Inter', system-ui
--tblr-font-monospace等宽字体'Menlo', monospace
--tblr-border-radius圆角大小4px
--tblr-page-padding页面内边距1.5rem

与组件库结合 ​

在 @gulcc/tabler-vue 中使用时，只需在入口文件中定义 CSS 变量即可全局生效：

vue
<!-- App.vue -->
<style>
:root {
  --tblr-primary: #F11D46;
  --tblr-font-sans-serif: "Inter";
}
</style>

所有组件（TButton、TBadge、TAlert 等）中使用了 primary 颜色的部分会自动采用新值。