HarmonyOS 6 RcText Component: Complete Usage Guide with Code Examples

Basic Usage

1. Plain Text Display

RcText displays text content with minimal configuration. The text parameter accepts both strings and numbers.

import { RcText } from 'rchoui'</code><code>Column({ space: 10 }) {</code><code>  RcText({ text: '这是一段普通文本' })</code><code>  RcText({ text: '支持数字类型', text: 12345 })</code><code>}

Default behavior: 14vp font size, dark gray color (#303133), left-aligned.

2. Theme Colors

Six preset theme colors for semantic scenarios:

default — #303133 — Regular text, body content — Dark gray, readable

primary — #409eff — Emphasis, links — Blue, attention-grabbing

success — #67c23a — Success messages, positive states — Green, positive

warning — #e6a23c — Warnings, cautions — Orange, attention

danger — #f56c6c — Errors, dangerous actions — Red, strong warning

info — #909399 — Secondary info, helper text — Gray, subdued

Usage recommendations: default for body, primary for important info, success for success states, danger for errors, info for auxiliary text.

Column({ space: 10 }) {</code><code>  RcText({ text: 'Default 默认', type: 'default' })</code><code>  RcText({ text: 'Primary 主色', type: 'primary' })</code><code>  RcText({ text: 'Success 成功', type: 'success' })</code><code>  RcText({ text: 'Warning 警告', type: 'warning' })</code><code>  RcText({ text: 'Danger 危险', type: 'danger' })</code><code>  RcText({ text: 'Info 信息', type: 'info' })</code><code>}

3. Text Sizes

Three preset sizes:

large — 18vp — Page titles, important info

default — 14vp — Body text, regular content

small — 12vp — Helper text, secondary info

Selection guide: large for page/card titles, default for body/list items, small for hints/timestamps.

Column({ space: 10 }) {</code><code>  RcText({ text: 'Large 大号文本', textSize: 'large' })</code><code>  RcText({ text: 'Default 默认文本', textSize: 'default' })</code><code>  RcText({ text: 'Small 小号文本', textSize: 'small' })</code><code>}

Style Customization

1. Custom Color and Font Size

When presets are insufficient, use direct properties (higher priority than theme/size):

Column({ space: 10 }) {</code><code>  // Custom color</code><code>  RcText({ text: '自定义颜色文本', color: '#ff6600' })</code><code>  // Custom font size</code><code>  RcText({ text: '自定义字号文本', fontSize: 20 })</code><code>  // Combined</code><code>  RcText({ text: '组合自定义样式', color: '#ff6600', fontSize: 18, fontWeight: 'bold' })</code><code>}

fontWeight supports keywords (normal, bold, lighter, bolder) and numeric values (100-900).

2. Text Alignment

Five alignment options:

left (default)

center (titles)

right (amounts)

start (RTL support)

end (RTL support)

Column({ space: 10 }) {</code><code>  RcText({ text: '左对齐文本（默认）', textAlign: 'left' })</code><code>  RcText({ text: '居中对齐文本', textAlign: 'center', type: 'primary' })</code><code>  RcText({ text: '右对齐文本', textAlign: 'right', type: 'success' })</code><code>}

Practical examples: centered page titles, right-aligned currency amounts.

// 页面标题居中</code><code>RcText({</code><code>  text: '页面标题',</code><code>  textAlign: 'center',</code><code>  fontSize: 20,</code><code>  fontWeight: 'bold'</code><code>})</code><code>// 金额右对齐</code><code>RcText({</code><code>  text: '¥1,234.56',</code><code>  textAlign: 'right',</code><code>  type: 'danger',</code><code>  fontSize: 18</code><code>})

3. Text Decoration

Supports underline and line-through:

Column({ space: 10 }) {</code><code>  RcText({ text: '下划线文本', textDecoration: 'underline', type: 'primary' })</code><code>  RcText({ text: '删除线文本', textDecoration: 'line-through', type: 'danger' })</code><code>}

Decoration types: none (default), underline (links), line-through (strikethrough for original prices). Example shows original price with line-through next to discounted price in danger type.

// 链接文本</code><code>RcText({</code><code>  text: '点击查看详情',</code><code>  textDecoration: 'underline',</code><code>  type: 'primary'</code><code>})</code><code>// 原价展示</code><code>Row({ space: 8 }) {</code><code>  RcText({</code><code>    text: '¥299.00',</code><code>    textDecoration: 'line-through',</code><code>    type: 'info',</code><code>    textSize: 'small'</code><code>  })</code><code>  RcText({</code><code>    text: '¥199.00',</code><code>    type: 'danger',</code><code>    fontSize: 20,</code><code>    fontWeight: 'bold'</code><code>  })</code><code>}

Text Truncation

1. Single-line Truncation

Set truncated: true to limit to one line with ellipsis:

RcText({ text: '很长的文本内容...', truncated: true })

Use cases: article titles, product names in lists.

// 文章标题</code><code>RcText({</code><code>  text: article.title,</code><code>  truncated: true,</code><code>  fontSize: 16,</code><code>  fontWeight: 'bold'</code><code>})</code><code>// 商品名称</code><code>RcText({</code><code>  text: product.name,</code><code>  truncated: true,</code><code>  type: 'default'</code><code>})

2. Multi-line Truncation

Control max lines with maxLines and lineHeight:

Column({ space: 10 }) {</code><code>  RcText({ text: '长文本...', maxLines: 2, type: 'info' })</code><code>  RcText({ text: '文章摘要...', maxLines: 3, lineHeight: 22 })</code><code>}

Applications: article summaries (3 lines), product descriptions (2 lines), comments (4 lines).

// 文章摘要</code><code>RcText({</code><code>  text: article.summary,</code><code>  maxLines: 3,</code><code>  lineHeight: 22,</code><code>  type: 'info'</code><code>})</code><code>// 商品描述</code><code>RcText({</code><code>  text: product.description,</code><code>  maxLines: 2,</code><code>  textSize: 'small',</code><code>  type: 'info'</code><code>})</code><code>// 评论内容</code><code>RcText({</code><code>  text: comment.content,</code><code>  maxLines: 4,</code><code>  lineHeight: 20</code><code>})

Special Display Modes

1. Price Mode

Automatically formats numbers as currency:

Column({ space: 10 }) {</code><code>  RcText({ text: '1234.56', mode: 'price', type: 'danger', fontSize: 20, fontWeight: 'bold' })</code><code>  RcText({ text: '999999.99', mode: 'price', type: 'danger' })</code><code>}

Formatting rules: adds ¥ symbol, keeps two decimals, adds thousand separators. Examples: '1234.56' → '¥1,234.56', '999999' → '¥999,999.00', '100' → '¥100.00'. Complete product price component shows current price (bold, large, danger) and original price (small, info, line-through).

@Component</code><code>struct ProductPrice {</code><code>  @Prop product: ProductInfo</code><code>  build() {</code><code>    Row({ space: 8 }) {</code><code>      // 现价</code><code>      RcText({</code><code>        text: this.product.price,</code><code>        mode: 'price',</code><code>        type: 'danger',</code><code>        fontSize: 24,</code><code>        fontWeight: 'bold'</code><code>      })</code><code>      // 原价</code><code>      if (this.product.originalPrice) {</code><code>        RcText({</code><code>          text: this.product.originalPrice,</code><code>          mode: 'price',</code><code>          textDecoration: 'line-through',</code><code>          type: 'info',</code><code>          textSize: 'small'</code><code>        })</code><code>      }</code><code>    }</code><code>  }</code><code>}

2. Phone Mode

Masks 11-digit phone numbers for privacy:

Column({ space: 10 }) {</code><code>  RcText({ text: '13888888888', mode: 'phone', type: 'primary' })</code><code>  RcText({ text: '18912345678', mode: 'phone' })</code><code>}

Masking rule: shows first 3 and last 4 digits, middle 4 as ****. Examples: '13888888888' → '138****8888', '18912345678' → '189****5678'. Used in user profiles and order contact info.

// 用户信息展示</code><code>Column({ space: 8 }) {</code><code>  Row({ space: 8 }) {</code><code>    Text('手机号:').fontSize(14).fontColor('#666')</code><code>    RcText({ text: user.phone, mode: 'phone', type: 'default' })</code><code>  }</code><code>}</code><code>// 订单联系方式</code><code>Column({ space: 4 }) {</code><code>  Text('收货人信息').fontSize(14).fontColor('#999')</code><code>  RcText({ text: order.receiverPhone, mode: 'phone', fontSize: 15 })</code><code>}

3. Link Mode

Creates clickable text links with onTextClick handler:

RcText({</code><code>  text: '点击访问官网',</code><code>  mode: 'link',</code><code>  href: 'https://example.com',</code><code>  type: 'primary',</code><code>  textDecoration: 'underline',</code><code>  onTextClick: () => { console.log('链接被点击'); /* navigation logic */ }</code><code>})

Best practices: use primary type, add underline, combine with suffixIcon for arrow indicators. Examples: standard navigation links, agreement links, 'learn more' with forward arrow icon.

// 标准链接样式</code><code>RcText({</code><code>  text: '查看详情',</code><code>  mode: 'link',</code><code>  type: 'primary',</code><code>  textDecoration: 'underline',</code><code>  onTextClick: () => {</code><code>    router.pushUrl({ url: 'pages/Detail' })</code><code>  }</code><code>})</code><code>// 协议链接</code><code>RcText({</code><code>  text: '《用户协议》',</code><code>  mode: 'link',</code><code>  type: 'primary',</code><code>  textSize: 'small',</code><code>  onTextClick: () => {</code><code>    router.pushUrl({ url: 'pages/Agreement' })</code><code>  }</code><code>})</code><code>// 带后置箭头的链接</code><code>RcText({</code><code>  text: '了解更多',</code><code>  mode: 'link',</code><code>  type: 'primary',</code><code>  suffixIcon: 'icon-houi_arrow_ios_forward_outline',</code><code>  iconSize: 16,</code><code>  onTextClick: () => { /* 跳转逻辑 */ }</code><code>})

Prefix and Suffix Elements

1. Prefix Icons

Add icons before text for status or function indication:

Column({ space: 10 }) {</code><code>  RcText({ text: '首页', prefixIcon: 'icon-houi_home_outline', iconSize: 20, type: 'primary' })</code><code>  RcText({ text: '设置', prefixIcon: 'icon-houi_settings_2_outline', iconSize: 20, type: 'info' })</code><code>  RcText({ text: '成功提示', prefixIcon: 'icon-houi_checkmark_circle_2_outline', iconSize: 20, type: 'success' })</code><code>}

Scenarios: status indicators (success/warning/error icons), functional entries (search, location).

// 状态提示</code><code>Column({ space: 10 }) {</code><code>  RcText({ text: '操作成功', prefixIcon: 'icon-houi_checkmark_circle_2_outline', iconSize: 18, type: 'success' })</code><code>  RcText({ text: '警告信息', prefixIcon: 'icon-houi_alert_circle_outline', iconSize: 18, type: 'warning' })</code><code>  RcText({ text: '错误提示', prefixIcon: 'icon-houi_close_circle_outline', iconSize: 18, type: 'danger' })</code><code>}</code><code>// 功能入口</code><code>Column({ space: 12 }) {</code><code>  RcText({ text: '搜索商品', prefixIcon: 'icon-houi_search_outline', iconSize: 20, type: 'info' })</code><code>  RcText({ text: '定位信息', prefixIcon: 'icon-houi_pin_outline', iconSize: 18, type: 'primary' })</code><code>}

2. Suffix Icons

Add icons after text for navigation or expansion:

Column({ space: 10 }) {</code><code>  RcText({ text: '查看更多', suffixIcon: 'icon-houi_arrow_ios_forward_outline', iconSize: 16, type: 'primary' })</code><code>  RcText({ text: '返回上一页', suffixIcon: 'icon-houi_arrow_ios_back_outline', iconSize: 16 })</code><code>}

Use cases: navigation links with chevron, expand/collapse with dynamic up/down icons.

// 导航链接</code><code>RcText({</code><code>  text: '个人中心',</code><code>  suffixIcon: 'icon-houi_chevron_right_outline',</code><code>  iconSize: 16,</code><code>  onTextClick: () => {</code><code>    router.pushUrl({ url: 'pages/Profile' })</code><code>  }</code><code>})</code><code>// 下拉展开</code><code>RcText({</code><code>  text: this.expanded ? '收起' : '展开',</code><code>  suffixIcon: this.expanded ? 'icon-houi_chevron_up_outline' : 'icon-houi_chevron_down_outline',</code><code>  iconSize: 16,</code><code>  type: 'primary',</code><code>  onTextClick: () => {</code><code>    this.expanded = !this.expanded</code><code>  }</code><code>})

3. Combined Prefix and Suffix

Both icons simultaneously for rich list items:

RcText({</code><code>  text: '重要通知',</code><code>  prefixIcon: 'icon-houi_bell_outline',</code><code>  suffixIcon: 'icon-houi_chevron_right_outline',</code><code>  iconSize: 18,</code><code>  type: 'warning'</code><code>})

Complete list item component demonstrates dynamic icon/type mapping based on status (success/warning/error) with click navigation.

@Component</code><code>struct ListItemWithIcons {</code><code>  @Prop item: ListItemData</code><code>  build() {</code><code>    Row() {</code><code>      RcText({</code><code>        text: this.item.title,</code><code>        prefixIcon: this.getStatusIcon(this.item.status),</code><code>        suffixIcon: 'icon-houi_chevron_right_outline',</code><code>        iconSize: 18,</code><code>        type: this.getStatusType(this.item.status),</code><code>        onTextClick: () => {</code><code>          router.pushUrl({</code><code>            url: 'pages/Detail',</code><code>            params: { id: this.item.id }</code><code>          })</code><code>        }</code><code>      })</code><code>    }</code><code>    .width('100%')</code><code>    .padding(16)</code><code>    .backgroundColor('#fff')</code><code>  }</code><code>  getStatusIcon(status: string): string {</code><code>    const iconMap = {</code><code>      'success': 'icon-houi_checkmark_circle_2_outline',</code><code>      'warning': 'icon-houi_alert_circle_outline',</code><code>      'error': 'icon-houi_close_circle_outline'</code><code>    }</code><code>    return iconMap[status] || 'icon-houi_info_outline'</code><code>  }</code><code>  getStatusType(status: string): RcTextType {</code><code>    const typeMap = {</code><code>      'success': 'success',</code><code>      'warning': 'warning',</code><code>      'error': 'danger'</code><code>    }</code><code>    return typeMap[status] || 'default'</code><code>  }</code><code>}

4. Custom Element Colors

iconColor sets independent color for prefix/suffix icons:

Column({ space: 10 }) {</code><code>  RcText({ text: '橙色元素', prefixIcon: 'icon-houi_heart_outline', iconSize: 20, iconColor: '#ff6600', type: 'default' })</code><code>  RcText({ text: '紫色元素', prefixIcon: 'icon-houi_star_outline', iconSize: 20, iconColor: '#9c27b0' })</code><code>}

Default: icon color follows text color. With iconColor: icons use specified color independently.

Interaction Features

1. Click Events

onTextClick enables interactive behaviors:

@Component</code><code>struct ClickExample {</code><code>  @State clickCount: number = 0</code><code>  build() {</code><code>    Column({ space: 15 }) {</code><code>      Text(`点击次数：${this.clickCount}`).fontSize(16)</code><code>      RcText({</code><code>        text: `点击次数：${this.clickCount}`,</code><code>        type: 'primary',</code><code>        prefixIcon: 'icon-houi_file_add',</code><code>        iconSize: 18,</code><code>        onTextClick: () => { this.clickCount++ }</code><code>      })</code><code>    }</code><code>  }</code><code>}

Application patterns: navigation (router.pushUrl), expand/collapse (toggle state + icon change), like toggle (text/icon/type change + toast feedback).

// 导航跳转</code><code>RcText({</code><code>  text: '查看订单详情',</code><code>  type: 'primary',</code><code>  suffixIcon: 'icon-houi_arrow_ios_forward_outline',</code><code>  onTextClick: () => {</code><code>    router.pushUrl({</code><code>      url: 'pages/OrderDetail',</code><code>      params: { orderId: this.orderId }</code><code>    })</code><code>  }</code><code>})</code><code>// 展开折叠</code><code>@State expanded: boolean = false</code><code>Column() {</code><code>  Text(this.expanded ? this.fullContent : this.shortContent)</code><code>  RcText({</code><code>    text: this.expanded ? '收起' : '展开全部',</code><code>    type: 'primary',</code><code>    textSize: 'small',</code><code>    suffixIcon: this.expanded ? 'icon-houi_chevron_up_outline' : 'icon-houi_chevron_down_outline',</code><code>    onTextClick: () => {</code><code>      this.expanded = !this.expanded</code><code>    }</code><code>  })</code><code>}</code><code>// 切换状态</code><code>@State liked: boolean = false</code><code>RcText({</code><code>  text: this.liked ? '已点赞' : '点赞',</code><code>  type: this.liked ? 'danger' : 'default',</code><code>  prefixIcon: this.liked ? 'icon-houi_heart' : 'icon-houi_heart_outline',</code><code>  iconSize: 18,</code><code>  onTextClick: () => {</code><code>    this.liked = !this.liked</code><code>    promptAction.showToast({</code><code>      message: this.liked ? '点赞成功' : '取消点赞'</code><code>    })</code><code>  }</code><code>})

2. Selectable Text

selectable: true enables long-press copy:

RcText({</code><code>  text: '这段文本可以被选中和复制，请长按尝试',</code><code>  selectable: true,</code><code>  type: 'primary',</code><code>  rcPadding: 10</code><code>}).backgroundColor('#f0f9ff').borderRadius(4)

Use cases: order numbers (bold, selectable), addresses (with maxLines), verification codes (large, bold, centered, primary color).

// 订单号</code><code>Row({ space: 8 }) {</code><code>  Text('订单号:').fontSize(14).fontColor('#666')</code><code>  RcText({ text: order.orderNo, selectable: true, fontWeight: 'bold' })</code><code>}</code><code>// 地址信息</code><code>Column({ space: 4 }) {</code><code>  Text('收货地址').fontSize(14).fontColor('#999')</code><code>  RcText({ text: order.address, selectable: true, maxLines: 2 })</code><code>}</code><code>// 验证码</code><code>Column({ space: 8 }) {</code><code>  Text('验证码').fontSize(14)</code><code>  RcText({</code><code>    text: verifyCode,</code><code>    selectable: true,</code><code>    fontSize: 32,</code><code>    fontWeight: 'bold',</code><code>    color: '#409eff',</code><code>    textAlign: 'center'</code><code>  })</code><code>}

Layout Control

Margin and Padding

rcPadding (internal) and rcMargin (external) for precise spacing:

Column({ space: 10 }) {</code><code>  // With padding</code><code>  RcText({ text: '带内边距的文本', rcPadding: { left: 16, right: 16, top: 8, bottom: 8 }, type: 'primary', color: '#fff' })</code><code>    .backgroundColor('#409eff').borderRadius(4)</code><code>  // With margin</code><code>  RcText({ text: '带外边距的文本', rcMargin: { top: 10, bottom: 10 }, type: 'success' })</code><code>}

Tag style example: Flex wrap with small primary text, padding 12/4, margin 8/8, background #e6f7ff, radius 4. Card content: title with bottom margin 8, body with info type, small size, 2-line truncation.

// 标签样式</code><code>Flex({ wrap: FlexWrap.Wrap }) {</code><code>  ForEach(this.tags, (tag: string) => {</code><code>    RcText({</code><code>      text: tag,</code><code>      type: 'primary',</code><code>      textSize: 'small',</code><code>      rcPadding: { left: 12, right: 12, top: 4, bottom: 4 },</code><code>      rcMargin: { right: 8, bottom: 8 }</code><code>    })</code><code>    .backgroundColor('#e6f7ff')</code><code>    .borderRadius(4)</code><code>  })</code><code>}</code><code>// 卡片内容</code><code>Column({ space: 0 }) {</code><code>  RcText({</code><code>    text: '卡片标题',</code><code>    fontSize: 16,</code><code>    fontWeight: 'bold',</code><code>    rcMargin: { bottom: 8 }</code><code>  })</code><code>  RcText({</code><code>    text: '卡片内容描述文字',</code><code>    type: 'info',</code><code>    textSize: 'small',</code><code>    maxLines: 2</code><code>  })</code><code>}</code><code>.padding(16)</code><code>.backgroundColor('#fff')</code><code>.borderRadius(8)