Text

显示带样式的文本内容，支持颜色、属性和文本选择。

基本用法

Renderable API

import { TextRenderable, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const text = new TextRenderable(renderer, {
  id: "greeting",
  content: "Hello, OpenTUI!",
  fg: "#00FF00",
})

renderer.root.add(text)

Construct API

import { Text, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

renderer.root.add(
  Text({
    content: "Hello, OpenTUI!",
    fg: "#00FF00",
  }),
)

文本属性

使用按位或运算组合多个文本属性：

import { TextRenderable, TextAttributes } from "@opentui/core"

const styledText = new TextRenderable(renderer, {
  id: "styled",
  content: "Important Message",
  fg: "#FFFF00",
  attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
})

可用属性

属性	描述
`TextAttributes.BOLD`	粗体文本
`TextAttributes.DIM`	暗淡文本
`TextAttributes.ITALIC`	斜体文本
`TextAttributes.UNDERLINE`	下划线文本
`TextAttributes.BLINK`	闪烁文本
`TextAttributes.INVERSE`	反色显示
`TextAttributes.HIDDEN`	隐藏文本
`TextAttributes.STRIKETHROUGH`	删除线文本

使用模板字面量实现富文本

使用 t 模板字面量在单个文本元素内实现内联样式：

import { TextRenderable, t, bold, underline, fg, bg, italic } from "@opentui/core"

const richText = new TextRenderable(renderer, {
  id: "rich",
  content: t`${bold("Important:")} ${fg("#FF0000")(underline("Warning!"))} Normal text`,
})

可用样式函数

import { t, bold, dim, italic, underline, blink, reverse, strikethrough, fg, bg } from "@opentui/core"

// Basic attributes
t`${bold("bold text")}`
t`${italic("italic text")}`
t`${underline("underlined")}`
t`${strikethrough("deleted")}`

// Colors
t`${fg("#FF0000")("red text")}`
t`${bg("#0000FF")("blue background")}`

// Combining styles
t`${bold(fg("#FFFF00")("bold yellow"))}`

定位

const text = new TextRenderable(renderer, {
  id: "positioned",
  content: "Absolute position",
  position: "absolute",
  left: 10,
  top: 5,
})

文本选择

启用文本选择以支持复制：

const selectableText = new TextRenderable(renderer, {
  id: "selectable",
  content: "Select me!",
  selectable: true, // Default is true
})

const nonSelectable = new TextRenderable(renderer, {
  id: "label",
  content: "Button Label",
  selectable: false, // Disable selection
})

属性

属性	类型	默认值	描述
`content`	`string \| StyledText`	`""`	要显示的文本内容
`fg`	`string \| RGBA`	-	前景（文本）颜色
`bg`	`string \| RGBA`	-	背景颜色
`attributes`	`TextAttributes`	`0`	文本样式属性
`selectable`	`boolean`	`true`	文本是否可选择
`position`	`"relative" \| "absolute"`	`"relative"`	定位模式
`left`, `top`, `right`, `bottom`	`number \| "auto" \| "{number}%"`	-	位置偏移量

示例：状态栏

import { Text, Box, t, bold, fg } from "@opentui/core"

const statusBar = Box(
  {
    position: "absolute",
    bottom: 0,
    width: "100%",
    height: 1,
    backgroundColor: "#333333",
    flexDirection: "row",
    justifyContent: "space-between",
    paddingLeft: 1,
    paddingRight: 1,
  },
  Text({
    content: t`${bold("myfile.ts")} - ${fg("#888888")("TypeScript")}`,
  }),
  Text({
    content: t`Ln ${fg("#00FF00")("42")}, Col ${fg("#00FF00")("15")}`,
  }),
)

renderer.root.add(statusBar)