tabler

Tabler

Tabler は、Bootstrap 5 をベースに構築された、管理ダッシュボード向けの無料の MIT ライセンス UI キットです。コンパイル済みの CSS と JavaScript が @tabler/core npm パッケージに含まれており、その下では Bootstrap 5 のすべてのクラスと JavaScript の動作が引き続き機能します。

クラス名を推測せず、ドキュメントを参照してください

https://docs.tabler.io のドキュメントは、エージェント向けに公開されています。

• https://docs.tabler.io/llms.txt には、各ページの1行の概要と、すべてのコンポーネントのクラスリファレンスが記載されています。適切なページを見つけるため、最初にこれを読んでください。
• ドキュメントの URL の末尾に .md を追加すると、そのページを Markdown 形式で取得できます。たとえば、https://docs.tabler.io/ui/components/card.md です。このファイルには説明文と、すべての例の正確なマークアップが含まれています。
• https://docs.tabler.io/llms-full.txt には、ドキュメント全体が1つのファイルにまとめられています。

コンポーネントのマークアップを書く前に、対応する .md ページを取得し、タスクに最も近い例をコピーしてください。ドキュメントまたは Bootstrap 5 に記載されているクラスのみを使用してください。tabler-* クラスを独自に作らないでください。

インストール

CDN を使用するプレーン HTML の場合：

<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（https://tabler.io/icons、および @tabler/icons パッケージ）のインライン SVG です。<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} などとして使用できます。

インタラクティブコンポーネント

ドロップダウン、モーダル、オフキャンバス、ツールチップ、ポップオーバー、トースト、タブ、折りたたみには、Bootstrap 5 のデータ API（data-bs-toggle、data-bs-target、data-bs-dismiss）を使用します。要素に data-bs-toggle="tooltip" または data-bs-toggle="popover" が指定されている場合、ツールチップとポップオーバーは tabler.min.js によって自動的に初期化されます。それ以外のコンポーネントに追加の JavaScript は必要ありません。

基本方針

• 独自の CSS を書く前に、Tabler のコンポーネントを使ってください。余白、色、タイポグラフィには Bootstrap のユーティリティ（mb-3、text-secondary、fw-bold）を使用します。
• ボタン、バッジ、アバター、タグのグループは、余白を手動で追加するのではなく、.btn-list、.badge-list、.avatar-list、.tag-list で囲んでください。
• フォームでは、Bootstrap と同じく .form-label、.form-control、.form-select、.form-check、.form-hint を使用します。
• テーブルには .table-responsive の中で .table を使用します。カード全体にテーブルを配置する場合は、多くの場合 .card-table も使用します。
• マークアップのアクセシビリティを保ってください。実際の <button> 要素を使い、入力欄にはラベルを付け、アイコンのみのボタンには aria-label を指定します。
• ライブデモ（https://preview.tabler.io）では、すべてのレイアウトとコンポーネントの使用例を確認できます。各要素の組み合わせ方がわからない場合は、該当するデモページを参照してください。