跳到主要内容

文本组件

文本组件用于显示各种类型的文本内容，包括普通文本、代码、富文本等。

基础文本组件​

Text - 文本组件​

显示普通文本内容，支持多种标题级别。

基本用法​

Text("文本内容")
    .fontSize(h1)
    .color("#333")
    .fontWeight(bold)
{
    // 文本内容
}

属性列表​

属性接受类型默认值说明
fontSizestring, int, singlef16字体大小
fontWeightstring, int"normal"字体粗细
fontFamilystring"inherit"字体族
colorstring"inherit"文字颜色
lineHeightstring, int, singlef"normal"行高
letterSpacingstring, int, singlef"normal"字符间距
wordSpacingstring, int, singlef"normal"单词间距
textAlignstring"left"文本对齐
textDecorationstring"none"文本装饰
textTransformstring"none"文本转换
textLinesint0文本行数限制
textOverflowstring"clip"文本溢出处理
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

字体大小预设值​

值说明
h1标题1 (32px)
h2标题2 (24px)
h3标题3 (20px)
h4标题4 (18px)
h5标题5 (16px)
h6标题6 (14px)

字体粗细值​

值说明
100最细
200很细
300细
400正常
500中等
600半粗
700粗体
800很粗
900最粗
normal正常
bold粗体
lighter更细
bolder更粗

文本对齐值​

值说明
left左对齐
right右对齐
center居中对齐
justify两端对齐

文本装饰值​

值说明
none无装饰
underline下划线
overline上划线
line-through删除线

文本转换值​

值说明
none无转换
uppercase大写
lowercase小写
capitalize首字母大写

文本溢出值​

值说明
clip裁剪
ellipsis省略号
marquee滚动

Code - 代码文本组件​

显示代码文本，通常用于展示代码片段。

基本用法​

Code("let name: string = 'Sii';")
    .backgroundColor("#f8f9fa")
    .color("#e83e8c")
    .padding(8)
    .borderRadius(4)
{
    // 代码内容
}

属性列表​

属性接受类型默认值说明
fontSizestring, int, singlef14字体大小
fontFamilystring"monospace"字体族
colorstring"#333"文字颜色
backgroundColorstring"#f8f9fa"背景颜色
paddingstring, int, singlef8内边距
borderRadiusstring, int, singlef4圆角
borderstring"1px solid #e1e4e8"边框
lineHeightstring, int, singlef1.5行高
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
marginstring, int, singlef0外边距

Pre - 预格式化文本组件​

显示预格式化的文本，保持原有的格式和空格。

基本用法​

Pre("  预格式化文本\n  保持原有格式")
    .fontFamily("monospace")
    .backgroundColor("#f8f9fa")
    .padding(12)
    .borderRadius(6)
{
    // 预格式化内容
}

属性列表​

属性接受类型默认值说明
fontSizestring, int, singlef14字体大小
fontFamilystring"monospace"字体族
colorstring"#333"文字颜色
backgroundColorstring"#f8f9fa"背景颜色
paddingstring, int, singlef12内边距
borderRadiusstring, int, singlef6圆角
borderstring"1px solid #e1e4e8"边框
lineHeightstring, int, singlef1.5行高
whiteSpacestring"pre"空白处理
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
marginstring, int, singlef0外边距

富文本组件​

Markdown - Markdown渲染组件​

渲染Markdown格式的文本内容。

基本用法​

Markdown("# 标题\n\n这是**粗体**文本")
    .fontSize(16)
    .lineHeight(1.6)
    .color("#333")
{
    // Markdown内容
}

属性列表​

属性接受类型默认值说明
fontSizestring, int, singlef16字体大小
fontFamilystring"inherit"字体族
colorstring"#333"文字颜色
lineHeightstring, int, singlef1.6行高
backgroundColorstring"transparent"背景颜色
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
borderRadiusstring, int, singlef0圆角
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度

RichText - 富文本组件​

显示富文本内容，支持HTML标签。

基本用法​

RichText("<h2>标题</h2><p>这是<strong>粗体</strong>文本</p>")
    .fontSize(16)
    .lineHeight(1.6)
    .color("#333")
{
    // 富文本内容
}

属性列表​

属性接受类型默认值说明
fontSizestring, int, singlef16字体大小
fontFamilystring"inherit"字体族
colorstring"#333"文字颜色
lineHeightstring, int, singlef1.6行高
backgroundColorstring"transparent"背景颜色
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
borderRadiusstring, int, singlef0圆角
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度

Link - 链接组件​

创建可点击的链接。

基本用法​

Link("点击这里")
    .href("https://example.com")
    .color("#007bff")
    .textDecoration("underline")
    .onClick(handleClick)
{
    // 链接内容
}

属性列表​

属性接受类型默认值说明
hrefstring""链接地址
targetstring"_self"打开方式
colorstring"#007bff"文字颜色
textDecorationstring"underline"文本装饰
fontSizestring, int, singlef"inherit"字体大小
fontWeightstring, int"inherit"字体粗细
fontFamilystring"inherit"字体族
lineHeightstring, int, singlef"inherit"行高
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
noUnderlineboolfalse是否无下划线

打开方式值​

值说明
_self当前窗口
_blank新窗口
_parent父窗口
_top顶层窗口

文本组件示例​

标题层次​

Col()
    .gap(16)
{
    Text("主标题")
        .fontSize(h1)
        .fontWeight(bold)
        .color("#000")
    
    Text("副标题")
        .fontSize(h2)
        .fontWeight(600)
        .color("#333")
    
    Text("小标题")
        .fontSize(h3)
        .fontWeight(500)
        .color("#666")
    
    Text("正文内容")
        .fontSize(16)
        .lineHeight(1.6)
        .color("#333")
}

代码展示​

Col()
    .gap(12)
{
    Text("示例代码：")
        .fontSize(h4)
        .fontWeight(600)
    
    Code("let name: string = 'Sii';\nlet version: int = 1;\nprint('Hello, ' + name);")
        .backgroundColor("#f8f9fa")
        .color("#e83e8c")
        .padding(12)
        .borderRadius(6)
        .fontSize(14)
    
    Pre("  预格式化文本\n  保持原有格式\n  包括空格和换行")
        .backgroundColor("#f8f9fa")
        .padding(12)
        .borderRadius(6)
        .fontSize(14)
}

富文本内容​

Col()
    .gap(16)
{
    Markdown("# Markdown 标题\n\n这是 **粗体** 和 *斜体* 文本\n\n- 列表项1\n- 列表项2\n- 列表项3")
        .fontSize(16)
        .lineHeight(1.6)
        .color("#333")
    
    RichText("<h3>HTML 标题</h3><p>这是 <strong>粗体</strong> 和 <em>斜体</em> 文本</p><ul><li>列表项1</li><li>列表项2</li></ul>")
        .fontSize(16)
        .lineHeight(1.6)
        .color("#333")
}

链接导航​

Row()
    .gap(24)
    .align("center")
{
    Link("首页")
        .href("/")
        .color("#007bff")
        .fontWeight(500)
        .noUnderline(true)
    
    Link("产品")
        .href("/products")
        .color("#007bff")
        .fontWeight(500)
        .noUnderline(true)
    
    Link("关于")
        .href("/about")
        .color("#007bff")
        .fontWeight(500)
        .noUnderline(true)
    
    Link("联系")
        .href("/contact")
        .color("#007bff")
        .fontWeight(500)
        .noUnderline(true)
}