website·Indexed 36 days ago
https://titian.design.weimob.comA mobile UI component library for Vue, provided via the @titian-design/mobile-vue package. It includes a comprehensive set of components across categories such as navigation (Navbar, Tabbar, Sidebar), form inputs (Input, Picker, DateTimePicker, Uploader), feedback (Dialog, Toast, Popup, ActionSheet), and business-specific elements (Price, Sku Selector, Virtual List).
ti-preview component is used to preview multiple images. It supports left and right sliding navigation. Note that it does not support pinch-to-zoom (scaling) functionality.ti-uploader component allows users to upload local images and files to a server. It features built-in support for file selection APIs, upload operations, and upload progress tracking.ti-picker component is used to create selection interfaces. It supports single-column, double-column, and cascading (hierarchical) data selection modes.<ti-picker id="ti-picker"></ti-picker>ti-tag component is used to create labels for marking or selection. It supports different visual variants (contained, filled, outlined), sizes, and shapes, including a specific 'coupon' mode.<!-- Basic variants -->
<ti-tag variant="contained">Contained Tag</ti-tag>
<ti-tag variant="filled">Filled Tag (Secondary Color)</ti-tag>
<ti-tag variant="outlined">Outlined Tag</ti-tag>
<!-- Sizes -->
<ti-tag size="small">Small</ti-tag>
<ti-tag size="medium">Medium</ti-tag>
<ti-tag size="big">Big</ti-tag>
<!-- With Icons -->
<ti-tag left-icon="home" right-icon="arrow-right">Icons Left and Right</ti-tag>
<!-- Coupon Shape -->
<ti-tag shape="coupon" variant="contained">Coupon Style Tag</ti-tag>error event is triggered, the CalErrorProps object provides details about why the selection failed, such as exceeding the maximum allowed range or selecting a disabled date.interface CalErrorProps {
message: string; // Error message
type: 'maxSize' | 'maxRange' | 'disabled'; // Error category
}TiCascade component is used for linked selections (cascading menus), allowing users to drill down through hierarchical data levels.import { TiCascade } from '@titian-design/mobile-react';lazyLoad prop to defer image loading until the image is about to enter the viewport (within a range of three screens above or below).<TiImage lazyLoad src={src} />ti-input component is used for keyboard-based single-line text entry. It supports various input types, validation states, and layout options including labels and icons.<ti-input label="Username" placeholder="Please enter your name"></ti-input>bind:click event provides information about where the click occurred (e.g., 'left', 'right', 'cell', or 'outside').<ti-swipe-cell
bind:open="handleOpen"
bind:close="handleClose"
bind:click="handleSwipeCellClick">
<view>Event Listener Mode</view>
<view slot="left">Left</view>
<view slot="right">Right</view>
</ti-swipe-cell>ti-divider component is used to separate content into multiple distinct areas. It supports horizontal and vertical orientations, customizable styles (solid, dashed, hairline), and optional text content via the default slot.<ti-divider>Optional Text</ti-divider>TiTabbar component provides a bottom navigation bar for mobile applications. It can be used by passing an array of options or by nesting TiTabbarItem components.import { TiTabbar } from '@titian-design/mobile-react'