component overview

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -41,7 +41,10 @@
                 <FluentNavLink Href="forminputcalendar" Icon="@(new Icons.Regular.Size20.CalendarDate())" IconColor="Color.Accent">Calendar</FluentNavLink>
                 <FluentNavLink Href="forminputdatetimepicker" Icon="@(new Icons.Regular.Size20.Clock())" IconColor="Color.Accent">Date & Time Picker</FluentNavLink>
             </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>
 
+            </FluentNavGroup>
         </FluentNavMenu>
     </nav>
 </div>

BlazorFluentUI/Components/Pages/Components/CompoOverview.razor

@@ -0,0 +1,39 @@
+@page "/compooverview"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Basic Fluent UI Components overview</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+Most components in the Fluent UI Blazor library derive from <code>FluentComponentBase</code>.
+<h3 class="mt-3">FluentComponentBase</h3>
+<code>FluentComponentBase</code> is the abstract base class all other Fluent UI Blazor components inherit from.
+You can <b>not</b> create or use a <code>FluentComponentBase</code> on a page or in another component.
+
+<h3 class="mt-3">Parameters</h3>
+<FluentDataGrid Items="@explantion">
+    <PropertyColumn Width="20%" Property="@(ex => ex.Name)" Title="@(nameof(Explanation.Name))" />
+    <PropertyColumn Width="20%" Property="@(ex => ex.Type)" Title="@(nameof(Explanation.Type))" />
+    <PropertyColumn Width="10%" Property="@(ex => ex.Default)" Title="@(nameof(Explanation.Default))" />
+    <PropertyColumn Class="multiline-text" Property="@(ex => ex.Description)" Title="@(nameof(Explanation.Description))" />
+</FluentDataGrid>
+
+@code {
+    record Explanation(string Name, string Type, string Default, string Description);
+    static IQueryable<Explanation> explantion = new[]
+    {
+        new Explanation("AdditionalAttribute", "IReadOnlyDictionary<string, object>?", "null",
+        "Gets or sets a collection of additional attributes."),
+        new Explanation("Class", "string?", "null",
+        "Gets or sets optional CSS class names. If given, these will be included in the class attribute of the component."),
+        new Explanation("Data", "object?", "null",
+        "Used to attach any user defined data object to the component."),
+        new Explanation("Element", "ElementReference", "null",
+        "Gets or sets the associated web component."),
+        new Explanation("Id", "string?", "null",
+        "Gets or sets an optional Id for the component. A unique id can be generated with Identifier.NewId() method. The value will be used as the HTML global id attribute."),
+        new Explanation("ParentReference", "Reference?", "null",
+        "Gets or sets a reference to the enclosing component."),
+        new Explanation("Style", "string?", "null",
+        "Optional in-line styles. If given, these will be included in the style attribute of the component."),
+    }.AsQueryable();
+}