Typography

Telegram 风格的排版组件族,包括基础 Typography 组件、Text 文本、Headline 标题和 Caption 说明文字。

导入

import { Typography, Text, Headline, Caption } from '@xcloud/ui-telegram'

示例

Typography 基础组件

Typography 是所有文本组件的基础,提供字重、大小写转换等基本排版功能。

import { Typography } from '@xcloud/ui-telegram'

function Example() {
  return (
    <>
      <Typography weight="1">Light text</Typography>
      <Typography weight="2">Medium text</Typography>
      <Typography weight="3">Bold text</Typography>
      <Typography caps>UPPERCASE</Typography>
    </>
  )
}

Text 文本组件

Text 组件用于一般性文本内容,如段落、标签等。默认字号为 14px。

import { Text } from '@xcloud/ui-telegram'

function Example() {
  return (
    <Text weight="2">这是一段普通文本</Text>
  )
}

Headline 标题组件

Headline 组件用于章节标题或重要标题。默认字号为 17px,默认渲染为 <h5> 标签。

import { Headline } from '@xcloud/ui-telegram'

function Example() {
  return (
    <>
      <Headline weight="3">Section Title</Headline>
      <Headline Component="h3">Main Heading</Headline>
    </>
  )
}

Caption 说明文字组件

Caption 组件用于小型说明文字、标注等。支持两个级别:

• Level 1: 13px 字号
• Level 2: 12px 字号

import { Caption } from '@xcloud/ui-telegram'

function Example() {
  return (
    <>
      <Caption level="1">Caption text (13px)</Caption>
      <Caption level="2">Smaller caption (12px)</Caption>
    </>
  )
}

组合使用

import { Headline, Text, Caption } from '@xcloud/ui-telegram'

function Article() {
  return (
    <article>
      <Headline weight="3">文章标题</Headline>
      <Caption level="1" weight="1" style={{ color: '#6b7280' }}>
        发布于 2024年1月1日
      </Caption>
      <Text weight="1" style={{ marginTop: '16px' }}>
        这是文章的正文内容...
      </Text>
    </article>
  )
}

组件 API

Typography Props

属性	类型	默认值	描述
weight	'1' | '2' | '3'	'3'	字重,对应 400/500/600
caps	boolean	false	是否转换为大写
Component	ElementType	'span'	渲染的 HTML 标签或组件
plain	boolean	true	是否移除默认 margin
className	string	-	附加的 CSS 类名

继承 HTMLAttributes<HTMLElement> 的所有属性。

Text Props

Text 组件继承 Typography 的所有属性,但不包括 plain (固定为 true)。

属性	类型	默认值	描述
weight	'1' | '2' | '3'	'3'	字重
Component	ElementType	'span'	渲染的标签
className	string	-	CSS 类名

Headline Props

Headline 组件继承 Typography 的所有属性。

属性	类型	默认值	描述
weight	'1' | '2' | '3'	'3'	字重
Component	ElementType	'h5'	渲染的标签
plain	boolean	true	是否移除 margin
className	string	-	CSS 类名

Caption Props

属性	类型	默认值	描述
level	'1' | '2'	'1'	尺寸级别 (1=13px, 2=12px)
weight	'1' | '2' | '3'	'3'	字重
Component	ElementType	'span'	渲染的标签
className	string	-	CSS 类名

主题支持

所有 Typography 组件都支持 Telegram 主题系统,通过 CSS 变量实现:

• --tgui--font-family - 字体族
• --tgui--font_weight--accent1 - Weight 1 字重 (默认 400)
• --tgui--font_weight--accent2 - Weight 2 字重 (默认 500)
• --tgui--font_weight--accent3 - Weight 3 字重 (默认 600)
• --tgui--text--font_size - Text 字号 (默认 14px)
• --tgui--headline--font_size - Headline 字号 (默认 17px)
• --tgui--caption1--font_size - Caption Level 1 字号 (默认 13px)
• --tgui--caption2--font_size - Caption Level 2 字号 (默认 12px)

语义化

建议根据内容语义选择合适的 Component:

// 页面主标题
<Headline Component="h1">页面标题</Headline>

// 章节标题
<Headline Component="h2">章节标题</Headline>

// 段落文本
<Text Component="p">段落内容</Text>

// 行内文本
<Text Component="span">行内文本</Text>

相关链接

• TelegramProvider - Telegram 环境提供者
• Spoiler - 隐藏文字组件