TDesign Vue

The TDesign Vue Starter Kit is designed for rapid development with the following core capabilities:

• Exquisite Design: Based on TDesign UI specifications with available design resources (Figma, Sketch, etc.).
• Complete Routing: Supports both configuration-based routing (with deep customization for Menu and Breadcrumb components) and custom routing.
• Dynamic Layout: Includes built-in layouts such as "Left-Right Layout", "Top-Left-Right Layout", and "Up-Down Layout". Page content uses a 24-grid layout with "Regular" and "Compact" spacing modes.
• Fast HRM: Built with Vite for ultra-fast updates using browser ES modules in development.
• Development Specifications: Uses eslint-config-airbnb-base for code quality and follows Angular commit specifications.

If you are using a different framework or version, TDesign provides several other implementations:

• Vue 3: tdesign-vue-next
• React: tdesign-react
• Mini Programs: tdesign-miniprogram

Use the beforeChange prop to intercept and potentially cancel a state change. The function can return a boolean or a Promise<boolean>. If it returns false, the switch will not change its checked state.

// Example: Prevent change if a condition isn't met
const beforeChange = async () => {
  const confirmed = await confirmDialog();
  return confirmed; // If false, the switch won't toggle
};

You can customize the rendering of different parts of the Cascader using slots:

• option: Customize the rendering of individual options. The slot provides { item, index, onChange, onExpand }.
• label: Customize the label rendering.
• empty: Customize the content shown when no options are available.
• loadingText: Customize the loading text.
• tips: Customize the tips displayed at the bottom of the cascader.
• suffix / suffixIcon: Customize the input suffix or icon.

<template>
  <t-cascader :options="options">
    <!-- Customize option rendering -->
    <template #option="{ item, index, onChange, onExpand }">
      <div @click="onChange">
        {{ item.label }} (Index: {{ index }})
      </div>
    </template>
  </t-cascader>
</template>

In version 0.49.0, the Dropdown component underwent a breaking change. The internal style and multi-level menu structure were optimized. Users should check their custom CSS targeting multi-level menus.

New features in 0.49.0 include:

• direction API: Supports expanding menus to the left.
• theme API: Supports custom menu item themes.
• t-dropdown-menu as child: You can now use t-dropdown-menu directly as a child node, while still supporting the named dropdown slots for nested menus.

The Card component provides three distinct visual styles via the theme prop:

1. normal: The standard card style.
2. poster1: A poster-style layout where the action area (actions) is positioned at the top.
3. poster2: A poster-style layout where the action area (actions) is positioned at the bottom. In this mode, the status prop can also be used to display status content.

Note: The avatar prop is only effective when using poster styles.

Version 0.39.0 added significant capabilities to the Table component, allowing for complex data presentations:

• Multi-functional Layout: Supports combining multi-level headers, fixed headers, fixed columns, header sticking (sticky), and virtual scrolling.
• Virtual Scrolling: Enabled for large datasets.
• Summary Rows: Added footer summary rows (合计行) which can be fixed at the bottom, support multiple rows, and allow fully custom content.
• Column Customization: Supports custom columns configuration and custom sorting icons via the filterIcon slot or props.filterIcon render function.
• Ellipsis & Popups: The ellipsis property now supports passing all attributes from the Popup component for overflow handling.
• Loading: loadingProps allows passing all features of the loading component to the table.
• Fixed Rows: Support for frozen/fixed rows.

The Upload component underwent a major refactor in version 0.48.3, introducing several lifecycle hooks and events:

• beforeAllFilesUpload: Executes before all files start uploading. Use this to decide if the entire batch should proceed.
• beforeUpload: Existing hook to validate individual files.
• onValidate: Triggered when file validation fails (e.g., custom validation or file count limits).
• onOneFileSuccess: Triggered after a single file successfully uploads in a multi-file scenario.
• formatRequest: Used to add or modify parameters in the upload request.
• formatResponse: Note: In 0.48.3+, this no longer formats the file object; it only processes the response property. To extend the file object, use the onChange event instead.

The Table component introduced advanced editing and sorting capabilities in version 0.46.2:

• Row/Column Dragging: Supports simultaneous row dragging and column dragging for reordering.
• Editable Cells/Rows:
  • Use editableCellState to control whether a specific cell is editable.
  • Use edit.defaultEditable to set the initial state of the table to edit mode.
• Row Expansion: The expansion event now includes a currentRowData parameter representing the data of the currently expanded row.
• Multi-level Header Dragging: Supports dragging headers at any level, with enhanced event parameters to allow custom relationship adjustments.

When the change event is fired, the trigger property in the context object identifies how the color was modified. Valid trigger types are:

• palette-saturation-brightness
• palette-saturation
• palette-brightness
• palette-hue-bar
• palette-alpha-bar
• input
• preset
• recent