- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
文本的基本格式。
Sketch
and Axure
), to help people create their product prototypes beautifully and efficiently.Sketch
和Axure
),来帮助业务快速设计出高质量的产品原型。AntV 是蚂蚁集团全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战,AntV 经历多年积累与不断打磨,已支撑整个阿里集团内外 20000+ 业务系统,通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表,图分析,图编辑,地理空间可视化,智能可视化等各个可视化的领域耕耘,欢迎同路人一起前行。
AntV 是蚂蚁集团全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战,AntV 经历多年积累与不断打磨,已支撑整个阿里集团内外 20000+ 业务系统,通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表,图分析,图编辑,地理空间可视化,智能可视化等各个可视化的领域耕耘,欢迎同路人一起前行。
Ant Design (code)
Ant Design, a design language for background applications, is refined by Ant UED Team.
通用属性参考:通用属性
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
code | 添加代码样式 | boolean | false | |
copyable | 是否可拷贝,为对象时可进行各种自定义 | boolean | copyable | false | copyable |
delete | 添加删除线样式 | boolean | false | |
disabled | 禁用文本 | boolean | false | |
editable | 是否可编辑,为对象时可对编辑进行控制 | boolean | editable | false | editable |
ellipsis | 自动溢出省略,为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph,Text 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手工配置宽度样式 | boolean | Omit<ellipsis, 'expandable' | 'rows' | 'onExpand'> | false | ellipsis |
keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
mark | 添加标记样式 | boolean | false | |
onClick | 点击 Text 时的回调 | (event) => void | - | |
strong | 是否加粗 | boolean | false | |
italic | 是否斜体 | boolean | false | 4.16.0 |
type | 文本类型 | secondary | success | warning | danger | - | success: 4.6.0 |
underline | 添加下划线样式 | boolean | false |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
code | 添加代码样式 | boolean | false | |
copyable | 是否可拷贝,为对象时可进行各种自定义 | boolean | copyable | false | copyable |
delete | 添加删除线样式 | boolean | false | |
disabled | 禁用文本 | boolean | false | |
editable | 是否可编辑,为对象时可对编辑进行控制 | boolean | editable | false | editable |
ellipsis | 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 | boolean | ellipsis | false | ellipsis |
level | 重要程度,相当于 h1 、h2 、h3 、h4 、h5 | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
mark | 添加标记样式 | boolean | false | |
onClick | 点击 Title 时的回调 | (event) => void | - | |
italic | 是否斜体 | boolean | false | 4.16.0 |
type | 文本类型 | secondary | success | warning | danger | - | success: 4.6.0 |
underline | 添加下划线样式 | boolean | false |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
code | 添加代码样式 | boolean | false | |
copyable | 是否可拷贝,为对象时可进行各种自定义 | boolean | copyable | false | copyable |
delete | 添加删除线样式 | boolean | false | |
disabled | 禁用文本 | boolean | false | |
editable | 是否可编辑,为对象时可对编辑进行控制 | boolean | editable | false | editable |
ellipsis | 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 | boolean | ellipsis | false | ellipsis |
mark | 添加标记样式 | boolean | false | |
onClick | 点击 Paragraph 时的回调 | (event) => void | - | |
strong | 是否加粗 | boolean | false | |
italic | 是否斜体 | boolean | false | 4.16.0 |
type | 文本类型 | secondary | success | warning | danger | - | success: 4.6.0 |
underline | 添加下划线样式 | boolean | false |
{text: string,onCopy: function(event),icon: ReactNode,tooltips: false | [ReactNode, ReactNode],format: 'text/plain' | 'text/html',}
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
format | 剪切板数据的 Mime Type | 'text/plain' | 'text/html' | - | 4.21.0 |
icon | 自定义拷贝图标:[默认图标, 拷贝后的图标] | [ReactNode, ReactNode] | - | 4.6.0 |
text | 拷贝到剪切板里的文本 | string | - | |
tooltips | 自定义提示文案,为 false 时隐藏文案 | [ReactNode, ReactNode] | [复制 , 复制成功 ] | 4.4.0 |
onCopy | 拷贝成功的回调函数 | function | - |
{icon: ReactNode,tooltip: boolean | ReactNode,editing: boolean,maxLength: number,autoSize: boolean | { minRows: number, maxRows: number },text: string,onChange: function(string),onCancel: function,onStart: function,onEnd: function,triggerType: ('icon' | 'text')[],enterIcon: ReactNode,}
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
autoSize | 自动 resize 文本域 | boolean | { minRows: number, maxRows: number } | - | 4.4.0 |
editing | 控制是否是编辑中状态 | boolean | false | |
icon | 自定义编辑图标 | ReactNode | <EditOutlined /> | 4.6.0 |
maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
tooltip | 自定义提示文本,为 false 时关闭 | boolean | ReactNode | 编辑 | 4.6.0 |
text | 显式地指定编辑文案,为空时将隐式地使用 children | string | - | 4.24.0 |
onChange | 文本域编辑时触发 | function(value: string) | - | |
onCancel | 按 ESC 退出编辑状态时触发 | function | - | |
onStart | 进入编辑中状态时触发 | function | - | |
onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 |
triggerType | 编辑模式触发器类型,图标、文本或者两者都设置(不设置图标作为触发器时它会隐藏) | Array<icon |text > | [icon ] | |
enterIcon | 在编辑段中自定义“enter”图标(传递“null”将删除图标) | ReactNode | <EnterOutlined /> | 4.17.0 |
{rows: number,expandable: boolean,suffix: string,symbol: ReactNode,tooltip: boolean | ReactNode | TooltipProps,onExpand: function(event),onEllipsis: function(ellipsis),}
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
expandable | 是否可展开 | boolean | - | |
rows | 最多显示的行数 | number | - | |
suffix | 自定义省略内容后缀 | string | - | |
symbol | 自定义展开描述文案 | ReactNode | 展开 | |
tooltip | 省略时,展示提示信息 | boolean | ReactNode | TooltipProps | - | 4.11.0 |
onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
onExpand | 点击展开时的回调 | function(event) | - |
Token 名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
titleMarginBottom | 标题下间距 | string | number | 0.5em |
titleMarginTop | 标题上间距 | string | number | 1.2em |