类型

字法有助于建立分级,并清晰地沟通文本内容. 语义学和视觉学的文字学部分摘要。 一些Typtography组件可以有语义上的含义附着在它上.

类型组件控制 字体 属性,其他适用样式由全局或用户代理样式继承. 为了得到更多的控制,在母容器中应用样式. 打字组件的目的是为了能够添加可主题的文本内容.

您可以使用 HTML 文本内容 财务报告和审定财务报表 内容部分 来组织内容的块或部分.

使用 HTML 语言 内置文本语义 定义一个单词、行或任意文本的含义、结构或样式.

使用量

import {Heading, Display, Code, Text} from '@asphalt-react/typography'

<Heading>The quick brown fox jumps</Heading>

<Display>The quick brown fox jumps</Display>

<Code>npm install @asphalt-react/typography</Code>

<Text>The quick brown fox jumps</Text>

<Text bold>I have a higher font weight than Text</Text>

意图

这个 Heading, (中文(简体) ), Display 打开 Text 组件有5个意图来代表不同的内容等级和使用:

• 小学:这是默认的意向并具有最高等级.
• 中学:此意向表示副本的等级比"主"低.
• 哑巴:此意图具有最下层的分级,并可用于显示副本,应能得到最少用户的注意.
• 品牌:此意向凸显出密切代表品牌的复制品.
• 布兰德:这个意图对于在有名的有色地表面提供一份副本是有用的. 这种意图确保了与品牌颜色的适当对比比.

Text 额外支持四个语义意图 状态和反馈消息 :

• 资讯: 一个通用的信息信息.
• 成功:具有成功意图的信息.
• 警告:具有警告意图的信息;需要更多的关注而不是信息.
• 危险:最需要注意的关键信息。 用于信息导致破坏行动,如删除用户.

标题

使用 Heading 代表本节标题内容,它支持所有6个级别的本节标题 h1 直至 h6。 。 。 .

Figma Token 绘图

每个标题级别映射到一个Figma令牌及其相应的CSS自定义属性:

道具

儿童

标题内容的反应节点 .

(单位:千美元)

将内容修改为 h1 节标题 .

页:1

将内容修改为 h2 节标题 .

h3 (韩语)

将内容修改为 h3 节标题 .

h4 (中文(简体) )

将内容修改为 h4 节标题 .

h5 (韩语)

将内容渲染为h5节标题.

小时6

将内容修改为 h6 节标题 .

小学

将文字以初意为出. 这是默认意图.

中学

以二义而作文字.

品牌

以品牌为意向来将文字渲染.

布兰德

将文本与具有品牌颜色的背景相对应.

哑巴

以微弱的意向渲染文字.

显示

使用 Display 更加强调文本。 用它来显示英雄或营销文本.

默认显示使内容在 p 标记,您也可以选择在 div 或者说 span 换句话说.

道具

儿童

显示内容的反应节点 .

大小

控制显示大小.

页:1

将显示内容以 p 标签.

间距

将显示内容以 span 标签.

数字

将显示内容以 div 标签.

小学

将文字以初意为出. 这是默认意图.

中学

以二义而作文字.

品牌

以品牌为意向来将文字渲染.

布兰德

以适当的对比比对有品牌色彩的背景进行文字渲染.

哑巴

以微弱的意向渲染文字.

代码

Code 样式文本内容,意在表明文本是计算机代码的短片或片段.

道具

儿童

代码内容的反应节点.

大小

控制代码内容的大小.

文本

使用 Text 以生成通用文本内容. 默认文本使文本在 p 标记,您也可以选择在 div 或者说 span 换句话说.

道具

儿童

文本内容的反应节点.

大小

控制文本的大小.

粗体

将粗体变体渲染.

粗体变体只支持"x","s","m"和"l"大小.

页:1

将内容变成 p 标签.

间距

将内容变成 span 标签.

数字

将内容变成 div 标签.

小学

将文字以初意为出. 这是默认意图.

中学

以二义而作文字.

品牌

以品牌为意向来将文字渲染.

布兰德

以适当的对比比对有品牌色彩的背景进行文字渲染.

危险

将文字以危险为意.

警告

以警告为意向的文本.

资讯

以信息意向渲染文字.

成功

以成功意向将文本渲染.

哑巴

以微弱的意向渲染文字.

椭圆

当文本溢出容器时,将文本切出椭圆形.