From 9dd58b95892eb5f98d14a039e3bb55cf3c5c0742 Mon Sep 17 00:00:00 2001 From: Nine <948825551@qq.com> Date: Mon, 27 Dec 2021 08:18:54 +0000 Subject: [PATCH] =?UTF-8?q?!2257=20doc(#I44KDH):=20add=20english=20transla?= =?UTF-8?q?tion=20of=20timeline=20page=20*=20doc:=20=E6=B7=BB=E5=8A=A0=20T?= =?UTF-8?q?imeLines=20=E9=A1=B5=E9=9D=A2=E8=B5=84=E6=BA=90=E6=96=87?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Locales/en.json | 39 +++++++++++++ src/BootstrapBlazor.Shared/Locales/zh.json | 41 ++++++++++++- .../Samples/Timelines.razor | 25 ++++---- .../Samples/Timelines.razor.cs | 58 ++++++++++--------- 4 files changed, 122 insertions(+), 41 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json index 3a189166c..aa2b144fb 100644 --- a/src/BootstrapBlazor.Shared/Locales/en.json +++ b/src/BootstrapBlazor.Shared/Locales/en.json @@ -2291,6 +2291,45 @@ "ShowDismiss": "Close button", "OnDismiss": "Close label callback method" }, + "BootstrapBlazor.Shared.Samples.Timelines": { + "Title": "Timeline", + "SubTitle": "Visualize time flow information", + "BasicUsageTitle": "Basic usage", + "BasicUsageIntro": "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.", + "BasicUsageP": "sort:", + "CutomNodeStyleTitle": "Customize the node style", + "CutomNodeStyleIntro": "You can customize the node color according to the actual scene, or use the icon directly.", + "LeftTitle": "Shown on the left", + "LeftIntro": "Content takes turns appearing on the left side of the timeline", + "LeftP": "Control the content appearing on the left side of the timeline by setting the IsLeft property", + "AlternateTitle": "Alternate presentations", + "AlternateIntro": "内容在时间轴两侧轮流出现", + "AlternateP": "Control the alternating timeline left and right by setting the IsAlternate property", + "DispalyCustomComponentTitle": "Show custom components", + "DispalyCustomComponentIntro": "Custom components are displayed on the timeline", + "DispalyCustomComponentP": "Control the custom components that the timeline displays by setting the CustomerComponent of the TimelineItem ", + "SelectedItem1": "Positive order", + "SelectedItem2": "Reverse order", + "TimelineItemContent1": "Creation time", + "TimelineItemContent2": "Approved", + "TimelineItemContent3": "The event starts on schedule", + "TimelineItemContent4": "The default style of the node", + "TimelineItemContent5": "Support for custom colors", + "TimelineItemContent6": "Icons are supported", + "Description1": "Real-time output", + "Description2": "Counter", + "Description3": "Weather forecast information", + "Items": "A collection of data", + "IsReverse": "Whether to display in reverse order", + "IsLeft": "Whether the left side presents content", + "IsAlternate": "Whether to alternate the content", + "Color": "Node color", + "Content": "The body of the content", + "Icon": "Node icon", + "Description": "The node description text", + "Component": "Node custom components", + "AttributeTitle": "TimelineItem attributes" + }, "BootstrapBlazor.Shared.Components.DemoBlock": { "Title": "", "SubTitle": "Demo" diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json index a031c35eb..fdf0f5b93 100644 --- a/src/BootstrapBlazor.Shared/Locales/zh.json +++ b/src/BootstrapBlazor.Shared/Locales/zh.json @@ -2293,7 +2293,46 @@ "Icon": "图标", "ShowDismiss": "关闭按钮", "OnDismiss": "关闭标签回调方法" - } + }, + "BootstrapBlazor.Shared.Samples.Timelines": { + "Title": "Timeline 时间线", + "SubTitle": "可视化地呈现时间流信息", + "BasicUsageTitle": "基本用法", + "BasicUsageIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity,时间戳是其区分于其他控件的重要特征,使⽤时注意与 Steps 步骤条等区分。", + "BasicUsageP": "排序:", + "CutomNodeStyleTitle": "⾃定义节点样式", + "CutomNodeStyleIntro": "可根据实际场景⾃定义节点颜⾊,或直接使⽤图标。", + "LeftTitle": "左侧展现", + "LeftIntro": "内容在时间轴左侧轮流出现", + "LeftP": "通过设置 IsLeft 属性来控制内容出现在时间线左侧", + "AlternateTitle": "交替展现", + "AlternateIntro": "内容在时间轴两侧轮流出现", + "AlternateP": "通过设置 IsAlternate 属性来控制时间线左右交替展现", + "DispalyCustomComponentTitle": "展现自定义组件", + "DispalyCustomComponentIntro": "时间轴上展现自定义组件", + "DispalyCustomComponentP": "通过设置 TimelineItemCustomerComponent 来控制时间线展现的自定义组件", + "SelectedItem1": "正序", + "SelectedItem2": "倒序", + "TimelineItemContent1": "创建时间", + "TimelineItemContent2": "通过审核", + "TimelineItemContent3": "活动按期开始", + "TimelineItemContent4": "默认样式的节点", + "TimelineItemContent5": "支持自定义颜色", + "TimelineItemContent6": "支持使用图标", + "Description1": "实时输出", + "Description2": "计数器", + "Description3": "天气预报信息", + "Items": "数据集合", + "IsReverse": "是否倒序显示", + "IsLeft": "是否左侧展现内容", + "IsAlternate": "是否交替展现内容", + "Color": "节点颜色", + "Content": "内容正文", + "Icon": "节点图标", + "Description": "节点描述文字", + "Component": "节点自定义组件", + "AttributeTitle": "TimelineItem 属性" + }, "BootstrapBlazor.Shared.Components.DemoBlock": { "Title": "未设置", "SubTitle": "示例" diff --git a/src/BootstrapBlazor.Shared/Samples/Timelines.razor b/src/BootstrapBlazor.Shared/Samples/Timelines.razor index 543205db8..f4a6cac7b 100644 --- a/src/BootstrapBlazor.Shared/Samples/Timelines.razor +++ b/src/BootstrapBlazor.Shared/Samples/Timelines.razor @@ -1,36 +1,37 @@ @page "/timelines" +@inject IStringLocalizer Localizer -

Timeline 时间线

+

@Localizer["Title"]

-

可视化地呈现时间流信息

+

@Localizer["SubTitle"]

- +
- +
- + - -

通过设置 IsLeft 属性来控制内容出现在时间线左侧

+ +

@((MarkupString)Localizer["LeftP"].Value)

- -

通过设置 IsAlternate 属性来控制时间线左右交替展现

+ +

@((MarkupString)Localizer["AlternateP"].Value)

- -

通过设置 TimelineItemCustomerComponent 来控制时间线展现的自定义组件

+ +

@((MarkupString)Localizer["DispalyCustomComponentP"].Value)

- + diff --git a/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs b/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs index 6c41a6195..5e53954c5 100644 --- a/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs +++ b/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs @@ -64,6 +64,12 @@ namespace BootstrapBlazor.Shared.Samples } while (!_cancelTokenSource.IsCancellationRequested); }); + + Items = new SelectedItem[] + { + new SelectedItem("1",Localizer["SelectedItem1"]){ Active=true }, + new SelectedItem("2",Localizer["SelectedItem2"]) + }; } /// @@ -74,7 +80,7 @@ namespace BootstrapBlazor.Shared.Samples public Task OnStateChanged(IEnumerable values, SelectedItem value) { - IsReverse = value.Text == "倒序"; + IsReverse = value.Text == Localizer["SelectedItem2"]; StateHasChanged(); return Task.CompletedTask; } @@ -82,28 +88,24 @@ namespace BootstrapBlazor.Shared.Samples /// /// /// - private IEnumerable Items { get; set; } = new SelectedItem[] - { - new SelectedItem("1","正序"){ Active=true }, - new SelectedItem("2","倒序") - }; + private IEnumerable Items { get; set; } /// /// /// - private readonly IEnumerable TimelineItems = new TimelineItem[] + private IEnumerable TimelineItems => new TimelineItem[] { new TimelineItem { - Content = "创建时间", + Content = Localizer["TimelineItemContent1"], Description = DateTime.Now.ToString("yyyy-MM-dd") }, new TimelineItem{ - Content = "通过审核", + Content = Localizer["TimelineItemContent2"], Description = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd") }, new TimelineItem { - Content = "活动按期开始", + Content = Localizer["TimelineItemContent3"], Description = DateTime.Now.AddDays(2).ToString("yyyy-MM-dd") } }; @@ -111,24 +113,24 @@ namespace BootstrapBlazor.Shared.Samples /// /// /// - private readonly IEnumerable CustomerTimelineItems = new TimelineItem[] + private IEnumerable CustomerTimelineItems => new TimelineItem[] { new TimelineItem { - Content = "默认样式的节点", + Content = Localizer["TimelineItemContent4"], Description = DateTime.Now.ToString("yyyy-MM-dd") }, new TimelineItem { Color = Color.Success, - Content = "支持自定义颜色", + Content = Localizer["TimelineItemContent5"], Description = DateTime.Now.AddDays(2).ToString("yyyy-MM-dd") }, new TimelineItem { Color = Color.Danger, Icon = "fa fa-fw fa-fa", - Content = "支持使用图标", + Content = Localizer["TimelineItemContent6"], Description = DateTime.Now.AddDays(3).ToString("yyyy-MM-dd") } }; @@ -145,19 +147,19 @@ namespace BootstrapBlazor.Shared.Samples { [nameof(BootstrapBlazor.Components.Console.Items)] = Messages }), - Description = "实时输出" + Description = Localizer["Description1"] }, new TimelineItem { Color = Color.Info, Component = BootstrapDynamicComponent.CreateComponent(), - Description = "计数器" + Description = Localizer["Description2"] }, new TimelineItem { Color = Color.Warning, Component = BootstrapDynamicComponent.CreateComponent(), - Description = "天气预报信息" + Description = Localizer["Description3"] } }; @@ -196,33 +198,33 @@ namespace BootstrapBlazor.Shared.Samples /// 获得属性方法 /// /// - private static IEnumerable GetAttributes() => new AttributeItem[] + private IEnumerable GetAttributes() => new AttributeItem[] { // TODO: 移动到数据库中 new AttributeItem() { Name = "Items", - Description = "数据集合", + Description = Localizer["Items"], Type = "IEnumerable", ValueList = "—", DefaultValue = " — " }, new AttributeItem() { Name = "IsReverse", - Description = "是否倒序显示", + Description = Localizer["IsReverse"], Type = "boolean", ValueList = "true|false", DefaultValue = "false" }, new AttributeItem() { Name = "IsLeft", - Description = "是否左侧展现内容", + Description = Localizer["IsLeft"], Type = "boolean", ValueList = "true|false", DefaultValue = "false" }, new AttributeItem() { Name = "IsAlternate", - Description = "是否交替展现内容", + Description = Localizer["IsAlternate"], Type = "boolean", ValueList = "true|false", DefaultValue = "false" @@ -233,40 +235,40 @@ namespace BootstrapBlazor.Shared.Samples /// 获得属性方法 /// /// - private static IEnumerable GetTimelineItemAttributes() => new AttributeItem[] + private IEnumerable GetTimelineItemAttributes() => new AttributeItem[] { // TODO: 移动到数据库中 new AttributeItem() { Name = nameof(TimelineItem.Color), - Description = "节点颜色", + Description = Localizer["Color"], Type = "Color", ValueList = " — ", DefaultValue = " — " }, new AttributeItem() { Name = nameof(TimelineItem.Content), - Description = "内容正文", + Description = Localizer["Content"], Type = "string", ValueList = " — ", DefaultValue = " — " }, new AttributeItem() { Name = nameof(TimelineItem.Icon), - Description = "节点图标", + Description = Localizer["Icon"], Type = "string", ValueList = " — ", DefaultValue = " — " }, new AttributeItem() { Name = nameof(TimelineItem.Description), - Description = "节点描述文字", + Description = Localizer["Description"], Type = "string", ValueList = " — ", DefaultValue = " — " }, new AttributeItem() { Name = nameof(TimelineItem.Component), - Description = "节点自定义组件", + Description = Localizer["Component"], Type = nameof(BootstrapDynamicComponent), ValueList = " — ", DefaultValue = " — "