NG-ALAIN- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf qr 二维码 lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
代码演示
Show Tooltip
通过设置 length 属性指定文本最长长度，如果超过这个长度会自动截取。
import { Component } from '@angular/core';
import { EllipsisComponent } from '@delon/abc/ellipsis';
@Component({
selector: 'components-ellipsis-number',
template: `
<ellipsis length="100">{{ article }}</ellipsis>
<h4 class="mt-lg">Show Tooltip</h4>
<ellipsis length="100" tooltip>{{ article }}</ellipsis>
`,
standalone: true,
imports: [EllipsisComponent]
})
export class ComponentsEllipsisNumberComponent {
article =
'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
}There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
通过设置 lines 属性指定最大行数，如果超过这个行数的文本会自动截取。但是在这种模式下所有 ng-content 将会被转换成纯文本。
并且注意在这种模式下，外容器需要有指定的宽度（或设置自身宽度）。
import { Component } from '@angular/core';
import { EllipsisComponent } from '@delon/abc/ellipsis';
@Component({
selector: 'components-ellipsis-line',
template: `
<ellipsis lines="3" tooltip style="width: 200px">
<p>
There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident in September,
according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a
voluntary recall.
</p>
</ellipsis>
`,
standalone: true,
imports: [EllipsisComponent]
})
export class ComponentsEllipsisLineComponent {}