- @((MarkupString)Localizer["TimelinesAlternateDescription"].Value)
+
+ @((MarkupString)Localizer["TimelinesAlternateDescription"].Value)
-
- @((MarkupString)Localizer["TimelinesDisplayCustomComponentDescription"].Value)
+
+ @((MarkupString)Localizer["TimelinesDisplayCustomComponentDescription"].Value)
diff --git a/src/BootstrapBlazor.Server/Locales/en.json b/src/BootstrapBlazor.Server/Locales/en.json
index 84ac5793ca4..b865e6f91b6 100644
--- a/src/BootstrapBlazor.Server/Locales/en.json
+++ b/src/BootstrapBlazor.Server/Locales/en.json
@@ -3953,7 +3953,7 @@
"TimelinesTitle": "Timeline",
"TimelinesSubTitle": "Visualize time flow information",
"TimelinesNormalTitle": "Basic usage",
- "TimelinesNormalIntro": "Timeline can be split into multiple activities arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from steps bar.",
+ "TimelinesNormalIntro": "Timeline can be split into multiple activities arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from Step component.",
"TimelinesNormalDescription": "sort:",
"TimelinesCustomNodeStyleTitle": "Customize the node style",
"TimelinesCustomNodeStyleIntro": "You can customize the node color according to the actual scene, or use the icon directly.",
diff --git a/src/BootstrapBlazor.Server/Locales/zh.json b/src/BootstrapBlazor.Server/Locales/zh.json
index 9ca1d8b97e0..b877996b1d1 100644
--- a/src/BootstrapBlazor.Server/Locales/zh.json
+++ b/src/BootstrapBlazor.Server/Locales/zh.json
@@ -3953,7 +3953,7 @@
"TimelinesTitle": "Timeline 时间线",
"TimelinesSubTitle": "可视化地呈现时间流信息",
"TimelinesNormalTitle": "基础用法",
- "TimelinesNormalIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。",
+ "TimelinesNormalIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。",
"TimelinesNormalDescription": "排序：",
"TimelinesCustomNodeStyleTitle": "⾃定义节点样式",
"TimelinesCustomNodeStyleIntro": "可根据实际场景⾃定义节点颜⾊，或直接使⽤图标。",
diff --git a/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss b/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss
index ee236317dc6..fa1c834aac2 100644
--- a/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss
+++ b/src/BootstrapBlazor/Components/Timeline/Timeline.razor.scss
@@ -1,95 +1,94 @@
-.timeline {
+.timeline {
+ --bb-timeline-item-padding: #{$bb-timeline-item-padding};
+ --bb-timeline-line-width: #{$bb-timeline-line-width};
+ --bb-timeline-node-bg: #{$bb-timeline-node-bg};
+ --bb-timeline-timestamp-color: #{$bb-timeline-timestamp-color};
margin: 0;
padding: 0;
list-style: none;
}
- .timeline .time-line-item {
- position: relative;
- padding-bottom: 1rem;
- }
-
- .timeline .time-line-item:last-child {
- padding-bottom: 0;
- }
-
- .timeline .time-line-item .time-line-item-tail {
- position: absolute;
- left: 4px;
- height: 100%;
- border-left: 2px solid #e4e7ed;
- }
-
- .timeline .time-line-item:last-child .time-line-item-tail {
- display: none
- }
-
- .timeline .timeline-item-node-normal {
- left: -1px;
- width: 12px;
- height: 12px;
- }
-
- .timeline .timeline-item-node {
- position: absolute;
- background-color: #e4e7ed;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .timeline .timeline-item-node.is-icon {
- background-color: transparent;
- }
-
- .timeline .timeline-item-wrapper {
- position: relative;
- padding-left: 1.5rem;
- top: -4px;
- }
-
- .timeline .timeline-item-content {
- color: #303133;
- }
-
- .timeline .timeline-item-timestamp {
- margin-top: 0.5rem;
- color: #909399;
- }
-
- .timeline.is-alternate .time-line-item-tail,
- .timeline.is-alternate .timeline-item-node {
- left: 50%;
- }
-
- .timeline.is-alternate .timeline-item-node {
- margin-left: -5px;
- }
-
- .timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper {
- left: calc(50% - 5px);
- width: calc(50% - 1rem);
- text-align: left;
- }
-
- .timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper {
- width: calc(50% - 1rem);
- margin: 0;
- text-align: right;
- }
-
- .timeline.is-left .time-line-item-tail,
- .timeline.is-left .timeline-item-node {
- left: 100%;
- }
-
- .timeline.is-left .timeline-item-node {
- margin-left: -5px;
- }
-
- .timeline.is-left .time-line-item .timeline-item-wrapper {
- width: calc(100% - 1rem);
- margin: 0;
- text-align: right;
- }
+.timeline .time-line-item {
+ position: relative;
+}
+
+.timeline .time-line-item:not(:last-child) {
+ padding: var(--bb-timeline-item-padding);
+}
+
+.timeline .time-line-item .time-line-item-tail {
+ position: absolute;
+ left: 4px;
+ height: 100%;
+ border-left: var(--bb-timeline-line-width) solid var(--bs-border-color);
+}
+
+.timeline .time-line-item:last-child .time-line-item-tail {
+ display: none
+}
+
+.timeline .timeline-item-node-normal {
+ left: -1px;
+ width: 12px;
+ height: 12px;
+}
+
+.timeline .timeline-item-node {
+ position: absolute;
+ background-color: var(--bb-timeline-node-bg);
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.timeline .timeline-item-node.is-icon {
+ background-color: transparent;
+}
+
+.timeline .timeline-item-wrapper {
+ position: relative;
+ padding-left: 1.5rem;
+ top: -4px;
+}
+
+.timeline .timeline-item-timestamp {
+ margin-top: 0.5rem;
+ color: var(--bb-timeline-timestamp-color);
+}
+
+.timeline.is-alternate .time-line-item-tail,
+.timeline.is-alternate .timeline-item-node {
+ left: 50%;
+}
+
+.timeline.is-alternate .timeline-item-node {
+ margin-left: -5px;
+}
+
+.timeline.is-alternate .time-line-item:nth-child(odd) .timeline-item-wrapper {
+ left: calc(50% - 5px);
+ width: calc(50% - 1rem);
+ text-align: left;
+}
+
+.timeline.is-alternate .time-line-item:nth-child(even) .timeline-item-wrapper {
+ width: calc(50% - 1rem);
+ margin: 0;
+ text-align: right;
+}
+
+.timeline.is-left .time-line-item-tail,
+.timeline.is-left .timeline-item-node {
+ left: 100%;
+}
+
+.timeline.is-left .timeline-item-node {
+ margin-left: -5px;
+}
+
+.timeline.is-left .time-line-item .timeline-item-wrapper {
+ width: calc(100% - 1rem);
+ margin: 0;
+ text-align: right;
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
index ccce15baf76..4195c52329a 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -569,4 +569,10 @@ $bb-tag-line-height: 30px;
$bb-tag-font-size: 12px;
$bb-tag-align: center;
+// Timeline
+$bb-timeline-item-padding: 0 0 1rem 0;
+$bb-timeline-line-width: 2px;
+$bb-timeline-node-bg: #e4e7ed;
+$bb-timeline-timestamp-color: #c0c4cc;
+
@import "../components.scss";