accordion

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -43,6 +43,7 @@
             </FluentNavGroup>
             <FluentNavGroup Icon="@(new Icons.Regular.Size20.PuzzlePiece())" Expanded="false" Title="Components">
                 <FluentNavLink Href="compooverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
+                <FluentNavLink Href="compoaccordion" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Accordion</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoAccordion.razor

@@ -0,0 +1,79 @@
+@page "/compoaccordion"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Accordion</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>Accordion</code> wraps a web component of a <code>accordion</code> element.
+    It uses the <code>FluentAccordionItem</code> component for defining the individual accordion items.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentAccordion OnAccordionItemChange="@OnExampleAccordionItemChange">
+        <FluentAccordionItem Heading="Panel one">
+            <FluentIcon Value="(new Icons.Regular.Size20.AnimalDog())" Color="Color.Accent" Slot="start"/>
+            This is panel one content.
+        </FluentAccordionItem>
+        <FluentAccordionItem Heading="Panel two">
+            <div slot="end">
+                #slot="end"#
+            </div>
+            This is panel two content.
+        </FluentAccordionItem>
+        <FluentAccordionItem Heading="Panel three">
+            This is panel three content.
+        </FluentAccordionItem>
+        <FluentAccordionItem Heading="Panel four" Expanded="true">
+            <HeadingTemplate>
+                Panel <span style="color:orangered; font-weight:bold">Four</span>
+            </HeadingTemplate>
+            <ChildContent>
+                This is panel four content.
+            </ChildContent>
+        </FluentAccordionItem>
+    </FluentAccordion>
+    <p><b>Last changed accordion item</b>: @(echanged?.Heading ?? "Item without Heading")</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Accordion with single expand mode</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentAccordion ExpandMode="AccordionExpandMode.Single">
+        <FluentAccordionItem Heading="Panel 1">
+            Panel 1 content
+        </FluentAccordionItem>
+        <FluentAccordionItem Heading="Panel 2">
+            Panel 2 content
+        </FluentAccordionItem>
+        <FluentAccordionItem Heading="Panel 3">
+            Panel 3 content
+        </FluentAccordionItem>
+    </FluentAccordion>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Control from code</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentAccordion>
+        <FluentAccordionItem Heading="@($"This accordion can programatically be opened and closed. Use the buttons below. (status: {(expanded ? "open" : "close")})")"
+                             Expanded="@expanded">
+            You can see the item.
+        </FluentAccordionItem>
+    </FluentAccordion>
+    <div style="display:flex">
+        <FluentButton OnClick="@(() => expanded = true)">Open</FluentButton>
+        <FluentButton OnClick="@(() => expanded = false)">Close</FluentButton>
+        <FluentButton OnClick="@(() => expanded = !expanded)">Toggle</FluentButton>
+    </div>
+</FluentCard>
+
+@code {
+    FluentAccordionItem? echanged;
+
+    void OnExampleAccordionItemChange(FluentAccordionItem item)
+    {
+        echanged = item;
+    }
+
+    bool expanded = false;
+}