DOCSEARCHbyAlgolia
Submit Docs

TDesign Common

repository·develop·Indexed 41 days ago

https://github.com/tencent/tdesign-common

A centralized repository providing shared styles, UI development assets, and common JavaScript utility functions used across TDesign frameworks for web, mobile, and mini-programs. It includes the generate-llms plugin for creating AI-friendly Markdown documentation, featuring a configurable parsing pipeline via createComponentDocParser and generateLlmsDocs to support Vue, React, and Flutter component libraries.

Tokens
176.7K
Snippets
258
Records
1.6K
Agent score
45%

What's inside TDesign Common

  1. Overview of TDesign-web styles

    develop

    The TDesign-web repository contains the style files (Less) and HTML structures for the TDesign web component libraries (supporting both Vue and React).

    Key technical details:

    • Styling Engine: Uses less for style management and writing.
    • Naming Convention: Follows the PBEM (Prefix, Block, Element, Modifier) methodology. For detailed specifications, refer to the project's CSS naming conventions.
    • Browser Support: Supports IE 11 and all modern browsers (e.g., Chrome).

  2. Use Layout components for grid-based page design

    develop

    The Layout components in TDesign Mobile use a regular grid array to guide and standardize page layouts and information distribution. This ensures layout consistency across the interface and reduces design/development costs.

    Layout components are categorized into two main types:

    1. Base (基础): Provides the core grid and layout structure.
    2. Offset (增加间距): Provides additional spacing/offset capabilities within the layout.

  3. Explore TDesign Web Component Categories

    develop

    TDesign provides a comprehensive set of UI components organized into several functional categories. You can browse components based on their primary purpose:

    • Base: Fundamental building blocks like Button, Icon, Link, and Typography.
    • Layout: Structural components for organizing content, including Grid, Layout, Divider, and Space.
    • Navigation: Components for user movement and flow, such as Affix, Anchor, Breadcrumb, Dropdown, Menu, Pagination, Steps, and Tabs.
    • Form: Input and selection controls like Cascader, Checkbox, ColorPicker, DatePicker, Form, Input, InputAdornment, InputNumber, Radio, RangeInput, Select, SelectInput, Slider, Switch, TagInput, Textarea, Transfer, TimePicker, TreeSelect, and Upload.
    • Data Display: Components for presenting information, including Avatar, Badge, Card, Calendar, Collapse, Comment, Descriptions, Image, ImageViewer, List, Loading, Progress, QRCode, Rate, Skeleton, Statistic, Swiper, Table, Tag, Timeline, Tooltip, Tree, and Watermark.
    • Notifications: Feedback and overlay components like Alert, Dialog, Drawer, Guide, Message, Notification, Popconfirm, and Popup.

  5. Use the Typography component for text styling

    develop

    The Typography component is used for basic text arrangement and styling. It allows developers to quickly create text content within a page and ensures visual consistency when switching between light and dark modes by integrating with the system's theme.

    Key features include:

    • Basic Text: Standard text formatting.
    • Combinations: Using multiple typography styles together.
    • Theme Styles: Automatic adaptation to light and dark modes.
    • Copyable Text: Text that can be easily copied by the user.
    • Text Ellipsis: Handling text overflow with ellipsis.