0
# Basic Content
1

2
Essential content display components for text, icons, progress indicators, and rich text rendering.
3

4
## Capabilities
5

6
### Text
7

8
Text display component with support for selection, formatting, and platform-specific styling.
9

10
```typescript { .api }
11
/**
12
 * Text display component
13
 * @supported all platforms
14
 */
15
const Text: ComponentType<TextProps>;
16

17
interface TextProps extends StandardProps {
18
  /** Whether text is selectable
19
   * @supported weapp, alipay, swan, tt, qq, jd, h5
20
   * @default false
21
   */
22
  selectable?: boolean;
23
  /** Whether user can select text
24
   * @supported weapp, tt, qq, jd
25
   * @default false
26
   */
27
  userSelect?: boolean;
28
  /** Text space handling
29
   * @supported weapp, alipay, swan, tt, qq, jd, h5
30
   */
31
  space?: keyof TextProps.Space;
32
  /** Text decoding
33
   * @supported weapp, alipay, swan, tt, qq, jd, h5
34
   * @default false
35
   */
36
  decode?: boolean;
37
  /** Multi-line ellipsis, value must be greater than or equal to 1
38
   * @supported alipay
39
   */
40
  numberOfLines?: number;
41
  /** Maximum number of lines
42
   * @supported weapp, harmony
43
   */
44
  maxLines?: number;
45
  /** Text overflow handling
46
   * @supported weapp
47
   * @default 'visible'
48
   */
49
  overflow?: keyof TextProps.Overflow;
50
}
51

52
declare namespace TextProps {
53
  interface Space {
54
    /** Display consecutive spaces */
55
    ensp: '';
56
    /** Display consecutive spaces (wider) */
57
    emsp: '';
58
    /** Display consecutive spaces and line breaks */
59
    nbsp: '';
60
  }
61
  interface Overflow {
62
    /** Clip text */
63
    clip: '';
64
    /** Fade out */
65
    fade: '';
66
    /** Show ellipsis */
67
    ellipsis: '';
68
    /** Don't truncate text */
69
    visible: '';
70
  }
71
}
72
```
73

74
### RichText
75

76
Rich text rendering component for displaying formatted HTML content.
77

78
```typescript { .api }
79
/**
80
 * Rich text rendering component
81
 * @supported all platforms
82
 */
83
const RichText: ComponentType<RichTextProps>;
84

85
interface RichTextProps extends StandardProps {
86
  /** Rich text nodes array or HTML string
87
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
88
   */
89
  nodes?: RichTextNode[] | string;
90
  /** Text space handling
91
   * @supported weapp, alipay, swan, tt, qq, jd, h5
92
   */
93
  space?: keyof RichTextProps.Space;
94
}
95

96
declare namespace RichTextProps {
97
  interface Space {
98
    ensp: '';
99
    emsp: '';
100
    nbsp: '';
101
  }
102
}
103

104
interface RichTextNode {
105
  /** Node name/tag */
106
  name?: string;
107
  /** Node attributes */
108
  attrs?: Record<string, any>;
109
  /** Child nodes */
110
  children?: RichTextNode[];
111
  /** Node type */
112
  type?: 'node' | 'text';
113
  /** Text content for text nodes */
114
  text?: string;
115
}
116
```
117

118
### Icon
119

120
Icon display component with predefined icon set and customizable styling.
121

122
```typescript { .api }
123
/**
124
 * Icon display component with predefined icon set
125
 * @supported all platforms
126
 */
127
const Icon: ComponentType<IconProps>;
128

129
interface IconProps extends StandardProps {
130
  /** Icon type from predefined set
131
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
132
   */
133
  type: keyof IconProps.Type;
134
  /** Icon size in pixels
135
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
136
   * @default 23
137
   */
138
  size?: number;
139
  /** Icon color
140
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
141
   */
142
  color?: string;
143
}
144

145
declare namespace IconProps {
146
  interface Type {
147
    success: '';
148
    success_no_circle: '';
149
    info: '';
150
    warn: '';
151
    waiting: '';
152
    cancel: '';
153
    download: '';
154
    search: '';
155
    clear: '';
156
    success_circle: '';
157
    info_circle: '';
158
    warn_circle: '';
159
    waiting_circle: '';
160
    cancel_circle: '';
161
    clear_circle: '';
162
    checkboxSelected: '';
163
    radioSelected: '';
164
    radioUnselect: '';
165
  }
166
}
167
```
168

169
**Usage Examples:**
170

171
```typescript
172
import { Icon } from "@tarojs/components";
173

174
// Basic icons
175
<Icon type="success" size={30} color="#00C851" />
176
<Icon type="warn" size={25} color="#FF8800" />
177
<Icon type="info" size={20} color="#33B5E5" />
178

179
// Form control icons
180
<Icon type="checkboxSelected" size={18} />
181
<Icon type="radioSelected" size={18} />
182
```
183

184
### Progress
185

186
Progress bar component for displaying task completion or loading states.
187

188
```typescript { .api }
189
/**
190
 * Progress bar component
191
 * @supported all platforms
192
 */
193
const Progress: ComponentType<ProgressProps>;
194

195
interface ProgressProps extends StandardProps {
196
  /** Progress percentage (0-100)
197
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
198
   */
199
  percent?: number;
200
  /** Whether to show progress info
201
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
202
   * @default false
203
   */
204
  showInfo?: boolean;
205
  /** Progress bar border radius
206
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
207
   * @default 0
208
   */
209
  borderRadius?: number;
210
  /** Font size for progress info
211
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
212
   * @default 16
213
   */
214
  fontSize?: number;
215
  /** Progress bar stroke width
216
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
217
   * @default 6
218
   */
219
  strokeWidth?: number;
220
  /** Progress bar color
221
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
222
   * @default "#09BB07"
223
   */
224
  color?: string;
225
  /** Progress bar active color (for animation)
226
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
227
   * @default "#09BB07"
228
   */
229
  activeColor?: string;
230
  /** Progress bar background color
231
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
232
   * @default "#EBEBEB"
233
   */
234
  backgroundColor?: string;
235
  /** Whether progress bar is active (animated)
236
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
237
   * @default false
238
   */
239
  active?: boolean;
240
  /** Active animation mode
241
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
242
   * @default "backwards"
243
   */
244
  activeMode?: 'backwards' | 'forwards';
245
  /** Animation duration in milliseconds
246
   * @supported weapp, tt, qq, jd, h5
247
   * @default 30
248
   */
249
  duration?: number;
250
  /** Progress completion callback */
251
  onActiveEnd?: (event: TaroEvent) => void;
252
}
253
```
254

255
**Usage Examples:**
256

257
```typescript
258
import { Progress } from "@tarojs/components";
259

260
// Basic progress bar
261
<Progress percent={30} showInfo />
262

263
// Styled progress bar
264
<Progress 
265
  percent={75} 
266
  showInfo 
267
  color="#FF6B6B" 
268
  backgroundColor="#F0F0F0"
269
  strokeWidth={8}
270
  borderRadius={4}
271
/>
272

273
// Animated progress bar
274
<Progress 
275
  percent={60} 
276
  active 
277
  activeMode="forwards"
278
  duration={50}
279
  onActiveEnd={() => console.log('Animation complete')}
280
/>
281
```
282

283
## Types
284

285
```typescript { .api }
286
// Base text handling types
287
interface TextSelectionEvent extends TaroEvent {
288
  detail: {
289
    start: number;
290
    end: number;
291
  };
292
}
293

294
// Icon type definitions
295
type IconType = 
296
  | 'success' | 'success_no_circle' | 'success_circle'
297
  | 'info' | 'info_circle'
298
  | 'warn' | 'warn_circle'
299
  | 'waiting' | 'waiting_circle'
300
  | 'cancel' | 'cancel_circle'
301
  | 'download' | 'search' | 'clear' | 'clear_circle'
302
  | 'checkboxSelected' | 'radioSelected' | 'radioUnselect';
303

304
// Progress event types
305
interface ProgressActiveEndEvent extends TaroEvent {
306
  detail: {
307
    // Progress completion details
308
  };
309
}
310

311
// Rich text node structure
312
interface RichTextNodeAttrs {
313
  [key: string]: string | number | boolean;
314
}
315

316
interface RichTextTextNode {
317
  type: 'text';
318
  text: string;
319
}
320

321
interface RichTextElementNode {
322
  type?: 'node';
323
  name: string;
324
  attrs?: RichTextNodeAttrs;
325
  children?: RichTextNode[];
326
}
327

328
type RichTextNode = RichTextTextNode | RichTextElementNode;
329
```