### Initialize TDesign Starter Project Source: https://tdesign.tencent.com/react/quick-start Initializes a new TDesign Starter project using the installed tdesign-starter-cli. This command will guide the user through the project setup process. ```bash td-starter init ``` -------------------------------- ### Install tdesign-starter-cli Source: https://tdesign.tencent.com/react/quick-start Installs the latest version of the tdesign-starter-cli globally using npm. This command-line interface tool is used to initialize new TDesign Starter projects. ```bash npm i tdesign-starter-cli@latest -g ``` -------------------------------- ### Example Upload Response Source: https://tdesign.tencent.com/react/components/upload An example of a successful response from the upload request, indicating success status and providing details of the uploaded files. ```json { "status": "success", "files": [ { "url": "https://xxx.png", "name": "xxx.png" } ] } ``` -------------------------------- ### Timeline Usage Examples Source: https://tdesign.tencent.com/react/components/timeline Illustrates various ways to use the Timeline component, including different layouts, custom nodes, and content. ```APIDOC ## Timeline Usage Examples ### Basic Timeline Displays events in a simple vertical or horizontal layout. ### Timeline with Reversed Order Shows events in reverse chronological order. ### Timeline with Custom Nodes Allows customization of the appearance of each timeline node using `dot` and `dotColor` props. ### Timeline with Custom Content Enables rich content within each timeline item, including custom text and elements. ### Timeline Layout Options Demonstrates different layout configurations, including `labelAlign`, `layout`, and `mode` for controlling alignment and positioning. ### Timeline Loading State Shows how to indicate a loading state for the timeline. ### Timeline Theming Illustrates how to apply different themes (`default`, `dot`) and custom colors to the timeline nodes. ``` -------------------------------- ### Programmatic Function Calls Source: https://tdesign.tencent.com/react/components/dialog_tab=api Explains how to invoke dialogs programmatically using function calls and provides examples. ```APIDOC ## Programmatic Function Calls ### Description Dialogs can be invoked programmatically using utility functions, offering flexibility in managing dialog instances. ### Function Call Methods - **Method 1**: `DialogPlugin(options)` - **Method 2**: `DialogPlugin.confirm(options)` - **Method 3**: `DialogPlugin.alert(options)` ### Component Instance Methods These methods can be called on a dialog component instance: - `destroy()`: Destroys the dialog instance. - `hide()`: Hides the dialog. - `show()`: Shows the dialog. - `update(options)`: Updates the dialog's properties. ### Related Functions - `dialoghandleDialogNode` - `confirm` - `alertDialog` ``` -------------------------------- ### Install TDesign React using npm Source: https://tdesign.tencent.com/react/getting-started Installs the TDesign React library using npm. This is the recommended method for development, enabling features like tree-shaking for optimized builds. ```bash npm i tdesign-react ``` -------------------------------- ### GuideConfig Source: https://tdesign.tencent.com/react/global-configuration_tab=api Configuration options for the TDesign React Guide component, including button props for navigation. ```APIDOC ## GuideConfig ### Description Configuration options for the TDesign React Guide component, including button props for navigation. ### Method N/A (Configuration Object) ### Endpoint N/A ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body - **finishButtonProps** (Object) - Optional - Props for the finish button in the last step. Example: `{ content: '完成', theme: 'primary' }`. TS Type: `ButtonProps`. - **nextButtonProps** (Object) - Optional - Props for the next button. Example: `{ content: '下一步', theme: 'primary' }`. TS Type: `ButtonProps`. - **prevButtonProps** (Object) - Optional - Props for the previous button. Example: `{ content: '上一步', theme: 'default' }`. TS Type: `ButtonProps`. - **skipButtonProps** (Object) - Optional - Props for the skip button. Example: `{ content: '跳过', theme: 'default' }`. TS Type: `ButtonProps`. ### Request Example ```json { "nextButtonProps": { "content": "Next Step", "theme": "primary" }, "skipButtonProps": { "content": "Skip Tutorial" } } ``` ### Response #### Success Response (200) N/A (Configuration Object) #### Response Example N/A ``` -------------------------------- ### Linear Progress Bar Examples - React Source: https://tdesign.tencent.com/react/components/progress Demonstrates various linear progress bar configurations in React, including default styles, status indicators, custom content, gradient colors, and internal progress display. These examples showcase the flexibility of the Progress component for different visual needs. ```jsx import React from 'react'; import { Progress } from 'tdesign-react'; function App() { return (
{/* Default linear progress bar */} {/* Linear progress bar with status */} {/* Linear progress bar without percentage text */} {/* Linear progress bar with custom content */} {/* Linear progress bar with custom color and height */} {/* Linear progress bar with gradient color */} {/* Linear progress bar with internal percentage display */}
); } export default App; ``` -------------------------------- ### Configure Columns with Button (React) Source: https://tdesign.tencent.com/react/components/Table Example demonstrating column configuration in a TDesign React table, including a custom button for triggering the configuration. This allows users to show/hide borders and customize column settings. ```javascript import React from 'react'; import { Table, Column, Cell, Row } from '@arco-design/web-react'; const App = () => { const data = [ { key: '1', name: '贾明', status: '审批通过', type: '电子签署', email: 'w.cezkdudy@lhll.au', time: '2022-01-01' }, { key: '2', name: '张三', status: '审批失败', type: '纸质签署', email: 'r.nmgw@peurezgn.sl', time: '2022-02-01' }, { key: '3', name: '王芳', status: '审批过期', type: '纸质签署', email: 'p.cumx@rampblpa.ru', time: '2022-03-01' }, { key: '4', name: '贾明', status: '审批通过', type: '电子签署', email: 'w.cezkdudy@lhll.au', time: '2022-04-01' }, { key: '5', name: '张三', status: '审批失败', type: '纸质签署', email: 'r.nmgw@peurezgn.sl', time: '2022-01-01' }, ]; const columns = [ { title: '申请人', dataIndex: 'name' }, { title: '申请状态', dataIndex: 'status' }, { title: '签署方式', dataIndex: 'type' }, { title: '邮箱地址', dataIndex: 'email' }, { title: '申请时间', dataIndex: 'time' }, ]; return ( {columns.map(col => ( ))}
); }; export default App; ``` -------------------------------- ### Basic Alert Examples (React) Source: https://tdesign.tencent.com/react/components/Alert Demonstrates the fundamental usage of the Alert component in React, showcasing different themes like success, info, warning, and error. These examples highlight the basic display of alert messages. ```jsx import React from 'react'; import { Alert } from 'tdesign-react'; function App() { return (
); } ``` -------------------------------- ### Tree Data Structure Example Source: https://tdesign.tencent.com/react/components/tree_tab=api Demonstrates the expected structure for the `data` prop, which defines the tree's nodes. Each node can have a `value`, `label`, `children`, and `disabled` property. The `keys` prop can be used to map custom field names to these standard properties. ```javascript const treeData = [ { label: 'Parent 1', value: '1', children: [ { label: 'Child 1.1', value: '1.1', children: [ { label: 'Grandchild 1.1.1', value: '1.1.1' } ] }, { label: 'Child 1.2', value: '1.2' } ] }, { label: 'Parent 2', value: '2', disabled: true } ]; // Example using custom keys const customKeys = { value: 'id', label: 'name', children: 'nodes' }; const customTreeData = [ { name: 'Parent A', id: 'a', nodes: [ { name: 'Child A.1', id: 'a.1' } ] } ]; ``` -------------------------------- ### Guide Step Button Configuration (TDesign React) Source: https://tdesign.tencent.com/react/global-configuration Customize the text and theme for navigation buttons within the TDesign Guide component. This includes buttons for finishing, proceeding to the next step, going back, and skipping the guide. ```javascript const guideConfig = { nextButtonProps: { content: 'Next', theme: 'primary' }, prevButtonProps: { content: 'Previous', theme: 'default' }, skipButtonProps: { content: 'Skip', theme: 'default' }, finishButtonProps: { content: 'Done', theme: 'primary' } }; ``` -------------------------------- ### When to Use Select Source: https://tdesign.tencent.com/react/components/select Guidelines on the appropriate scenarios for utilizing the Select component. ```APIDOC ## When to Use Select ### Description Use the Select component when you need to display a large number of options within a limited space and allow users to select one or multiple options. It is also suitable for consolidating numerous option entries. ``` -------------------------------- ### RangeInput Props Example - React Source: https://tdesign.tencent.com/react/components/range-input_tab=api Provides an example of using various props for the RangeInput component in React, such as `format`, `inputProps`, `label`, `placeholder`, `prefixIcon`, `separator`, `suffixIcon`, and `tips`. ```jsx import React from 'react'; import { RangeInput, Icon } from 'tdesign-react'; function App() { const input1Props = { label: 'Start', name: 'start' }; const input2Props = { label: 'End', name: 'end' }; return ( } separator=" to " suffixIcon={} tips="Please select a valid date range." value={['2023-01-01', '2023-12-31']} /> ); } export default App; ``` -------------------------------- ### Dialog Instance Methods Source: https://tdesign.tencent.com/react/components/dialog_tab=api Details the methods available on a Dialog instance, allowing programmatic control over the dialog. These include methods for destroying, hiding, showing, updating, and managing the confirmation loading state. ```javascript { destroy: '() => void', hide: '() => void', setConfirmLoading: '(loading: boolean) => void', show: '() => void', update: '(props: DialogOptions) => void' } ``` -------------------------------- ### ListInstanceFunctions Source: https://tdesign.tencent.com/react/components/List Component instance methods for List components. ```APIDOC ## ListInstanceFunctions Component Instance Methods ### Description Provides methods to interact with the List component instance, such as controlling scrolling. ### Methods #### `scrollTo(scrollToParams: ScrollToElementParams)` - **Description**: Supports scrolling to a specific node in virtual scrolling scenarios. - **Parameters**: - `scrollToParams` (Object) - Parameters for scrolling. Type: `ScrollToElementParams`. - **Returns**: - ### Properties #### `className` - **Type**: String - **Description**: Class name for the component. #### `style` - **Type**: Object - **Description**: Style object for the component. TS Type: `React.CSSProperties`. ``` -------------------------------- ### Circular Progress Bar Examples - React Source: https://tdesign.tencent.com/react/components/progress Illustrates different circular progress bar styles using the TDesign React component. This includes default appearance, options to hide percentage text, custom content, and variations in color, size, and stroke width. These examples highlight the component's adaptability for emphasizing progress percentages. ```jsx import React from 'react'; import { Progress } from 'tdesign-react'; function App() { return (
{/* Default circular progress bar */} {/* Circular progress bar without percentage text */} {/* Circular progress bar with custom content */} {/* Circular progress bar with status */} {/* Circular progress bar with custom color */} {/* Circular progress bar with different sizes */} {/* Circular progress bar with custom stroke width */}
); } export default App; ``` -------------------------------- ### ListInstance Component Instance Methods Source: https://tdesign.tencent.com/react/components/list Details the available instance methods for the ListInstance component, such as className, style, and scrollTo. ```APIDOC ## ListInstance Component Instance Methods ### Description Provides methods to interact with the ListInstance component, including setting class names, styles, and performing scroll operations. ### Method N/A (Instance Methods) ### Endpoint N/A (Component Instance) ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body N/A ### Request Example N/A ### Response #### Success Response (200) N/A #### Response Example N/A ### Instance Methods #### `className` - **Type**: String - **Description**: Sets or gets the class name of the component. #### `style` - **Type**: Object - **Description**: Sets or gets the style object of the component. TS Type: `React.CSSProperties`. #### `scrollTo` - **Type**: `(scrollToParams: ScrollToElementParams)` - **Description**: In virtual scrolling scenarios, supports scrolling to a specific node. Provides general type definitions. ``` -------------------------------- ### TreeSelect Usage and Recommendations Source: https://tdesign.tencent.com/react/components/tree-select Guidelines on when to use the TreeSelect component, how to combine it with other components, and best practices for its implementation. ```APIDOC ## TreeSelect Usage and Recommendations ### When to Use - Use for selecting data from a hierarchical tree structure, such as file structures, organizational charts, or geographical administrative divisions. ### Component Composition - Combine with a search input to filter data by keywords, enabling users to quickly find information within the tree structure. ### Common Use Cases - **Hierarchical Selection**: Selecting parent-child items with multi-dimensional attributes (e.g., class and student). - **Linked Selection**: In multi-select mode, parent and child items have a linked relationship. Partially selected children result in a semi-selected parent. Clicking a semi-selected parent checkbox performs a full selection. When all children are selected, the parent is fully selected. ### Recommended/Cautionary Examples - **Default Collapsing**: When there are many tree options, collapse the hierarchy by default to quickly locate top-level options (e.g., province data, then find the city). - **Logical Hierarchy**: Ensure a logical parent-child relationship between tree levels. Data structure should be from large to small, avoiding confusion in belonging relationships. ### Similar Components - **TreeSelect**: For selecting data from a hierarchical tree structure. - **Cascader**: For selecting from large datasets with a clear hierarchical structure. - **Transfer**: For classifying a set of data into two states, or for filtering options between categories and subcategories. - **Tree**: For displaying structured content with parent-child relationships. ``` -------------------------------- ### React Import for Cascader Component Source: https://tdesign.tencent.com/react/components/Cascader Imports the TreeNodeModel from the '@Tree' module for use with the Cascader component in React applications. This is a common setup for tree-related data structures. ```typescript import { TreeNodeModel } from '@Tree' ``` -------------------------------- ### Descriptions Component - Customization Source: https://tdesign.tencent.com/react/components/descriptions Demonstrates how to customize the appearance of the Descriptions component using styles and custom column counts. ```APIDOC ## Descriptions Customization ### Description Examples of customizing the Descriptions component's appearance, including custom column counts and styles. ### Method N/A (Component Documentation) ### Endpoint N/A (Component Documentation) ### Parameters N/A ### Request Example ```jsx // Custom Column Count Value 1 Value 2 Value 3 Value 4 // Custom Styles Content ``` ### Response #### Success Response (200) N/A (Component Documentation) #### Response Example N/A (Component Documentation) ``` -------------------------------- ### FormInstanceFunctions: Clear Validation Source: https://tdesign.tencent.com/react/components/form Clears validation results for form fields. Can specify individual fields or clear all. Example shows clearing email validation. ```typescript clearValidate(fields?: Array); // Example: clearValidate(['email']); ``` -------------------------------- ### Time Range Selector Source: https://tdesign.tencent.com/react/components/time-picker_tab=api Allows users to select a duration or a period of time. This component is designed for scenarios where specifying a start and end time is necessary. ```jsx import React from 'react'; import { TimePicker } from 'tdesign-react'; function App() { // For range selection, you might need two TimePicker instances or a custom implementation // This example shows a single TimePicker, assuming range selection is handled by its value prop or related logic. return ( ); } ``` -------------------------------- ### BaseTable Configuration: Columns and Data Source: https://tdesign.tencent.com/react/components/table Configure the columns and data source for the BaseTable. The 'columns' prop defines the table's structure and column settings, while 'data' provides the actual rows of information. Both accept generic types for flexibility. ```typescript interface BaseTableCol { /* ... column definition properties ... */ } interface BaseTableProps { columns: Array>; data: Array; rowKey: string | ((row: T) => string); // ... other props } // Example Usage: const MyTable = >(props: BaseTableProps) => { // ... table implementation return <>; }; interface UserData { id: number; name: string; email: string; } const userColumns: Array> = [ { colKey: 'id', title: 'ID' }, { colKey: 'name', title: 'Name' }, { colKey: 'email', title: 'Email' }, ]; const userData: Array = [ { id: 1, name: 'Alice', email: 'alice@example.com' }, { id: 2, name: 'Bob', email: 'bob@example.com' }, ]; // ``` -------------------------------- ### RangeInput Popup Props Example - React Source: https://tdesign.tencent.com/react/components/range-input_tab=api Illustrates using props for the RangeInputPopup component in React, such as `inputValue`, `defaultInputValue`, `label`, `panel`, `popupProps`, `popupVisible`, `rangeInputProps`, `readOnly`, and `status`. ```jsx import React, { useState } from 'react'; import { RangeInputPopup, Popup } from 'tdesign-react'; function App() { const [inputValue, setInputValue] = useState(['2023-01-01', '2023-12-31']); const [popupVisible, setPopupVisible] = useState(false); return ( setInputValue(value)} popupVisible={popupVisible} onPopupVisibleChange={visible => setPopupVisible(visible)} rangeInputProps={{ placeholder: ['Start Date', 'End Date'], status: 'default', }} panel={
Custom Panel Content
} popupProps={{ overlayStyle: { width: 'auto' }, }} /> ); } export default App; ``` -------------------------------- ### Similar Components Source: https://tdesign.tencent.com/react/components/select Comparison of the Select component with similar components like Dropdown Menu. ```APIDOC ## Similar Components ### Comparison - **Select**: Use when displaying numerous options in a confined space for single or multiple selections. Ideal for consolidating many option entries. - **Dropdown Menu**: Primarily used to consolidate numerous operations, often appearing after a button click to trigger corresponding actions. ``` -------------------------------- ### Closable Alert Example (React) Source: https://tdesign.tencent.com/react/components/Alert Presents the closable functionality of the Alert component in React, allowing users to dismiss the alert. This can be configured with a default close button or a custom one. ```jsx import React from 'react'; import { Alert } from 'tdesign-react'; function App() { return (
} />
); } ``` -------------------------------- ### RangeInput Instance Functions Source: https://tdesign.tencent.com/react/components/range-input This section details the instance methods available for the RangeInput component. ```APIDOC ## RangeInputInstanceFunctions | Name | Parameters | Return Value | Description | |---|---|---|---| | `blur` | `(options?: {position?: RangeInputPosition})` | - | Causes one of the input boxes to lose focus. | | `focus` | `(options?: {position?: RangeInputPosition})` | - | Causes one of the input boxes to gain focus. | | `select` | `(options?: {position?: RangeInputPosition})` | - | Selects the content of one of the input boxes. | ``` -------------------------------- ### Box-sizing Reset CSS Source: https://tdesign.tencent.com/react/getting-started The CSS code snippet for the box-sizing reset that was removed from TDesign React starting from version `0.36.0`. This ensures consistent box model behavior across elements. ```css *, *::before, *::after { box-sizing: border-box; } ``` -------------------------------- ### Configure Columns without Button (React) Source: https://tdesign.tencent.com/react/components/Table Example showcasing column configuration in a TDesign React table without a dedicated configuration button. This approach is suitable for scenarios requiring complete customization of the column configuration button's content and placement, using the `show` prop to control the visibility of the column configuration modal. ```javascript import React, { useState } from 'react'; import { Table, Column, Cell, Row } from '@arco-design/web-react'; const App = () => { const [showConfig, setShowConfig] = useState(false); const data = [ { key: '1', name: '贾明', status: '审批通过', type: '电子签署', email: 'w.cezkdudy@lhll.au', time: '2022-01-01' }, { key: '2', name: '张三', status: '审批失败', type: '纸质签署', email: 'r.nmgw@peurezgn.sl', time: '2022-02-01' }, { key: '3', name: '王芳', status: '审批过期', type: '纸质签署', email: 'p.cumx@rampblpa.ru', time: '2022-03-01' }, { key: '4', name: '贾明', status: '审批通过', type: '电子签署', email: 'w.cezkdudy@lhll.au', time: '2022-04-01' }, { key: '5', name: '张三', status: '审批失败', type: '纸质签署', email: 'r.nmgw@peurezgn.sl', time: '2022-01-01' }, ]; const columns = [ { title: '申请人', dataIndex: 'name' }, { title: '申请状态', dataIndex: 'status' }, { title: '签署方式', dataIndex: 'type' }, { title: '邮箱地址', dataIndex: 'email' }, { title: '申请时间', dataIndex: 'time' }, ]; return (
{columns.map(col => ( ))}
{/* Column configuration modal would be rendered here, controlled by showConfig */}
); }; export default App; ``` -------------------------------- ### Functional Call Example Source: https://tdesign.tencent.com/react/components/Notification Demonstrates the functional API for invoking notifications, allowing direct calls like `NotificationPlugin.info()`, `NotificationPlugin.success()`, etc. This provides a concise way to display different types of messages. ```jsx import React from 'react'; import { NotificationPlugin } from 'tdesign-react'; function App() { const showNotification = (type) => { NotificationPlugin[type]({ title: `${type.charAt(0).toUpperCase() + type.slice(1)} Message`, content: `This is a ${type} notification.` }); }; return (
); } export default App; ``` -------------------------------- ### Descriptions Component - Nested Usage Source: https://tdesign.tencent.com/react/components/descriptions Shows how to nest Descriptions components to create hierarchical information displays. ```APIDOC ## Descriptions Nested Usage ### Description Demonstrates the ability to nest Descriptions components for complex data representation. ### Method N/A (Component Documentation) ### Endpoint N/A (Component Documentation) ### Parameters N/A ### Request Example ```jsx Outer Value 1 Inner Value A Inner Value B ``` ### Response #### Success Response (200) N/A (Component Documentation) #### Response Example N/A (Component Documentation) ```