cnd-components-mcp

--- group: title: 云原生业务组件 --- # Truncate 截断组件 ## 代码库地址 https://code.alibaba-inc.com/cn-lowcode/cnd-truncate ## 使用场景： #### 一般用于文本过长需要截断的场景 ## ！！！使用注意： > <h3>首部、中间截断：<br />type 仅支持 'width' <br />children仅支持字符串 | 行内元素<br />不支持omission自定义</h3><br /><h3>中间截断可能会出现...间隔过大问题，与字体大小、字符、截断宽度等有关，目前无法有效兼容。<br />方案：可适当调整截断宽度来解决</h3><br /><h3>末尾截断 threshold="auto" 时需要添加样式 width = 100% , 参考自适应</h3> ## 基本使用 ```tsx preview import React from "react"; import { Truncate } from "@ali/cnd"; const Demo = () => { const Display = ( <span> ack-agility-registry.cn-shanghai.cr.aliyuncs.com/ecp_builder/metrics-adapter:v0.1.2-3e8244e-001 </span> ); return ( <div style={{ width: 460 }}> <h2>首部截断</h2> <Truncate position="start" threshold="auto" type="width"> {Display} </Truncate> <br /> <h2>中间截断</h2> <Truncate position="middle" threshold="auto" type="width"> {Display} </Truncate> <br /> <h2>末尾截断</h2> <Truncate threshold="auto" type="width" style={{ width: "100%" }}> {Display} </Truncate> </div> ); }; export default Demo; ``` ## 自适应 > 拉动模拟框，根据容器的宽度自动截断； ```tsx preview import React from "react"; import { Truncate } from "@ali/cnd"; import { FakeBrowserWithWrapper as FakeBrowser } from "@alicloud/console-components-fake-browser"; const Demo = () => { const Display = ( <span> ack-agility-registry.cn-shanghai.cr.aliyuncs.com/ecp_builder/metrics-adapter:v0.1.2-3e8244e-001 </span> ); return ( <> <FakeBrowser> <h2>首部截断</h2> <Truncate position="start" threshold="auto" type="width"> {Display} </Truncate> <h2>中间截断</h2> <Truncate position="middle" threshold="auto" type="width"> {Display} </Truncate> <h2>末尾截断</h2> <Truncate type="width" threshold="auto" style={{ width: "100%" }}> {Display} </Truncate> </FakeBrowser> </> ); }; export default Demo; ``` ## 监控 Child > 每当 children 变化的时候，Truncate 会自动检查是否需要截断： ```tsx preview import React, { useState } from "react"; import { Input, Truncate } from "@ali/cnd"; const Demo = () => { const [text, setText] = useState( "If life deceives you, Don't be sad, don't be impatient! In blue days, calm is needed: Believe it, happy days will come" ); return ( <div> <h3>请输入text: </h3> <div> <Input value={text} onChange={(str) => setText(str)} /> </div> <br /> <br /> <p>首部: </p> <Truncate type="width" threshold={368} position="start" align="t"> {text} </Truncate> <br /> <p>中间: </p> <Truncate type="width" threshold={368} position="middle" align="t"> {text} </Truncate> <br /> <p>尾部: </p> <Truncate type="width" threshold={368} align="t"> {text} </Truncate> </div> ); }; export default Demo; ``` ## tooltipMaxWidth ```tsx preview import React from "react"; import { Truncate } from "@ali/cnd"; const Demo = () => { const Display = ( <span> 一曲新词酒一杯，去年天气旧亭台。夕阳西下几时回？无可奈何花落去，似曾相识燕归来。小园香径独徘徊。 </span> ); return ( <div> <h2>首部截断</h2> <Truncate position="start" threshold={460} type="width" tooltipMaxWidth={1000} > {Display} </Truncate> <br /> <h2>中间截断</h2> <Truncate position="middle" threshold={460} type="width" tooltipMaxWidth={200} > {Display} </Truncate> <br /> <h2>末尾截断</h2> <Truncate threshold={460} type="width" align="t" tooltipMaxWidth={300}> {Display} </Truncate> </div> ); }; export default Demo; ``` ## 多行截断 ```tsx preview import React from "react"; import { MultiLines } from "@ali/cnd"; const Demo = () => { const longText = "毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。".repeat( 10 ); return ( <div style={{ width: 460 }}> <MultiLines lines={2}>{longText}</MultiLines> </div> ); }; export default Demo; ``` ## APIS ### 单行截断 > <h2>注意：</h2><h3>首部、中间截断支持属性：<br />type 仅支持 'width' <br />children仅支持字符串 | 行内元素，其他无法截断<br />不支持omission自定义</h3> | 属性 | 说明 | 类型 | 默认值 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | -------- | | children | 需要被截断的内容<br /> 如果想要通过字符长度来截断，则 children 必须为 string；<br />如果想要通过宽度来截断，则 children 可以为任意可渲染元素； | string \| React.ReactNode | - | | position | 截断位置<br />start、middle 截断只支持 type=width | 'start' \| 'middle' \| 'end' | 'end' | | type | 如何判断是否需要截断：<br /> 'length': 内容字符串长度是否大于 threshold 'width': 内容渲染后的宽度是否大于 threshold | 'length' \| 'width' | 'length' | | threshold | 截断临界值：<br /> type 为 'length' 时，threshold 限制字符串长度，必须传入 number 类型。<br /> type 为 'width' 时，threshold 限制内容渲染后的宽度，可以传入 number 或'auto'。<br />其中'auto'表示截断宽度自动设置为容器元素的宽度。尤其适用于 flex 布局下，截断宽度由剩余宽度决定的场景。 | number \| 'auto' | 30 | | showTooltip | 在被截断时，是否使用气泡展示完整内容 | boolean | true | | align | 气泡对齐方式，可选值参见 Balloon（Tooltip）组件文档 | AlignType | 'r'(右) | | omission | 省略符号 | React.ReactNode | ... | | tooltipMaxWidth | tooltip 的最大宽度限制，showTooltip 为 true 时才有效 | number | | | className | 容器的类名 | string | | | style | 容器的样式 | React.CSSProperties | | | popupStyle | 当 tooltip 展示时，设置弹层组件 style，透传给 Popup | React.CSSProperties | | | popupClassName | 当 tooltip 展示时，设置弹层组件的 className，透传给 Popup | string | | | patchPopupProps | 完全控制 tooltip 的 props。比如指定 popupContainer。<br />BalloonProps 的类型见 Balloon 组件文档。 | (originalProps: BalloonProps) => BalloonProps | | ### 多行截断 | 属性 | 说明 | 类型 | 默认值 | | --------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------- | | lines | 展示的行数 | number | | | ellipsis | 如何渲染省略号 | string \| React.ReactNode | | | showTooltip | 在被截断时，是否使用气泡展示完整内容 | boolean | true | | patchPopupProps | 完全控制 tooltip 的 props。比如指定 popupContainer。<br />BalloonProps 的类型见 Balloon 组件文档。 | (originalProps: BalloonProps) => BalloonProps | | | popupClassName | 当 tooltip 展示时，设置弹层组件的 className，透传给 Popup | string | | | popupStyle | 当 tooltip 展示时，设置弹层组件 style，透传给 Popup | React.CSSProperties | | | tooltipMaxWidth | tooltip 的最大宽度限制，showTooltip 为 true 时才有效 | number | | | align | 气泡对齐方式，可选值参见 Balloon（Tooltip）组件文档 | AlignType | 'b'(下) |