No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Typography 排版
使用文字铸排可以尽可能清晰、高效地展示设计和内容。
使用方式
import { Typography } from '@apitable/components';
字体排版
名称(variant)字号(px)行高(px)实例
H13248
H1 一级标题
H22842
H2 二级标题
H32436
H3 三级标题
H42030
H4 四级标题
H51828
H5 五级标题
H61624
H6 六级标题
H71422
H7 七级标题
H81320
H8 八级标题
H91218
H9 九级标题
Body11624
Body1 文本
Body21422
Body2 文本
Body31320
Body3 文本
Body41218
Body4 文本
颜色
可自定义文字的颜色
H1 一级标题
对齐方式
支持多种对其方式，比如右对齐：
H1 一级标题
省略号
ellipsis 支持布尔值和具体的配置：
{
  rows?: number;
  tooltip?: string;
  visible?: boolean;
}
  • ellipsis 设置为 true 时，默认超过一行省略，并且出现 tooltip
全能程序员的优势，判断正确的仰角 θ，使得两点之间距离最短；特长程序员的优势是前进速度 r，可以在既定道路上做到快速前进。所以，知识的广度能告诉你什么是正确的方向，知识的深度则可以让你在该方向上快速前进。对于长期而艰巨的项目，走得快固然重要，但更重要的是走对方向。如果仰角 θ 不对，走得再快也没用，因为一开始就走错方向，后期必须停下来校正方向，甚至可能永远到达不了目标，白白浪费了生命
  • 可指定设置展示行数，超过才出现省略号
全能程序员的优势，判断正确的仰角 θ，使得两点之间距离最短；特长程序员的优势是前进速度 r，可以在既定道路上做到快速前进。所以，知识的广度能告诉你什么是正确的方向，知识的深度则可以让你在该方向上快速前进。对于长期而艰巨的项目，走得快固然重要，但更重要的是走对方向。如果仰角 θ 不对，走得再快也没用，因为一开始就走错方向，后期必须停下来校正方向，甚至可能永远到达不了目标，白白浪费了生命
  • 可指定 tooltip 文本
全能程序员的优势，判断正确的仰角 θ，使得两点之间距离最短；特长程序员的优势是前进速度 r，可以在既定道路上做到快速前进。所以，知识的广度能告诉你什么是正确的方向，知识的深度则可以让你在该方向上快速前进。对于长期而艰巨的项目，走得快固然重要，但更重要的是走对方向。如果仰角 θ 不对，走得再快也没用，因为一开始就走错方向，后期必须停下来校正方向，甚至可能永远到达不了目标，白白浪费了生命
API
NameDescriptionDefault
className
类名
string
-
style
样式
CSSProperties
-
component
使用指定的HTML元素来渲染组件
ElementType<any>
-
color
文字颜色
string
-
align
对齐方式
"inherit""left""center""right"
-
variant
应用主题字体样式
"h1""h2""h3""h4""h5""h6""h7""h8"
-
ellipsis
自动溢出省略
booleanIEllipsis
-
tooltipsZIndex
tooltips 层级 z-index属性
number
-
onClick
((e: MouseEvent<Element, MouseEvent>) => void)
-
onMouseDown
((e: MouseEvent<Element, MouseEvent>) => void)
-
IEllipsis interface
名称类型说明
rowsnumber指定展示文本行数，超出省略
tooltipstring指定 tooltip 信息
visibleboolean控制 tooltip 展示