Ngx 时间线 
这个角化库的主要目标是让你有可能在你的应用中整合一个时长.
22.0.0版本与角22相容.
走开 这里 并发现时间线的所有可能配置
图1 - 预览 时间线示例配置页面
安装
运行以下命令以安装库
npm install @frxjs/ngx-timeline
用法实例
在安装库并在导入模块中包含 NgxTimelineModule 后, 您可以在模板中添加一个示例, 以显示您的时长
<ngx-timeline [events]="events"></ngx-timeline>
<ngx-timeline [events]="events" [langCode]="'it'"></ngx-timeline>
<ngx-timeline [events]="events" [langCode]="'it'" [enableAnimation]="false"></ngx-timeline>
配置
投入
| 输入名称 | 解释 | 强制性 | 类型/支持值 | 默认值 |
|---|---|---|---|---|
| 事件 | 要显示的事件列表 | 对 | Ngx 时间线事件 | 无默认 |
| langCode 代码 | 语言代码用于格式日期 | 没有 |
| '来' |
| 启用动画 | 用于启用或禁用动画的布尔 | 没有 | 布尔 | 真实 |
| 倒转顺序 | Boolean 用于倒转排序顺序( 默认先旧) | 没有 | 布尔 | 虚假 |
| 虚拟滚动 | 用于启用或禁用虚拟滚动的布尔 | 没有 | 布尔 | 虚假 |
| 虚拟滚动项目大小 | 用于虚拟滚动的单个项目的像素数 | 没有 | 编号 | 100个 |
| 虚拟滚动Max BufferPx | 虚拟卷轴缓冲器的最大像素数 | 没有 | 编号 | 200个 |
| 虚拟滚动MinBufferPx | 视野外的缓冲最小量 | 没有 | 编号 | 100个 |
| 组事件 | 用于分组事件的逻辑 | 没有 | enum NgxTimeline 事件组 | NgxTimeline Event Group. MONTH YEAR (英语) |
| 方向 | 时间表的方向 | 没有 | enum Ngx 时间线方向 | Ngx 时间线 定向 |
| 更改 | 用于将事件放入 LEFT 或 Right 的逻辑 | 没有 | enum NgxTimeline EventChangeSide (英语: | NgxTimeline EventChangeSide.ON different DAY IN GROUP (英语) |
| 周期图解 | 自定义模板在一组事件之前显示 | 没有 | TemplateRef<unknown> | 无默认 |
| 事件自定义模板 | 自定义模板以显示单个事件 | 没有 | TemplateRef<unknown> | 无默认 |
| 集成图解 | 自定义模板显示分隔符图标 | 没有 | TemplateRef<unknown> | 无默认 |
| 即时客户端 | 自定义模板显示侧日期 | 没有 | TemplateRef<unknown> | 无默认 |
| 内端客户端 | 自定义模板显示内在事件 | 没有 | TemplateRef<unknown> | 无默认 |
| 事件描述 | 显示描述的自定义模板 | 没有 | TemplateRef<unknown> | 无默认 |
产出
| 输出名称 | 解释 | 强制性 | 类型/支持值 | 默认值 |
|---|---|---|---|---|
| 点击 Emiter | 输出点击事件发送器 | 没有 | OutputEmitterRef<NgxTimelineItem> | 无默认 |
类型和元素
interface NgxTimelineEvent {
timestamp: Date;
title?: string;
description?: string;
id?: any;
itemPosition?: NgxTimelineItemPosition;
}
enum NgxTimelineEventGroup {
YEAR = 'YEAR',
MONTH_YEAR = 'MONTH_YEAR',
DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'
}
export enum NgxTimelineOrientation {
HORIZONTAL = 'HORIZONTAL',
VERTICAL = 'VERTICAL',
}
enum NgxTimelineEventChangeSide {
ALL = 'ALL',
ALL_IN_GROUP = 'ALL_IN_GROUP',
ON_DIFFERENT_DAY_IN_GROUP = 'ON_DIFFERENT_DAY_IN_GROUP',
ON_DIFFERENT_HMS_IN_GROUP = 'ON_DIFFERENT_HMS_IN_GROUP',
ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'
}
自定义 支持的主题
这是习惯主题的一个例子,可以通过ng级指令适用于图书馆的容器。 这样您就可以重新定义一些在库内定义和使用的变量,并且更容易覆盖一些属性
.custom-theme {
--ngx-timeline-icon: black;
--ngx-timeline-period-inner-container: black;
--ngx-timeline-line-background: black;
}
带有自定义模板的示例
<ng-template #periodCustomTemplate let-period=period let-index=index let-event=event>
<div [ngClass]="{'transparent first-line': !index}" class="line"></div>
<div class="period-container">
<p>
{{index}} - {{period | json}}
</p>
</div>
<div class="line"></div>
</ng-template>
<ng-template #centerIconCustomTemplate let-index=index let-event=event>
<div class="icon-container">
<img src="assets/image.png">
</div>
</ng-template>
<ng-template #innerEventCustomTemplate let-event=event>
<div class="event" (click)="handleClick(event)">
{{event | json}}
</div>
</ng-template>
<ng-template #eventDescriptionCustomTemplate let-event=event>
<p class="event-info-description">{{event?.eventInfo?.description}}</p>
</ng-template>
<ng-template #eventCustomTemplate let-event=event let-colSidePosition=colSidePosition>
<div class="event" (click)="handleClick(event)">
{{event | json}}
</div>
</ng-template>
<ng-template #dateInstantCustomTemplate let-item=item>
<span>
{{item | json}}
</span>
</ng-template>
如何捐款
首先,为了追踪一切,打开一个描述问题的问题或一个缺失的功能,您想要添加到 lib 中.
为开始捐款:
npm run watch-lib(你正在用 -- watch 选项构建 lib)npm run start-dev(你正在连接 lib 并启动演示应用)
每次您修改您 lib 中的代码时, 任何更新都会触发应用程序的再装入. 当您的代码将准备好时, 创建一个 Pull 请求, 并将链接放在您之前打开的问题下的评论中 . 现在是享受和开始代码的时候了.
提前感谢您的捐款
如何部署新版本(仅供维护者使用)
在测试了100%测试覆盖率的固定或新特性后:
- npm 运行 lint: fix
- npm 运行准备 - github 页面
- npm 运行新版本补丁
- git 推动 -- -- tags
- git 推动
- npm 运行发布