tabler

Tabler

Tabler 是一款免费的 MIT 许可 UI 工具包，基于 Bootstrap 5 构建，适用于管理仪表板。它通过 @tabler/core npm 包提供编译后的 CSS 和 JavaScript，且所有 Bootstrap 5 类和 JavaScript 行为仍可正常使用。

查阅文档，不要猜测类名

https://docs.tabler.io 上的文档专为 Agent 发布：

• https://docs.tabler.io/llms.txt 列出了所有页面，并为每个组件提供一句话摘要和类名参考。请先阅读它以找到正确的页面。
• 在任何文档 URL 后追加 .md，即可获取该页面的 Markdown，例如 https://docs.tabler.io/ui/components/card.md。文件中包含说明文字和每个示例的确切标记。
• https://docs.tabler.io/llms-full.txt 是整套文档的单文件版本。

为组件编写标记之前，请先获取其 .md 页面，并复制最符合任务需求的示例。只使用文档或 Bootstrap 5 中出现的类。不要臆造 tabler-* 类。

安装

纯 HTML，通过 CDN 安装：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></script>

将样式表放在 <head> 中，将脚本放在 <body> 末尾。当标签带有 integrity 和 crossorigin 属性时，请保持原样；这些哈希值对应此特定版本。在使用打包工具的项目中，安装软件包并导入相同的文件：

npm install @tabler/core

import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/core/dist/js/tabler.min.js'

可选插件样式表与核心文件放在同一目录下：tabler-flags.min.css、tabler-socials.min.css、tabler-payments.min.css、tabler-vendors.min.css、tabler-marketing.min.css、tabler-themes.min.css。React、Vue、Next.js、Nuxt、Angular、SvelteKit、Astro、Laravel、Rails、Django 和 Symfony 的框架指南位于 https://docs.tabler.io/ui/getting-started/frameworks。

页面骨架

每个应用页面都遵循相同的结构。https://docs.tabler.io/ui/layout/page-layouts.md 提供了水平、垂直和组合导航布局的完整标记。

<div class="page">
  <header class="navbar navbar-expand-md d-print-none">
    
  </header>
  <div class="page-wrapper">
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <div class="page-pretitle">Overview</div>
            <h2 class="page-title">Dashboard</h2>
          </div>
          <div class="col-auto ms-auto d-print-none">
            
          </div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="container-xl">
        <div class="row row-deck row-cards">
          
        </div>
      </div>
    </div>
    <footer class="footer footer-transparent d-print-none">
      <div class="container-xl"></div>
    </footer>
  </div>
</div>

• 侧边栏是 <aside class="navbar navbar-vertical navbar-expand-lg">，放在 .page-wrapper 之前。
• 内容放在卡片中：使用 .card，并搭配 .card-header、.card-body 和 .card-footer。将卡片放入 .row.row-deck.row-cards，使其高度对齐。
• 固定宽度页面使用 .container-xl，全宽页面使用 .container-fluid。

图标

图标使用来自 Tabler Icons 的内联 SVG（https://tabler.io/icons，也可使用 @tabler/icons 软件包）。为 <svg> 添加 icon 类，并添加 icon-sm、icon-md 或 icon-lg 来设置尺寸。在按钮或链接中，图标放在文本之前。装饰性图标添加 aria-hidden="true"。

色彩模式与主题

在 <html> 上设置 data-bs-theme="dark"、"light" 或 "auto"，以选择色彩模式。data-bs-theme-base、data-bs-theme-font、data-bs-theme-primary 和 data-bs-theme-radius 可分别调整灰色调、字体系列、主色和圆角半径。详情请参阅 https://docs.tabler.io/ui/getting-started/color-modes.md 和 https://docs.tabler.io/ui/getting-started/customize.md。

颜色使用 Bootstrap 风格的名称：primary、secondary、success、warning、danger、info，以及 Tabler 的调色板（blue、azure、indigo、purple、pink、red、orange、yellow、lime、green、teal、cyan）。它们可用于 bg-{color}、text-{color}、btn-{color}、badge bg-{color}、alert-{color} 等。

交互式组件

下拉菜单、模态框、画布外组件、工具提示、弹出框、Toast、标签页和折叠组件使用 Bootstrap 5 数据 API：data-bs-toggle、data-bs-target、data-bs-dismiss。当元素带有 data-bs-toggle="tooltip" 或 data-bs-toggle="popover" 时，tabler.min.js 会自动初始化工具提示和弹出框。其余组件无需额外的 JavaScript。

经验法则

• 优先使用 Tabler 组件，而不是编写自定义 CSS。间距、颜色和排版使用 Bootstrap 工具类（mb-3、text-secondary、fw-bold）。
• 按钮、徽章、头像或标签组使用 .btn-list、.badge-list、.avatar-list 或 .tag-list 包裹，而不是手动添加外边距。
• 表单使用 .form-label、.form-control、.form-select、.form-check 和 .form-hint，与 Bootstrap 相同。
• 表格在 .table-responsive 中使用 .table；如果表格占满卡片，通常还会使用 .card-table。
• 保持标记的无障碍性：使用真正的 <button> 元素，为输入框添加标签，为仅含图标的按钮添加 aria-label。
• 在线演示 https://preview.tabler.io 展示了所有布局和组件的实际用法。不确定如何组合各部分时，请查看对应的演示页面。