DOCSEARCHbyAlgolia
Submit Docs

TDesign Mobile Vue

repository·develop·Indexed 19 days ago

https://github.com/tencent/tdesign-mobile-vue

A high-quality UI component library specifically designed for mobile web applications using Vue 3. It supports tree-shaking and is compatible with Edge >=97, Firefox >=96, Chrome >=96, and Safari >=14.1.

Tokens
144.4K
Snippets
382
Records
654
Agent score
56%

What's inside tdesign-mobile-vue

  1. TDesign Mobile Vue Component Categories

    develop

    TDesign Mobile Vue provides a comprehensive set of mobile-optimized UI components organized into five main functional categories:

    Base

    Fundamental building blocks for layout and typography.

    • Button, Divider, Fab, Icon, Layout, Link, Typography

    Navigation

    Components for moving between views and managing application state.

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

    Form

    Input controls and data entry components.

    • 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, List, Progress, QRCode, Result, Segmented, Skeleton, Sticky, Swiper, Table, Tag, Watermark

    Feedback

    Components for communicating system status and user interactions.

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

  2. TDesign Mobile Vue Component Overview

    develop

    TDesign Mobile Vue provides a comprehensive set of mobile-optimized UI components categorized into several functional groups. These components are designed to help developers build high-quality mobile web applications with consistent design and user experience.

    Component Categories:

    • 基础 (Basics): Core building blocks like Button, Divider, Fab, Icon, Layout, Link, and Typography.
    • 导航 (Navigation): Components for movement and structure, including BackTop, Drawer, Indexes, Navbar, SideBar, Steps, TabBar, and Tabs.
    • 输入 (Input): Controls for user data entry such as Calendar, Cascader, CheckBox, ColorPicker, DateTimePicker, Form, Input, Picker, Radio, Rate, Search, Slider, Stepper, Switch, Textarea, TreeSelect, and Upload.
    • 数据展示 (Data Display): Components for presenting information, including Avatar, Badge, Cell, Collapse, CountDown, Empty, Footer, Grid, Image, ImageViewer, List, Progress, QRCode, Result, Segmented, Skeleton, Sticky, Swiper, Table, Tag, and Watermark.
    • 反馈 (Feedback): Components for user interaction and system status, such as ActionSheet, Dialog, DropdownMenu, Guide, Loading, Message, NoticeBar, Overlay, Popover, Popup, PullDownRefresh, SwipeCell, and Toast.

  6. Understand the ColorObject and Change Trigger types

    develop

    When using change or onPaletteBarChange events, the context object provides detailed color information and the source of the change.

    ColorObject

    An object representing the current color state:

    • alpha: number
    • css: string
    • hex: string
    • hex8: string
    • hsl: string
    • hsla: string
    • hsv: string
    • hsva: string
    • rgb: string
    • rgba: string
    • value: number

    ColorPickerChangeTrigger

    Identifies the source of the color change:

    • palette-hue-bar
    • palette-alpha-bar
    • preset

  9. Register TDesign Mobile in a Vue 3 application

    develop

    To use the components globally, import TDesign from tdesign-mobile-vue and use it with your Vue application instance. If you use build tools like Webpack or Rollup that support tree-shaking, components will be loaded on demand automatically without extra configuration.

    import { createApp } from 'vue';
import TDesign from 'tdesign-mobile-vue';

const app = createApp(App);
app.use(TDesign);

  10. Migrate DateTimePicker to the new API (v0.9.0)

    develop

    In version 0.9.0, the DateTimePicker component was refactored with the following changes:

    • Removed Props: disableDate, showWeek.
    • New Props: start (to set the minimum selectable time) and end (to set the maximum selectable time).
    • Renamed Event: onColumnChange is now onPick (with updated callback parameters).
    • Updated Events: onChange and onConfirm callback parameters have changed.

  11. Use TDesign Mobile Vue via unpkg (CDN)

    develop

    You can use TDesign Mobile Vue via unpkg for quick prototyping. Note that this is not recommended for production as it downloads the entire library and is subject to CDN stability and version updates. You must include Vue 3, the TDesign CSS, and the TDesign JS files.

    <!-- vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.js"></script>
...
<script>
  Vue.createApp({}).use(TDesign).mount('#app');
</script>

  12. Install tdesign-icons-vue-next

    develop

    Icons are managed as a separate npm package. You can install tdesign-icons-vue-next to use icons directly. Note that tdesign-vue-next also includes icons and supports them via the <t-icon> component.

    On-demand importing is recommended to reduce bundle size. On-demand icons support arbitrary weight adjustments and up to four color fills.

    npm install tdesign-icons-vue-next