From 82445ef9c5b766221a3ce6718906c6cc9e9df32d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=94=E6=9C=88=E7=9A=84=E5=A4=8F=E5=A4=A9?= <285258675@qq.com> Date: Mon, 25 Jul 2022 19:15:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(timeline):=20=E5=AE=8C=E6=88=90timelin?= =?UTF-8?q?e=E7=BB=84=E4=BB=B6=E5=8F=8Ademo=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/web/api/timeline.md | 54 +++++++ style/web/components/timeline/_index.less | 184 ++++++++++++++++++++++ style/web/components/timeline/_var.less | 9 ++ 3 files changed, 247 insertions(+) create mode 100644 docs/web/api/timeline.md create mode 100644 style/web/components/timeline/_index.less create mode 100644 style/web/components/timeline/_var.less diff --git a/docs/web/api/timeline.md b/docs/web/api/timeline.md new file mode 100644 index 0000000000..741d3a1fe8 --- /dev/null +++ b/docs/web/api/timeline.md @@ -0,0 +1,54 @@ +--- +title: Timeline 时间轴 +description: 可视化地呈现时间流信息。 +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### 基础用法 + +按照时间顺序或倒序规则的展示信息内容。 + +{{ base }} + +### 控制排序的时间轴 + +可以设置正序或倒序时间的时间轴。 + +{{ reverse }} + +### 自定义节点的时间轴 + +可以根据业务或用户需要自定义节点样式。 + +{{ dot }} + +### 不同轴线的时间轴 + +提供直线、虚线两种时间轴样式。 + +{{ dashed }} + +### 自定义内容的时间轴 + +可以根据需要更改显示信息的标题、描述内容、样式等内容。 + +{{ custom }} + +### 不同内容的对齐方式 + +以轴线和结点为坐标，其他全部内容信息在其位置上的不同对齐方式。 + +{{ mode }} + +### 动态加载的时间轴 + +当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点 + +{{ pending }} + +### 不同状态的时间轴 + +可以设置圆圈为实心、禁用状态 +{{ status }} diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less new file mode 100644 index 0000000000..631c02af24 --- /dev/null +++ b/style/web/components/timeline/_index.less @@ -0,0 +1,184 @@ +@import "../../base.less"; +@import "./_var.less"; +@import "../../mixins/_layout.less"; +@import "../../mixins/_reset.less"; + + +.@{prefix}-timeline { + display: flex; + flex-direction: column; + + &-horizontal { + flex-direction: row; + } +} + +.@{prefix}-timeline-item { + position: relative; + margin: 0; + padding: 0 0 40px; + + &-disabled { + color: @timeline-content-color; + opacity: @timeline-disabled-opacity; + cursor: not-allowed; + + .@{prefix}-timeline-item-dot { + border-color: #c5c5c5 !important; + color: #c5c5c5 !important; + } + } + + &-horizontal { + flex: 1; + } + + &:last-child { + .@{prefix}-timeline-item-tail { + display: none; + } + } + + &-alternate:nth-child(even) { + .@{prefix}-timeline-item-wrapper { + left: calc(50% - 4px); + width: calc(50% - 14px); + text-align: left; + } + + .@{prefix}-timeline-item-tail, + .@{prefix}-timeline-item-dot { + left: 50%; + } + + .@{prefix}-timeline-item-dot { + margin-left: -4px; + } + } + + &-alternate:nth-child(odd) { + .@{prefix}-timeline-item-wrapper { + width: calc(50% - 14px); + margin: 0; + text-align: right; + position: relative; + left: -30px; + } + + .@{prefix}-timeline-item-tail, + .@{prefix}-timeline-item-dot { + left: 50%; + } + + .@{prefix}-timeline-item-dot { + margin-left: -4px; + } + } + + &-right { + .@{prefix}-timeline-item-wrapper { + width: calc(100% - 50px); + margin: 0; + text-align: right; + } + + .@{prefix}-timeline-item-tail, + .@{prefix}-timeline-item-dot { + left: calc(100% - 6px); + } + + .@{prefix}-timeline-item-dot { + margin-left: -4px; + } + } + + &-tail { + position: absolute; + + &-vertical { + top: 24px; + left: 5px; + height: calc(100% - 30px); + border-left: 2px solid #0052D9; + + &-dashed { + border-left: 2px dashed #0052D9 !important; + } + } + + &-horizontal { + top: 6px; + left: 20px; + width: calc(100% - 30px); + border-top: 2px solid #0052D9; + + &-dashed { + border-top: 2px dashed #0052D9 !important; + } + } + } + + &-dot { + position: absolute; + top: 2px; + width: @timeline-dot-width; + height: @timeline-dot-width; + background-color: #fff; + border: 2px solid transparent; + border-radius: 100px; + + &-custom { + position: absolute; + top: 8px; + left: 6px; + width: auto; + height: auto; + margin-top: 0; + padding: 3px 1px; + line-height: 1; + text-align: center; + border: 0; + border-radius: 0; + transform: translate(-50%, -50%); + } + } + + &-wrapper { + &-vertical { + position: relative; + padding-left: 28px; + top: -3px; + } + + &-horizontal { + position: absolute; + left: 0; + bottom: -30px; + } + + &-right { + width: calc(50% - 12px); + margin: 0; + text-align: right; + } + } + + &-content { + color: @timeline-content-color; + font-size: @timeline-content-font-size; + } + + &-timestamp { + margin-top: @timeline-timestamp-margin-top; + color: @timeline-content-color; + opacity: @timeline-timestamp-opacity; + font-size: @timeline-timestamp-font-size; + } + + &-description { + margin-top: @timeline-timestamp-margin-top; + color: @timeline-content-color; + opacity: @timeline-timestamp-opacity; + font-size: @timeline-description-font-size; + } +} \ No newline at end of file diff --git a/style/web/components/timeline/_var.less b/style/web/components/timeline/_var.less new file mode 100644 index 0000000000..d14e1f64be --- /dev/null +++ b/style/web/components/timeline/_var.less @@ -0,0 +1,9 @@ +@timeline-dot-width: 8px; +@timeline-dot-height: 8px; +@timeline-content-color: #0000000; +@timeline-disabled-opacity: 0.4; +@timeline-content-font-size: 16px; +@timeline-timestamp-margin-top: 8px; +@timeline-timestamp-opacity: 0.6; +@timeline-timestamp-font-size: 14px; +@timeline-description-font-size: 12px; \ No newline at end of file From bdf8e8075ad57d400a679bdb2accfde53b3c54ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=94=E6=9C=88=E7=9A=84=E5=A4=8F=E5=A4=A9?= <285258675@qq.com> Date: Thu, 28 Jul 2022 15:10:58 +0800 Subject: [PATCH 2/2] =?UTF-8?q?style(timeline):=20style:=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E6=A0=B7=E5=BC=8Flint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit style: 修复样式lint --- style/web/components/timeline/_index.less | 19 ++++++++++--------- style/web/components/timeline/_var.less | 8 +++++--- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/style/web/components/timeline/_index.less b/style/web/components/timeline/_index.less index 631c02af24..6f1cb3a6a3 100644 --- a/style/web/components/timeline/_index.less +++ b/style/web/components/timeline/_index.less @@ -1,9 +1,10 @@ @import "../../base.less"; + @import "./_var.less"; -@import "../../mixins/_layout.less"; -@import "../../mixins/_reset.less"; +@import "../../mixins/_layout.less"; +@import "../../mixins/_reset.less"; .@{prefix}-timeline { display: flex; flex-direction: column; @@ -24,8 +25,8 @@ cursor: not-allowed; .@{prefix}-timeline-item-dot { - border-color: #c5c5c5 !important; - color: #c5c5c5 !important; + border-color: @timeline-disable-dot-color !important; + color: @timeline-disable-dot-color !important; } } @@ -99,10 +100,10 @@ top: 24px; left: 5px; height: calc(100% - 30px); - border-left: 2px solid #0052D9; + border-left: 2px solid @timeline-border-color; &-dashed { - border-left: 2px dashed #0052D9 !important; + border-left: 2px dashed @timeline-border-color !important; } } @@ -110,10 +111,10 @@ top: 6px; left: 20px; width: calc(100% - 30px); - border-top: 2px solid #0052D9; + border-top: 2px solid @timeline-border-color; &-dashed { - border-top: 2px dashed #0052D9 !important; + border-top: 2px dashed @timeline-border-color !important; } } } @@ -181,4 +182,4 @@ opacity: @timeline-timestamp-opacity; font-size: @timeline-description-font-size; } -} \ No newline at end of file +} diff --git a/style/web/components/timeline/_var.less b/style/web/components/timeline/_var.less index d14e1f64be..7bdcdfa204 100644 --- a/style/web/components/timeline/_var.less +++ b/style/web/components/timeline/_var.less @@ -1,9 +1,11 @@ @timeline-dot-width: 8px; @timeline-dot-height: 8px; @timeline-content-color: #0000000; -@timeline-disabled-opacity: 0.4; +@timeline-disable-dot-color: #c5c5c5; +@timeline-border-color: #0052d9; +@timeline-disabled-opacity: .4; @timeline-content-font-size: 16px; @timeline-timestamp-margin-top: 8px; -@timeline-timestamp-opacity: 0.6; +@timeline-timestamp-opacity: .6; @timeline-timestamp-font-size: 14px; -@timeline-description-font-size: 12px; \ No newline at end of file +@timeline-description-font-size: 12px;