diff --git a/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Accordion/custom-icon.txt b/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Accordion/custom-icon.txt new file mode 100644 index 000000000..49d24b0a7 --- /dev/null +++ b/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Accordion/custom-icon.txt @@ -0,0 +1,34 @@ + + @* Any icon component — the bool context is the open state for animations *@ + + + How do I use a Lucide icon? + + + + + + Pass any icon component to the Icon parameter. The context + parameter exposes the open state so you can animate it. + + + + @* Ad-hoc SVG content also works *@ + + + Can I use ad-hoc SVG? + + + + + + + + Yes. The Icon parameter accepts any markup, including raw SVG. + + + diff --git a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/AccordionDemo.razor b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/AccordionDemo.razor index 8c12fb998..87dbc7300 100644 --- a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/AccordionDemo.razor +++ b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/AccordionDemo.razor @@ -194,6 +194,53 @@ +
+
+

Custom Icon

+

+ Replace the default chevron with any icon component + (<LucideIcon>, <FontAwesomeIcon>, + <FeatherIcon>, <HeroIcon>) or ad-hoc SVG. + The icon receives a bool context with the open state for animation. +

+
+ + + + + How do I use a Lucide icon? + + + + + + Pass any icon component to the Icon parameter. The context + parameter exposes the open state so you can animate it. + + + + + + Can I use ad-hoc SVG? + + + + + + + + Yes. The Icon parameter accepts any markup, including raw SVG. + + + + + +
+ @@ -267,6 +314,11 @@ HTML heading element tag to wrap the trigger button. + + Custom icon rendered in place of the default chevron. Accepts any icon + component or ad-hoc SVG. The bool context is the open state. + When not set, the default rotating chevron is used. + diff --git a/src/BlazorBlueprint.Components/Components/Accordion/BbAccordionTrigger.razor b/src/BlazorBlueprint.Components/Components/Accordion/BbAccordionTrigger.razor index 52894444f..1858a1eff 100644 --- a/src/BlazorBlueprint.Components/Components/Accordion/BbAccordionTrigger.razor +++ b/src/BlazorBlueprint.Components/Components/Accordion/BbAccordionTrigger.razor @@ -8,19 +8,26 @@
@ChildContent - - - + @if (Icon != null) + { + @Icon(Item?.IsOpen == true) + } + else + { + + + + }
@@ -43,6 +50,20 @@ [Parameter] public string? Class { get; set; } + /// + /// Optional custom icon rendered at the end of the trigger in place of the default + /// chevron. Accepts any icon component (e.g. <LucideIcon>, + /// <FontAwesomeIcon>, <FeatherIcon>, <HeroIcon>) + /// or ad-hoc SVG/markup content. When not specified, the default chevron icon + /// (which rotates on open) is used. + /// + /// + /// The context parameter is a indicating whether the parent + /// accordion item is open, so the icon can be animated to reflect the open state. + /// + [Parameter] + public RenderFragment? Icon { get; set; } + /// /// The HTML element tag to use for the heading wrapper. /// Default is "h3". diff --git a/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt b/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt index d595316b8..93bb0e774 100644 --- a/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt +++ b/tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt @@ -27,6 +27,7 @@ - As : String - ChildContent : RenderFragment - Class : String + - Icon : RenderFragment - Item : BbAccordionItem [CascadingParameter] ### BbAlert (BlazorBlueprint.Components)