@ 碳/ 类型
使用碳设计系统的数字和软件产品的打字法
开始
要安装 @carbon/type 在您的工程中, 您需要运行以下
命令使用 无数字 :
npm install -S @carbon/type
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/type
使用量
@carbon/type 提供多种方法,与IBM的打字工作
设计语言. 您可以在 JavaScript 或 Sass 中使用所有这些特性 .
这些特点包括:
| 特性 | 说明 |
|---|---|
| 字体面额 | 包含 IBM 应用程序中的 PlexTM 字体面相 。 使用 Akamai CDN 软件 |
| 类型类 | 帮助直接使用类型样式。 默认未包含 |
| 字体家族 | 定义应用程序中的 IBM PlexTM 字体堆栈, 并为字体定义工作提供助手 |
| 重设 | 提供高级 CSS 重置以用于您的项目 |
| 缩放 | 提供类型尺度。 可在任何特定步骤(步骤1、2、3等)访问大小 |
| 样式 | 为您的应用程序提供类型样式( 标题-01, 体长-01等) |
这个 @carbon/type 软件包允许您使用 IBM 设计中的打字
语言,包括类型尺度和字体,以及打字设计
碳设计系统的标志。 也有有意见的默认
用于常见元素上的样式 h1, (中文(简体) ), h2, (中文(简体) ), p等 (中文(简体) ).
您可以通过写入以下内容来使用此软件包:
@use '@carbon/type';
// Include type reset
@include type.reset();
// Include default type styles, targets h1, h2, h3, etc
@include type.default-type();
// Include utility classes for type-related properties
@include type.type-classes();
.selector {
// Include a type style
@include type.type-style('productive-heading-01');
}
这应当包括从项目中重置的默认类型,以及 来自Google的IBM Plex Mono和IBM Plex Sans的字体面定义 字相会.
使用时 @carbon/react,导入路径变为:
@use '@carbon/react/scss/type';
类型样式
而不是使用类型尺度, @carbon/type 提供代表
我们称之为类型风格。 这些符号有各种各样的特性用于造型
如何在一页上提供文本.
您可以在 碳设计系统网站 。 。 。 .
您可以在您的 Sass 文件内写入一个符号 :
@use '@carbon/type';
@include type.type-style('token-name');
此外,如果您使用的类型样式具有流体样式,则您可以通过
内 true 作为第二个参数 type-style 以启用流体样式。 对于
示例:
@use '@carbon/type';
@include type.type-style('token-name', true);
类型类
您的应用程序的样式建议方式是使用我们 类型样式然而,我们也提供辅助人员CSS课程 具体的使用案例。 在迅速形成一个项目时,这些也是有益的.
在您的工程中,您可以通过在您的工程中写下以下内容而将类型类课程包含在内: Sass 文件 :
@use '@carbon/type';
:root {
@include type.type-classes();
}
然后在您要样式的元素中添加相应的类
<span className="cds--type-mono">Test sentence</span>
| 选择器 | 说明 |
|---|---|
.cds--type-mono | 指定字体面额为 IBM Plex Mono |
.cds--type-sans | 指定字体面额为 IBM Plex Sans |
.cds--type-serif | 以 IBM Plex Serif 指定字体面 |
.cds--type-light | 指定字体重为轻 (300) |
.cds--type-regular | 指定字体重为正则 (400) |
.cds--type-semibold | 指定字体重为半粗体 (600) |
.cds--type-italic | 将字体样式指定为斜体 |
.cds--type-<type-style> | 设置给定类型样式的样式 |
字体家族
@carbon/type 为所有可用的IBM Plex字体提供字体堆栈.
您可以通过输入以下导入来访问字体家族信息
您的 Sass 文件 :
@use '@carbon/type';
字体堆栈可在 $font-families 变量。 你也可以这样
通过使用 font-family 通过下列方式实现函数:
.my-selector {
font-family: type.font-family('mono');
}
你也可以使用这个 font-family 混合以自动设置 font-family
您的属性 :
.my-selector {
@include type.font-family('serif');
}
您可以看到所有可用的字体家族 $font-families 。 。 。 .
重设
可在 reset 混合剂。 你可以包括这个
通过在您的 Sass 文件中写入以下内容来混合 :
@use '@carbon/type';
:root {
@include type.reset();
}
此重置设置一些顶级属性 html 财务报告和审定财务报表 body,即:
font-size, (中文(简体) ), font-family,还有一些 text-rendering 选项。 我们还绘制了地图
strong 标记到半粗体字体重量.
替换字体
@carbon/type 可以配置它自己的 Sass API 使用的字体家族,但它
不生成碳组件样式或控制 IBM Plex @font-face
输出。 Carbon的类型基础和组件样式紧密结合,所以
应用程序宽型号替换必须配置通过
@carbon/styles 萨斯入口. 见
替换字体 @carbon/styles。 。 。 .
类型比例
类型比值是通过 $type-scale 变量和相应的
type-scale 函数和混合。 但是,对于指定类型样式
建议是使用 类型样式 。 。 。 .
如果您想要使用类型缩放, 您可以包含所有与缩放相关的缩放 通过在您的 Sass 文件中写入下列工具及变量 :
@use '@carbon/type';
您可以使用 type-scale
函数 :
.my-selector {
font-size: type.type-scale(1);
}
还有一个 type-scale 将设置的混合 font-size 直接给您 :
@use '@carbon/type';
.my-selector {
@include type.type-scale(4);
}
实例
如果你想要更多关于如何使用的例子 @carbon/type我们有一些
实例可以查看:
您还可以看到更多关于可用符号的文档 这里
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .