DOCSEARCHbyAlgolia
Submit Docs

Tabler Vue Component Library

website·Indexed 29 days ago

https://tabler-vue.gul.cc

A Vue.js component library featuring a wide range of UI elements including TTable, TTree, TSelect, TTimeline, TNavbar, and TTabs. It provides specialized components for data display, form input, and navigation, such as TCombobox for searchable dropdowns, TStarRating for ratings, and TPrivacyMask for blurring sensitive content.

Tokens
149.1K
Snippets
1K
Records
1.1K
Agent score
45%

What's inside Tabler Vue

  1. Overview of PrivacyMask component

    The TPrivacyMask component hides sensitive data using a CSS filter: blur() effect. It includes built-in ARIA accessibility support: aria-hidden prevents screen readers from reading blurred content, and aria-expanded communicates the reveal state. Note that this is a UI enhancement; sensitive data should still be encrypted during transmission and storage.

  2. Overview of PrivacyMask component

    The TPrivacyMask component blurs sensitive content using CSS filter: blur() and reveals it via user interaction (hover/click) or external control. It includes ARIA accessibility support: screen readers cannot read the hidden content when obscured (aria-hidden), and the reveal state is announced via aria-expanded. Note that this is a UI enhancement and not a security boundary; sensitive data should still be encrypted on the backend.

  3. Use TPopover to display floating content

    The TPopover component displays detailed content in a floating card. It supports custom titles, body text, multiple placement directions, and can be triggered by either clicking or hovering over a target element. It uses @floating-ui/vue for smart positioning and auto-flipping when screen space is limited.
    <script setup lang="ts">
import { TPopover } from '@gulcc/tabler-vue'
</script>

<template>
  <TPopover title="Title" content="Popover content">
    <TButton>Click me</TButton>
  </TPopover>
</template>

  4. Implement a selection interface using TSelectboxes

    The TSelectboxes component provides visually rich selection options. It can be rendered in standard, pill, or card box styles and supports grid layouts via the cols prop. It is suitable for scenarios requiring more visual weight than a standard dropdown, supporting icons, descriptions, images, and colors.

  5. Understand @gulcc/tabler-vue design philosophy and styling

    @gulcc/tabler-vue is a Vue 3 component library for the Tabler (Bootstrap 5) ecosystem. It follows a "Lightweight Wrap, Native Driven" philosophy, meaning components contain minimal custom CSS and rely on official Tabler atomic classes. This allows developers to use all CSS utility classes from the Tabler documentation directly within the project.

  6. Use TTag for content labeling and categorization

    The TTag component is used to create labels or categories. It supports various visual enhancements including prefix icons, avatars, status dots, and suffix badge counts. It can be configured as closable or removable, triggering a @close event when the user interacts with the close/remove button.

  7. Use the TRibbon component for corner decorations

    The TRibbon component is used to add decorative ribbons to the corners of cards or containers. It supports text and icons (such as those from @tabler/icons-vue) via its default slot.
    <TCard>
  <TRibbon color="red">Hot</TRibbon>
  <!-- Card content -->
</TCard>

  8. Use TDateTime for date and time selection

    The TDateTime component is used when a user needs to select both a date and a time simultaneously. By default, it uses the format YYYY-MM-DD HH:mm.
    <TDateTime v-model="dt" placeholder="选择日期时间" />

  10. Use Tabler-Vue SKILL files to improve AI code generation

    SKILL files are structured Markdown documents designed for LLMs to prevent common AI errors such as fabricating props, using outdated Vue 2 syntax, or mixing in other UI libraries (e.g., Element Plus). They provide the AI with precise information on Props, Events, Slots, and prohibited patterns to ensure the output is Tabler-compliant.

  11. Use TButton for basic interactions

    The TButton component is the fundamental interactive element. By default, it features a white background with a subtle shadow, suitable for secondary actions.
    <TButton>Link</TButton>

  12. Use the TRibbon component for decorative labels

    The TRibbon component is used to place decorative labels on the corners of cards or containers. It supports text and icons (such as those from @tabler/icons-vue) via its default slot.
    <TCard>
  <TRibbon color="red">Hot</TRibbon>
  <!-- ... -->
</TCard>