DOCSEARCHbyAlgolia
Submit Docs

TDesign Documentation

website·Indexed 19 days ago

https://tdesign.tencent.com/vue-next/overview

A comprehensive design system and component library providing implementations for Vue (including Vue Next), React, Miniprogram, and UniApp. It features a wide array of UI components such as Table, Calendar, Pagination, and Select, as well as specialized toolsets like TDesign MCP for AI-assisted programming and a dedicated uniapp-chat library for AI conversation scenarios featuring ChatMarkdown, ChatMessage, and streaming output support.

Tokens
819K
Snippets
3.9K
Records
7K
Agent score
93%

What's inside TDesign

  1. Overview of TDesign React Alert component

    The Alert component is used to display important information that requires user attention. It is typically placed at the global top of a page, the top of a specific content area, or within a dialog content area. When multiple alerts are needed on a single page, using a carousel/slider approach is recommended over stacking them.

  2. Overview of BackTop component

    The BackTop component provides a one-click return-to-top button that typically appears after the user has scrolled down a certain distance. It is designed to be used once per page; multiple BackTop buttons should not coexist in different nodes of the same page.

  3. Overview of SelectInput Filter Input

    SelectInput is a unified filter component used to build complex filters including input boxes, dropdowns, and borderless modes. It is built upon the TagInput, Input, and Popup components and supports all their features. It serves as the foundation for components like Select, Cascader, TreeSelect, DatePicker, and TimePicker.

  4. Overview of Navbar component

    The Navbar component is used for page navigation (jumping between pages or returning), displaying page titles, and hosting a small number of auxiliary functions such as search, scanning, or location switching. It can be combined with Drawer or ActionSheet components to trigger a set of operations.

  5. Overview of Anchor component

    The Anchor component is used to provide quick navigation within a single page with long content, allowing users to jump to specific sections. It is typically positioned on the left or right side of the content area.

  6. Overview of TreeSelect component

    The TreeSelect component is used when a set of options consists of 2-3 levels, and each level contains a large number of options that require the user to select step-by-step. It is recommended to keep the hierarchy within 3 levels; if more levels are needed, consider adjusting the data structure or using a Cascader component.

  7. Overview of Fab Floating Action Button

    The Fab component is used for global, high-frequency, or business-critical operations. It is typically placed in the bottom-right corner of the page to avoid obscuring important content. If no bottom tab bar is present, a bottom-center position may also be considered. For complex tasks with multiple options, it is recommended to pair the Fab button with an Action Sheet.

  8. Overview of TDesign Vue RangeInput component

    The RangeInput component provides a dual-input field for entering a range of values. It supports three sizes (large, medium/default, and small) and various visual states including normal, read-only, disabled, success, warning, and error. The success, warning, and error states are typically used for form validation and are inherited from the base Input component.

  9. Overview of Anchor component usage

    The Anchor component is used when a single page has a long content length and users need to quickly locate and jump to specific sections. It is typically positioned on the left or right side of the content area.

  10. Overview of SelectInput Filter Input

    The SelectInput component is a unified filter logic component that combines an input field and a dropdown. It is used to create complex filters and supports features like single-selection, multi-selection, and borderless modes. It is built upon base input and select components and inherits their full feature sets.

  11. Overview of Grid component

    The Grid component is used to display multiple functional or information entry points when those entries have no obvious priority. Common use cases include 'diamond areas' (main feature grids), bottom tab bars, action panels (combined with avatars or icons for sharing/saving), and image/avatar galleries.

  12. Overview of Progress component usage

    The Progress component is used to provide users with a clear expectation of task completion or to show real-time progress of background operations. It is recommended for operations that take longer than 4 seconds to complete.