# 1 功能介绍
时间轴控件主要用于垂直展示时间流信息，按时间顺序逐步展示相应信息。
# 2 控件对象
`kd.bos.ext.form.control.Timeline`
# 3 视觉展示
* 左侧时间轴
* 右侧时间轴
# 4 属性说明
## 4.1 通用属性
>通用属性包含字段和控件的一些公有的属性，如宽高，帮助文本等等。请参考[通用属性](https://vip.kingdee.com/article/215559076720798976)
## 4.2 样式属性
>样式属性是每个控件在设计器右侧样式栏可以设置的属性，请参考[样式属性](https://vip.kingdee.com/article/252017936767406336)
## 4.3 业务属性
| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 时间轴位置 | 下拉 | 左侧 | 时间轴位置（left为左侧，right为右侧） |
| 布局风格 | 下拉 | 左右侧布局 | 配置时间轴的布局风格，分为左右侧布局和单侧布局，详见4.3.1 |
| 节点配置 | 弹框选择 | - | 用于配置时间轴各个时间节点的标题以及描述信息，详见4.3.2 |
### 4.3.1 布局风格
布局风格分为左右侧布局和单侧布局
* 左右布局
* 单侧布局
### 4.3.2 节点配置
每行代表时间轴的一个节点，如下图配置了上面四个图片中时间轴的第一个节点
# 5 时间轴接口介绍
* 控件方法
| 方法 | 参数 | 说明 |
| --- | --- | --- |
| setTimelineOptions | List<TimelineOption> | 设置整个时间轴的时间节点 |
| setTimelineClick | {click:true} | true:点击时间轴节点发送请求，默认false |
* 插件设置时间轴各个节点配置
```java
package kd.bos.plugin.sample.bill.form;
import kd.bos.dataentity.entity.LocaleString;
import kd.bos.form.control.TimeLineStyle;
import kd.bos.form.control.Timeline;
import kd.bos.form.control.TimelineContentOption;
import kd.bos.form.control.TimelineLabelOption;
import kd.bos.form.control.TimelineOption;
import kd.bos.form.control.TimelineOptionClickArg;
import kd.bos.form.control.TimelineOptionKey;
import kd.bos.form.control.TimelineText;
import kd.bos.form.control.events.TimelineEvent;
import kd.bos.form.control.events.TimelineListener;
import kd.bos.form.plugin.AbstractFormPlugin;
import java.util.ArrayList;
import java.util.EventObject;import java.util.List;
public class TimeLineFormPlugin extends AbstractFormPlugin {
@Override
public void registerListener(EventObject e) {
super.registerListener(e);
Timeline timeline = this.getView().getControl("timelineap");
timeline.addTimelineListener(new TimelineListener() {
@Override
public void update(TimelineEvent timelineEvent) {
//响应时间轴标签和内容区点击事件
}
@Override
public void optionClick(TimelineOptionClickArg e) {
getView().showMessage("调用方自定义操作点击通知：" +
"操作key：" + e.getOptionKey() + "，时间轴节点："
+e.getIndex());
}
});
}
@Override
public void afterCreateNewData(EventObject e) {
Timeline timeline = this.getView().getControl("timelineap");
// 时间轴选项配置
List<TimelineOption> timelineOptions = new ArrayList<>(4);
TimelineOption timelineOption = new TimelineOption();
List<TimelineOptionKey> optionKeys = new ArrayList<>();
optionKeys.add(new TimelineOptionKey(new LocaleString("操作一"), "option1"));
optionKeys.add(new TimelineOptionKey(new LocaleString("操作二"), "option2"))
