From be6fb69921755af131694aa905ca2d8ed8627d35 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 16:48:33 +0800 Subject: [PATCH 01/10] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=20Carousel?= =?UTF-8?q?Image=20=E4=B8=BA=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6=E6=8F=90?= =?UTF-8?q?=E9=AB=98=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...CarouselImage.razor.cs => CarouselImage.cs} | 18 +++++++++++++++++- .../Components/Carousel/CarouselImage.razor | 3 --- 2 files changed, 17 insertions(+), 4 deletions(-) rename src/BootstrapBlazor/Components/Carousel/{CarouselImage.razor.cs => CarouselImage.cs} (58%) delete mode 100644 src/BootstrapBlazor/Components/Carousel/CarouselImage.razor diff --git a/src/BootstrapBlazor/Components/Carousel/CarouselImage.razor.cs b/src/BootstrapBlazor/Components/Carousel/CarouselImage.cs similarity index 58% rename from src/BootstrapBlazor/Components/Carousel/CarouselImage.razor.cs rename to src/BootstrapBlazor/Components/Carousel/CarouselImage.cs index 22a693f2e..b590d697f 100644 --- a/src/BootstrapBlazor/Components/Carousel/CarouselImage.razor.cs +++ b/src/BootstrapBlazor/Components/Carousel/CarouselImage.cs @@ -2,12 +2,14 @@ // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. // Website: https://www.blazor.zone or https://argozhang.github.io/ +using Microsoft.AspNetCore.Components.Rendering; + namespace BootstrapBlazor.Components; /// /// /// -public partial class CarouselImage : ComponentBase +internal class CarouselImage : ComponentBase { /// /// @@ -28,4 +30,18 @@ public partial class CarouselImage : ComponentBase await OnClick(ImageUrl ?? ""); } } + + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + builder.OpenElement(0, "img"); + if (!string.IsNullOrEmpty(ImageUrl)) + { + builder.AddAttribute(1, "src", ImageUrl); + } + if (OnClick != null) + { + builder.AddAttribute(2, "onclick", OnClickImage); + } + builder.CloseElement(); + } } diff --git a/src/BootstrapBlazor/Components/Carousel/CarouselImage.razor b/src/BootstrapBlazor/Components/Carousel/CarouselImage.razor deleted file mode 100644 index 31da73880..000000000 --- a/src/BootstrapBlazor/Components/Carousel/CarouselImage.razor +++ /dev/null @@ -1,3 +0,0 @@ -@namespace BootstrapBlazor.Components - - -- Gitee From 2da196c7f463e8aa78b7068291efcb09b8495f4d Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 16:49:08 +0800 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20ShowCaption?= =?UTF-8?q?=20=E5=8F=82=E6=95=B0=E7=94=A8=E4=BA=8E=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA=20Caption?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Carousel/Carousel.razor | 26 +++++++++------ .../Components/Carousel/Carousel.razor.cs | 30 +++++++++++++++++ .../Components/Carousel/CarouselItem.cs | 32 ++++++++++++++++++- 3 files changed, 78 insertions(+), 10 deletions(-) diff --git a/src/BootstrapBlazor/Components/Carousel/Carousel.razor b/src/BootstrapBlazor/Components/Carousel/Carousel.razor index c06e15591..e93827681 100644 --- a/src/BootstrapBlazor/Components/Carousel/Carousel.razor +++ b/src/BootstrapBlazor/Components/Carousel/Carousel.razor @@ -9,7 +9,7 @@ @if (ShowIndicators) {
    - @for (var index = 0; index < Images.Count(); index++) + @for (var index = 0; index < Items.Count; index++) {
  1. } @@ -20,16 +20,24 @@
}
- @for (var index = 0; index < Images.Count(); index++) - { -
- -
- } - @for (var index = 0; index < Items.Count(); index++) + @for (var index = 0; index < Items.Count; index++) { + var item = Items[index];
- @Items[index].ChildContent + @item.ChildContent + @if (item.ShowCaption) + { +
+ @if (item.CaptionTemplate != null) + { + @item.CaptionTemplate + } + else + { + @item.Caption + } +
+ }
}
diff --git a/src/BootstrapBlazor/Components/Carousel/Carousel.razor.cs b/src/BootstrapBlazor/Components/Carousel/Carousel.razor.cs index 7d11f8b35..edbee7de6 100644 --- a/src/BootstrapBlazor/Components/Carousel/Carousel.razor.cs +++ b/src/BootstrapBlazor/Components/Carousel/Carousel.razor.cs @@ -84,6 +84,36 @@ public partial class Carousel [Parameter] public bool ShowIndicators { get; set; } = true; + /// + /// OnParametersSet 方法 + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + if (Items.Count == 0) + { + foreach (var image in Images) + { + var item = new CarouselItem(); + item.SetParametersAsync(ParameterView.FromDictionary(new Dictionary() + { + [nameof(CarouselItem.ChildContent)] = new RenderFragment(builder => + { + builder.OpenComponent(0); + builder.AddAttribute(1, nameof(CarouselImage.ImageUrl), image); + if (OnClick != null) + { + builder.AddAttribute(2, nameof(CarouselImage.OnClick), OnClickImage); + } + builder.CloseComponent(); + }) + })); + Items.Add(item); + } + } + } + /// /// OnAfterRenderAsync 方法 /// diff --git a/src/BootstrapBlazor/Components/Carousel/CarouselItem.cs b/src/BootstrapBlazor/Components/Carousel/CarouselItem.cs index f500e4e73..f508cf9d8 100644 --- a/src/BootstrapBlazor/Components/Carousel/CarouselItem.cs +++ b/src/BootstrapBlazor/Components/Carousel/CarouselItem.cs @@ -10,11 +10,29 @@ namespace BootstrapBlazor.Components; public class CarouselItem : ComponentBase, IDisposable { /// - /// 获得/设置 子组件 + /// 获得/设置 子组件 默认 null /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// 获得/设置 Caption 文字 默认 null 可设置 自定义 + /// + [Parameter] + public string? Caption { get; set; } + + /// + /// 获得/设置 Caption 样式 默认 null + /// + [Parameter] + public string? CaptionClass { get; set; } + + /// + /// 获得/设置 Caption 模板 默认 null + /// + [Parameter] + public RenderFragment? CaptionTemplate { get; set; } + [CascadingParameter] private Carousel? Carousel { get; set; } @@ -26,6 +44,18 @@ public class CarouselItem : ComponentBase, IDisposable Carousel?.AddItem(this); } + /// + /// 获得 当前 Item Caption 样式字符串 + /// + public string? GetCaptionClassString => CssBuilder.Default("carousel-caption") + .AddClass(CaptionClass) + .Build(); + + /// + /// 获得 是否显示 Caption + /// + internal bool ShowCaption => CaptionTemplate != null || !string.IsNullOrEmpty(Caption); + /// /// Dispose 方法 /// -- Gitee From ff70580ea9ab3115dda71e680963b900814dd2b5 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 16:49:22 +0800 Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=B1?= =?UTF-8?q?=E8=B4=A5=E7=9A=84=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/CarouselTest.cs | 1 - 1 file changed, 1 deletion(-) diff --git a/test/UnitTest/Components/CarouselTest.cs b/test/UnitTest/Components/CarouselTest.cs index 8c03613ed..9791f1daa 100644 --- a/test/UnitTest/Components/CarouselTest.cs +++ b/test/UnitTest/Components/CarouselTest.cs @@ -47,7 +47,6 @@ public class CarouselTest : BootstrapBlazorTestBase { pb.Add(b => b.ShowControls, false); }); - Assert.DoesNotContain("carousel-indicators", cut.Markup); Assert.DoesNotContain("carousel-control-prev", cut.Markup); Assert.DoesNotContain("carousel-control-next", cut.Markup); } -- Gitee From 4964f3496f1de99806ddb7b50993fe9a3df02faa Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 17:01:12 +0800 Subject: [PATCH 04/10] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=20Caption=20?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/CarouselTest.cs | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/test/UnitTest/Components/CarouselTest.cs b/test/UnitTest/Components/CarouselTest.cs index 9791f1daa..9603dd8a0 100644 --- a/test/UnitTest/Components/CarouselTest.cs +++ b/test/UnitTest/Components/CarouselTest.cs @@ -61,6 +61,30 @@ public class CarouselTest : BootstrapBlazorTestBase Assert.DoesNotContain("carousel-indicators", cut.Markup); } + [Fact] + public void Caption_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(b => b.ChildContent, new RenderFragment(builder => + { + builder.OpenComponent(0); + builder.AddAttribute(1, nameof(CarouselItem.ChildContent), new RenderFragment(builder => builder.AddContent(0, "Test-1"))); + builder.AddAttribute(2, nameof(CarouselItem.Caption), "test-item1-caption"); + builder.AddAttribute(2, nameof(CarouselItem.CaptionClass), "test-item1-class-caption"); + builder.CloseComponent(); + + builder.OpenComponent(10); + builder.AddAttribute(11, nameof(CarouselItem.ChildContent), new RenderFragment(builder => builder.AddContent(0, "Test-2"))); + builder.AddAttribute(12, nameof(CarouselItem.CaptionTemplate), new RenderFragment(builder => builder.AddContent(0, "test-item2-caption-template"))); + builder.CloseComponent(); + })); + }); + cut.Contains("test-item1-caption"); + cut.Contains("test-item1-class-caption"); + cut.Contains("test-item2-caption-template"); + } + [Fact] public void OnClick_Ok() { @@ -119,4 +143,17 @@ public class CarouselTest : BootstrapBlazorTestBase Assert.Contains("Test-1", cut.Markup); Assert.DoesNotContain("Test-2", cut.Markup); } + + [Fact] + public void CarouselItem_Dispose() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(b => b.ChildContent, new RenderFragment(builder => + { + builder.AddContent(0, "Test-1"); + })); + }); + Assert.Equal("", cut.Markup); + } } -- Gitee From 0d7ef26fcb2de8d5030ac353c80dfa287fcd36d8 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 17:04:58 +0800 Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=86=97?= =?UTF-8?q?=E4=BD=99=E6=8C=87=E7=A4=BA=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Carousel/Carousel.razor | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/BootstrapBlazor/Components/Carousel/Carousel.razor b/src/BootstrapBlazor/Components/Carousel/Carousel.razor index e93827681..700417ecd 100644 --- a/src/BootstrapBlazor/Components/Carousel/Carousel.razor +++ b/src/BootstrapBlazor/Components/Carousel/Carousel.razor @@ -13,10 +13,6 @@ {
  • } - @for (var index = 0; index < Items.Count; index++) - { -
  • - } }
    -- Gitee From 40ee458c4a19ce5c552af95e343d5afc6208c1a9 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 17:05:07 +0800 Subject: [PATCH 06/10] =?UTF-8?q?test:=20=E7=B2=BE=E7=AE=80=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/CarouselTest.cs | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/test/UnitTest/Components/CarouselTest.cs b/test/UnitTest/Components/CarouselTest.cs index 9603dd8a0..e9fe561b7 100644 --- a/test/UnitTest/Components/CarouselTest.cs +++ b/test/UnitTest/Components/CarouselTest.cs @@ -147,13 +147,7 @@ public class CarouselTest : BootstrapBlazorTestBase [Fact] public void CarouselItem_Dispose() { - var cut = Context.RenderComponent(pb => - { - pb.Add(b => b.ChildContent, new RenderFragment(builder => - { - builder.AddContent(0, "Test-1"); - })); - }); + var cut = Context.RenderComponent(); Assert.Equal("", cut.Markup); } } -- Gitee From 8e4183bb961a305325704395d84f826d9afe6389 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 17:23:37 +0800 Subject: [PATCH 07/10] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E8=B5=84?= =?UTF-8?q?=E6=BA=90=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Locales/en.json | 7 +++++++ src/BootstrapBlazor.Shared/Locales/zh.json | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json index e2bbf0bb0..d6109925f 100644 --- a/src/BootstrapBlazor.Shared/Locales/en.json +++ b/src/BootstrapBlazor.Shared/Locales/en.json @@ -2203,6 +2203,13 @@ "ShowIndicatorsIntro": "Set ShowIndicators to true for show/hide the indicator of Carousel", "FadeTitle": "Fade in and out", "FadeIntro": "By setting the IsFade property, the picture switches with a fade-in and fade-out effect", + "CaptionTitle": "Caption", + "CaptionIntro": "Set CarouselItem parameter Caption for the content of caption", + "CaptionTemplateTitle": "Caption Template", + "CaptionTemplateIntro": "Set CarouselItem 的 CaptionTemplate custom the caption of item", + "CaptionClassTitle": "Caption Class", + "CaptionClassIntro": "Set CarouselItem 的 CaptionClass custome the class of caption", + "CaptionClassP1": "Set the CaptionClass to d-none d-md-block do not show the Caption in the small screen", "OnClickTitle": "Click on the image to call back the event", "OnClickIntro": "After you set the OnClick property by setting, click Image to trigger the OnClick callback delegate", "ChildContentTitle": "ChildContent", diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json index 0cd605236..73eb67b7c 100644 --- a/src/BootstrapBlazor.Shared/Locales/zh.json +++ b/src/BootstrapBlazor.Shared/Locales/zh.json @@ -2208,6 +2208,13 @@ "ShowIndicatorsIntro": "通过设置 ShowIndicators 属性，设置是否显示指示标识 默认是 true", "FadeTitle": "淡入淡出", "FadeIntro": "通过设置 IsFade 属性，图片切换时采用淡入淡出效果", + "CaptionTitle": "标题", + "CaptionIntro": "通过设置 CarouselItem 的 Caption 属性，开启标题功能", + "CaptionTemplateTitle": "标题模板", + "CaptionTemplateIntro": "通过设置 CarouselItem 的 CaptionTemplate 属性，自定义标题内容", + "CaptionClassTitle": "标题样式", + "CaptionClassIntro": "通过设置 CarouselItem 的 CaptionClass 属性，自定义标题部分样式", + "CaptionClassP1": "本例设置 d-none d-md-block 使小屏幕下不显示 Caption", "OnClickTitle": "点击图片回调事件", "OnClickIntro": "通过设置 OnClick 属性后，点击 Image 后触发 OnClick 回调委托", "ChildContentTitle": "子组件", -- Gitee From 2e3a69b969b16917ff157331a59faca8239deac9 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 17:23:48 +0800 Subject: [PATCH 08/10] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20Caption=20?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Samples/Carousels.razor | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/src/BootstrapBlazor.Shared/Samples/Carousels.razor b/src/BootstrapBlazor.Shared/Samples/Carousels.razor index ab022f9be..a9f565338 100644 --- a/src/BootstrapBlazor.Shared/Samples/Carousels.razor +++ b/src/BootstrapBlazor.Shared/Samples/Carousels.razor @@ -21,6 +21,85 @@ + + + + + + + + + + + + + + + + + + +
    First slide label
    +

    Pic0.jpg

    +     + + + +     + + +
    Second slide label
    +

    Pic1.jpg

    +     + + + +     + + +
    Third slide label
    +

    Pic2.jpg

    +     + + + +     +     +     + + +

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

    + + + +
    First slide label
    +

    Pic0.jpg

    +     + + + +     + + +
    Second slide label
    +

    Pic1.jpg

    +     + + + +     + + +
    Third slide label
    +

    Pic2.jpg

    +     + + + +     +     +     + -- Gitee From b6205120c183c8cf04547ccf0f896d7a7bc057db Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 11 Sep 2022 17:53:05 +0800 Subject: [PATCH 09/10] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Samples/Carousels.razor | 79 ++++++++++++++----- .../wwwroot/css/site.css | 28 +++++++ 2 files changed, 88 insertions(+), 19 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Samples/Carousels.razor b/src/BootstrapBlazor.Shared/Samples/Carousels.razor index a9f565338..e2f8f1605 100644 --- a/src/BootstrapBlazor.Shared/Samples/Carousels.razor +++ b/src/BootstrapBlazor.Shared/Samples/Carousels.razor @@ -106,31 +106,72 @@ - + -
    -

    Title-1

    -
    Content-1
    -
    -
    -
    -

    Title-3

    -
    Content-3
    -
    -