DOCSEARCHbyAlgolia
Submit Docs

TDesign Mini Program

repository·develop·Indexed 23 days ago

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

A high-quality component library designed specifically for WeChat Mini Programs to provide a consistent and professional UI experience. It includes components such as ActionSheet, Avatar, AvatarGroup, and BackTop, supporting both Skyline and WebView rendering frameworks.

Tokens
417.8K
Snippets
750
Records
2K
Agent score
79%

What's inside tdesign-miniprogram

  1. TDesign Miniprogram Component Overview

    develop

    TDesign Miniprogram provides a comprehensive set of UI components categorized into several functional groups to help build mini-program interfaces. The library is continuously updated with new component types based on business practices.

    Component Categories:

    基础 (Basic)

    Core building blocks for layout and simple elements:

    • Button (按钮)
    • Divider (分割线)
    • Fab (悬浮按钮)
    • Icon (图标)
    • Layout (布局)
    • Link (链接)
    • Typography (排版)

    导航 (Navigation)

    Components for moving through the application:

    • BackTop (返回顶部)
    • Drawer (抽屉)
    • Indexes (索引)
    • Navbar (导航条)
    • SideBar (侧边导航栏)
    • Steps (步骤条)
    • TabBar (底部标签栏)
    • Tabs (选项卡)

    输入 (Input)

    Components for capturing user data and interaction:

    • Calendar (日历)
    • Cascader (级联选择器)
    • CheckBox (多选框)
    • ColorPicker (颜色选择器)
    • DateTimePicker (日期选择器)
    • Form (表单)
    • Input (输入框)
    • Picker (选择器)
    • Radio (单选框)
    • Rate (评分)
    • Search (搜索框)
    • Slider (滑动选择器)
    • Stepper (步进器)
    • Switch (开关)
    • Textarea (多行文本框)
    • TreeSelect (树形选择器)
    • Upload (上传)

    数据展示 (Data Display)

    Components for presenting information to the user:

    • Avatar (头像)
    • Badge (徽章)
    • Cell (单元格)
    • Collapse (折叠面板)
    • CountDown (倒计时)
    • Empty (空状态)
    • Footer (页脚)
    • Grid (宫格)
    • Image (图片)
    • ImageViewer (图片预览)
    • Progress (进度条)
    • QRCode (二维码)
    • Result (结果)
    • Segmented (分段控制器)
    • Skeleton (骨架屏)
    • Sticky (吸顶容器)
    • Swiper (轮播图)
    • Table (表格)
    • Tag (标签)
    • Watermark (水印)

    反馈 (Feedback)

    Components for communicating system status or providing user guidance:

    • ActionSheet (动作面板)
    • Dialog (对话框)
    • DropdownMenu (下拉菜单)
    • Guide (引导)
    • Loading (加载)
    • Message (全局提示)
    • NoticeBar (消息提醒)
    • Overlay (遮罩层)
    • Popover (弹出气泡)
    • Popup (弹出层)
    • PullDownRefresh (下拉刷新)
    • SwipeCell (滑动操作)
    • Toast (轻提示)

  5. Use the Swiper component

    develop

    The t-swiper component is used to cycle through a set of images or content. Since version 0.32.0, it relies on the native swiper component and uses a list property instead of a separate swiper-item component.

    Key Features:

    • Supports various navigation styles (dots, dots-bar, fraction, controls, cards) via the navigation property.
    • Supports vertical and horizontal sliding.
    • Supports autoplay and looping.
    • Allows custom navigation components via slots.

  8. TDesign Uniapp Component Categories

    develop

    TDesign for Uniapp provides a comprehensive set of mobile UI components organized into several functional categories. New components are added periodically according to business practices; users should monitor the TDesign Mobile Vue update log for additions.

    Base Components

    Fundamental building blocks including:

    • Button
    • Divider
    • Fab (Floating Action Button)
    • Icon
    • Layout
    • Link
    • Typography

    Navigation Components

    Components for user movement and structure:

    • BackTop
    • Drawer
    • Indexes
    • Navbar
    • SideBar
    • Steps
    • TabBar
    • Tabs

    Form Components

    Input and selection controls:

    • Calendar
    • Cascader
    • CheckBox
    • ColorPicker
    • DateTimePicker
    • Form
    • Input
    • Picker
    • Radio
    • Rate
    • Search
    • Slider
    • Stepper
    • Switch
    • Textarea
    • TreeSelect
    • Upload

    Data Display Components

    Components for presenting information:

    • Avatar
    • Badge
    • Cell
    • Collapse
    • CountDown
    • Empty
    • Footer
    • Grid
    • Image
    • ImageViewer
    • Progress
    • QRCode
    • Result
    • Segmented
    • Skeleton
    • Sticky
    • Swiper
    • Table
    • Tag
    • Watermark

    Feedback Components

    Components for communicating state and interactions:

    • ActionSheet
    • Dialog
    • DropdownMenu
    • Guide
    • Loading
    • Message
    • NoticeBar
    • Overlay
    • Popover
    • Popup
    • PullDownRefresh
    • SwipeCell
    • Toast

  9. Use ChatMessage component

    develop

    The ChatMessage component is used to display individual message items in a chat conversation. It supports displaying user avatars, nicknames, timestamps, and various message contents (text, markdown, thinking states, or attachments).

    Key Usage Tips:

    • Content Rendering: For consistent chat message rendering, it is recommended to use the t-chat-content component within the content slot. Use t-chat-markdown only when you need to render a standalone Markdown component.
    • Rendering Framework: Supported on WebView.
    • Version Note: This component was introduced in version 1.12.0.

  10. Use the Navbar component

    develop

    The Navbar component is used for page switching or navigation, positioned above the content area and below the system status bar. It supports both Skyline and WebView rendering frameworks.

    Common use cases include:

    • Basic Navbar: A standard title bar.
    • Capsule Style Navbar: Designed to integrate with the WeChat mini-program capsule area.
    • Search Navbar: Includes a search input.
    • Image Navbar: Includes an image element.
    • Customized Styles: Adjusting colors and layouts via props or slots.

  11. Use the Segmented component

    develop

    The Segmented component is used to display multiple options and allow users to select a single option. It supports both Skyline and WebView rendering frameworks.

    Key Features:

    • Basic Type: Standard segmented control.
    • Adaptive Width: Use the block property to make the component fill the parent container's width.
    • Disabled State: Use the disabled property to prevent user interaction.