### Skeleton Examples Source: https://www.fluentui-blazor.net/Skeleton Illustrative examples of using the FluentSkeleton component with different configurations. ```APIDOC ## Skeleton Examples ### Element blocks ```html ``` ### Element blocks with shimmer effect ```html ``` ### Using SVG via Pattern attribute ```html ``` ### Using inline SVG ```html ``` ``` -------------------------------- ### FluentPersona Examples Source: https://www.fluentui-blazor.net/Persona Examples demonstrating various configurations of the FluentPersona component. ```APIDOC ## Examples ### Default Persona Display a person with his avatar and his status. ```razor ``` ### Persona with Text Position Start Display a person with his name at the start. ```razor ``` ### Persona with Icon Image An icon can be displayed instead of an image (in this example, to depict an anonymous user). ```razor ``` ### Persona with Default Initials (No Image) If no image is specified, the initials of the person are automatically retrieved. ```razor ``` ### Persona with Specific Initials (No Image) Explicit initials for the person can be defined with the `Initials` property. ```razor ``` ### Persona with Dismiss Action Display a "Dismiss" cross and raise an event. ```razor @code { private bool Hidden { get; set; } private void Dismiss() { this.Hidden = true; } } ``` ``` -------------------------------- ### Usage Examples Source: https://www.fluentui-blazor.net/Divider Examples demonstrating how to use the FluentDivider component in various configurations. ```APIDOC ## FluentDivider Usage Examples ### Default Horizontal Divider ```html

Default


``` ### Horizontal Divider with Role="Presentation" ```html

Role="Presentation"

before divider after divider

``` ### Horizontal Divider with Role="Separator" ```html

Role="Separator"

before divider after divider

``` ### Vertical Divider with Role="Presentation" ```html

Role="Presentation"

before divider after divider ``` ### Vertical Divider with Role="Separator" ```html

Role="Separator"

before divider after divider ``` ``` -------------------------------- ### Simple Card Example Source: https://www.fluentui-blazor.net/Card A basic example of the FluentCard component with default settings. ```APIDOC ## Simple Card Example ### Description This example demonstrates a simple card with no specified width or height, showcasing its default behavior. ### Method None ### Endpoint None ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```html Hello Just some content in a card (with a button that does not do anything). Hello ``` ### Response #### Success Response (200) None #### Response Example None ``` -------------------------------- ### Install Fluent UI Blazor Templates Source: https://www.fluentui-blazor.net/Templates Run this command to install the Microsoft.FluentUI.AspNetCore.Templates package. This enables the creation of new projects with pre-configured Fluent UI components. ```bash dotnet new install Microsoft.FluentUI.AspNetCore.Templates Copy ``` -------------------------------- ### FluentTextArea Examples Source: https://www.fluentui-blazor.net/TextArea Code examples demonstrating the usage of the FluentTextArea component with different properties. ```APIDOC ## FluentTextArea Examples ### Default ```html

Default

label ``` ### Placeholder ```html

Placeholder

``` ### Required ```html

Required

``` ### Disabled ```html

Disabled

label ``` ### Read only ```html

Read only

label label ``` ### C# Code ```csharp @code { string? value1, value2, value3, value4, value5, value6, value7, value8="Read only text area", value9 = "Read only text area"; } ``` ``` -------------------------------- ### Start and End Slots Example Source: https://www.fluentui-blazor.net/Toolbar Shows how to utilize the 'start' and 'end' slots in the FluentToolbar component to place custom content, such as icons, at the beginning and end of the toolbar. ```APIDOC ## Start and End slots ### Description This section explains how to use the `start` and `end` slots within the FluentToolbar component. These slots allow for the insertion of custom content, like icons, at the beginning and end of the toolbar. ### Method Not Applicable (Component Usage) ### Endpoint Not Applicable (Component Usage) ### Parameters #### Component Parameters - **Slot** (string) - Required - Specifies the position of the content ('start' or 'end'). - **Orientation** (Orientation) - Required - Specifies the orientation of the toolbar (Horizontal or Vertical). ### Request Example ```razor ``` ### Response #### Success Response (200) Not Applicable (Component Usage) #### Response Example Not Applicable (Component Usage) ``` -------------------------------- ### Install DataGrid EF Core Adapter Source: https://www.fluentui-blazor.net/datagrid Install the necessary package to enable the FluentDataGrid to work with EF Core for asynchronous query resolution. ```bash dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter ``` -------------------------------- ### Simple Context Menu Example Source: https://www.fluentui-blazor.net/Menu Provides an example of a simple context menu that appears on right-click. This is useful for providing actions related to specific content. ```razor

Right-click on this text

Download @code { private bool showContextMenu = false; } ``` -------------------------------- ### Default MultiSplitter Example Source: https://www.fluentui-blazor.net/MultiSplitter A basic example demonstrating the usage of the FluentMultiSplitter and FluentMultiSplitterPane components with default settings. ```APIDOC ## Default MultiSplitter Example ### Description This example shows a default implementation of the `FluentMultiSplitter` with three panes. It includes nested splitters and demonstrates the use of `Size`, `Min`, `Max`, `Collapsible`, `Orientation`, and event handlers like `OnResize`, `OnExpand`, and `OnCollapse`. ### Razor Code ```razor Left Menu Main Content Console log Properties @code { void OnResizeHandler(FluentMultiSplitterResizeEventArgs e) { DemoLogger.WriteLine($"Pane {e.PaneIndex} Resize (New size {e.NewSize})"); } void OnCollapseExpand(FluentMultiSplitterEventArgs e) { bool willCollapse = !e.Pane.Collapsed; DemoLogger.WriteLine($"Pane {e.PaneIndex} {(willCollapse ? "collapsed" : "expanded")}"); } } ``` ### Parameters None for the example itself, but refers to parameters of `FluentMultiSplitter` and `FluentMultiSplitterPane`. ### Request Example ```json { "example": "No request body for this example" } ``` ### Response #### Success Response (200) - **field1** (type) - Description #### Response Example ```json { "example": "No specific response body defined for this example" } ``` ``` -------------------------------- ### Basic FluentTextField Examples Source: https://www.fluentui-blazor.net/TextField Demonstrates the basic usage of `` with and without a label, including examples for setting minimum and maximum lengths. ```razor

Without label:

You entered: @value1

With label:

You entered: @value2

Minlength

You entered: @value3

Maxlength

You entered: @value4

@code { string? value1, value2, value3, value4; } ``` -------------------------------- ### Default FluentAppBar Example Source: https://www.fluentui-blazor.net/AppBar A basic example of the FluentAppBar component. Use this for a standard app bar layout. ```razor ``` -------------------------------- ### Install DataGrid OData Adapter Source: https://www.fluentui-blazor.net/datagrid Install the package required for integrating the FluentDataGrid with OData sources, facilitating efficient asynchronous data querying. ```bash dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter ``` -------------------------------- ### Customized ProfileMenu Example Source: https://www.fluentui-blazor.net/ProfileMenu Shows a customized ProfileMenu with custom templates for start, header, content, and footer. This allows for more complex UI within the menu. Note the use of specific Fluent UI components for templated content. ```razor Bill Gates Login
Bill Gates bill.gates@microsoft.com
About ``` -------------------------------- ### Pull Up Demo Example Source: https://www.fluentui-blazor.net/PullToRefresh This Razor code example demonstrates how to implement the 'pull up' functionality using the FluentPullToRefresh component. It includes custom styling and logic for refresh actions. ```APIDOC ## Pull Up Demo This demo showcases the 'pull up' feature of the `FluentPullToRefresh` component. It features a set height for the pull-up tip, an increased pull distance, and uses a progress bar instead of a progress ring. The maximum number of items is limited to 100, restricting 'pull up' actions to 4. ### Example Usage ```razor @inject IJSRuntime js
@for (int i = 1; i <= count; i++) { item @i }
@code { int refreshcount = 0; int count = 3; public async Task OnRefreshAsync() { refreshcount++; if (count < 15) { await Task.Delay(1000); count += 3; DemoLogger.WriteLine($"Pull up refresh count {refreshcount}"); return true; } return false; } } ``` ### Download Razor ``` -------------------------------- ### Default FluentMenu Example Source: https://www.fluentui-blazor.net/Menu A basic example of a FluentMenu component. This snippet shows how to display a simple menu with a single item. ```razor Show Download ``` -------------------------------- ### Customized Wizard Example Source: https://www.fluentui-blazor.net/Wizard Illustrates a customized Wizard with specific step headers and a custom navigation button label. This example shows how to tailor the wizard's appearance and behavior. ```razor
##### Introduction Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor, ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum. ##### Get Started Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod. Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam. ##### Set budget Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur turpis, eget molestie ipsum. ##### Summary Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac, aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie. Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
``` -------------------------------- ### FluentTextArea Examples Source: https://www.fluentui-blazor.net/TextArea Demonstrates default, placeholder, required, disabled, and read-only states of the FluentTextArea component. Use these examples to see how different properties affect the text area's behavior and appearance. ```razor

Default

label

Placeholder

Required

Disabled

label

Read only

label label @code { string? value1, value2, value3, value4, value5, value6, value7, value8="Read only text area", value9 = "Read only text area"; } ``` -------------------------------- ### Breadcrumb with Start, End, and Custom Separator Icons Example Source: https://www.fluentui-blazor.net/Breadcrumb A comprehensive example of a breadcrumb with icons at both the start and end of each item, along with custom separators. This offers the highest level of visual customization. ```cshtml Breadcrumb item 1 Breadcrumb item 2 Breadcrumb item 3 ``` -------------------------------- ### Default Wizard Example Source: https://www.fluentui-blazor.net/Wizard Demonstrates the default configuration of the Wizard component with linear step progression and basic step information. Ensure all necessary components are imported for rendering. ```razor

Get started

Begin the tasks

This step is disabled

Identify the best price

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor, ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.

Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod. Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.

Nunc dignissim tortor eget lacus porta tristique. Nunc in posuere dui. Cras ligula ex, ullamcorper in gravida in, euismod vitae purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at velit leo. Suspendisse potenti. Cras dictum eu augue in laoreet.

Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur turpis, eget molestie ipsum. 1011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889

Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac, aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie. Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
``` -------------------------------- ### Breadcrumb with Start Icon Example Source: https://www.fluentui-blazor.net/Breadcrumb Shows a breadcrumb where each item includes a starting icon. This can be used to visually group or categorize navigation links. ```cshtml Breadcrumb item 1 Breadcrumb item 2 Breadcrumb item 3 ``` -------------------------------- ### Button with Icon Examples Source: https://www.fluentui-blazor.net/Button Shows how to include icons at the start or end of button content, or within the default slot for custom styling. ```razor Button Button Button Button ``` ```razor With icon in the content. ``` -------------------------------- ### FluentStack Default Example Source: https://www.fluentui-blazor.net/Stack Demonstrates the FluentStack component with all default settings, rendered with a border for clarity. ```APIDOC ## GET /websites/fluentui-blazor_net/examples/default-stack ### Description This example shows the `FluentStack` component using all its default parameters. It is rendered with a border to visualize its default size. ### Method GET ### Endpoint /websites/fluentui-blazor_net/examples/default-stack ### Parameters None ### Request Example ```json { "example": "No request body" } ``` ### Response #### Success Response (200) - **Content** (string) - Example content displayed within the stack. #### Response Example ```html
This is some content displayed in a div
This is some content displayed in a div
``` ``` -------------------------------- ### FluentNumberField FocusAsync Example Source: https://www.fluentui-blazor.net/NumberField Demonstrates how to programmatically focus a FluentNumberField using the FocusAsync method. This is useful for guiding user interaction after certain events. ```Razor

Autofocus

Commented out to prevent page actually jumping to this location. See example code on 'Razor'-tab for implementation.

@*autofocus*@

Focus Async

FocusAsync

@code { FluentNumberField? focusTest; int? value; } ``` -------------------------------- ### Simple FluentCard with FluentButton Example Source: https://www.fluentui-blazor.net/ Demonstrates how to use FluentCard and FluentButton components with a specified appearance. Ensure the necessary @using directive is present. ```razor @using Microsoft.FluentUI.AspNetCore.Components.

Hello World!

Click Me ``` -------------------------------- ### Accordion Default Example Source: https://www.fluentui-blazor.net/Accordion Demonstrates simple usage of the Accordion component. The 'start' and 'end' slots can be used to add content before or after each accordion item's header. ```razor <-- Panel one --> Panel one content, using the 'start' slot for extra header content (in this case an icon) <-- Panel two --> Panel two content, using the 'end' slot for extra header content <-- Panel three --> Panel three content <-- Panel Four --> Panel four content <-- Last changed accordion item: item with HeaderTemplate, Expanded: -->

Item with HeaderTemplate

This item has a HeaderTemplate

 ``` -------------------------------- ### Default Horizontal Scroll Example Source: https://www.fluentui-blazor.net/HorizontalScroll Demonstrates the default usage of the FluentHorizontalScroll component with various card elements. Includes event handlers for scroll start and end. ```razor @inject ILogger logger; Card number 1 A button Card number 2 Card number 3 Card number 4 Card number 5 Card number 6 Card number 7 Card number 8 Card number 9 Card number 10 Card number 11 Card number 12 Card number 13 Card number 14 Card number 15 Card number 16 @code { private void OnHorizontalScrollStart(HorizontalScrollEventArgs args) { logger.LogInformation($"{args.Scroll}"); } private void OnHorizontalScrollEnd(HorizontalScrollEventArgs args) { logger.LogInformation($"{args.Scroll}"); } } ``` -------------------------------- ### New NavMenu, NavGroup, and NavLink Components Source: https://www.fluentui-blazor.net/WhatsNew-Archive Introduces new NavMenu, NavGroup, and NavLink components. This is a breaking change, and users should consult the Upgrade guide for details. Examples are available on the NavMenu page. ```csharp New NavMenu, NavGroup and NavLink components. **Breaking change** - See the Upgrade guide for details. See NavMenu page for examples. ``` -------------------------------- ### FluentToolbar with various components Source: https://www.fluentui-blazor.net/Toolbar Use FluentToolbar to group interactive elements like buttons, radio groups, menus, selects, and checkboxes. This example shows a basic setup with different Fluent UI components. ```razor @inject FillColor FillColor @inject BaseLayerLuminance BaseLayerLuminance Accent Button Stealth Button One Two Three Button Select something Option 1 Second option Option 3 Checkbox
Add Open Copy Export Automate Stealth Refresh 21 items Filter
@code { string? comboboxValue; FluentToolbar? Toolbar; string? value1 = "one", value2 = "two", value3; bool check1; string? text1; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await FillColor.SetValueFor(Toolbar!.Element, "#333"); await BaseLayerLuminance.SetValueFor(Toolbar!.Element, (float)0.15); StateHasChanged(); } } private FluentMenuButton menubutton = new(); private Dictionary items = new Dictionary() { {"0078D4","Windows"}, {"D83B01","Office"}, {"464EB8","Teams"}, {"107C10","Xbox"}, {"8661C5","Visual Studio"}, {"F2C811","Power BI"}, {"0066FF","Power Automate"}, {"742774","Power Apps"}, {"0B556A","Power Virtual Agents"} }; private void HandleOnMenuChanged(MenuChangeEventArgs args) { } } ``` -------------------------------- ### FluentGrid Default Example Source: https://www.fluentui-blazor.net/Grid Demonstrates the default usage of the FluentGrid component with various item configurations for different screen sizes. ```razor Content Content Content Content Content Content Content ``` -------------------------------- ### Simple Button Examples Source: https://www.fluentui-blazor.net/Button Demonstrates basic button usage with different appearances. Note that 'Appearance.Hypertext' still renders a button. ```razor Accent Lightweight Outline Stealth Neutral Hypertext Colored Loading ``` -------------------------------- ### FluentAppBar with List of Apps Source: https://www.fluentui-blazor.net/AppBar Example of using FluentAppBar with a list of apps. It also shows how to create a derived AppBarItem class to explicitly set a custom order. ```razor ``` -------------------------------- ### Form Input Examples Source: https://www.fluentui-blazor.net/Reboot Demonstrates various standard HTML input components with Fluent UI Blazor styling. It's recommended to use Fluent Input components, but standard HTML inputs are also supported and restyled. ```html
Example legend
100
``` -------------------------------- ### Vertical Tabs Example Source: https://www.fluentui-blazor.net/Tabs Demonstrates vertical orientation for tabs. Content remains the same as the default example. ```razor Tab one content. This is for testing. Tab two content. This is for testing. Tab three content. This is for testing.

Download:

@code { private string _activeTabId = "tab1"; } ``` -------------------------------- ### Basic Drag and Drop Usage Source: https://www.fluentui-blazor.net/Drag This example shows how to set up draggable and droppable elements using FluentDragContainer and FluentDropZone. It logs drag and drop events to a demo logger. ```razor
Item 1
Item 2
```