Fluent UI Blazor

https://www.fluentui-blazor.net
Admin
Provides Fluent UI components for Blazor applications, accompanied by comprehensive documentation...
Tokens:274,287
Snippets:1,703
Trust Score:7.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Microsoft.FluentUI.AspNetCore.Components NuGet package

Source: https://www.fluentui-blazor.net/

Use this command in your CLI to install the main library package into your project.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components
```

--------------------------------

### 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
<FluentPersona Name="Bill Gates"
               Status="PresenceStatus.Available"
               StatusSize="PresenceBadgeSize.Small"
               StatusTitle="He is available"
               Image="@DataSource.SamplePicture"
               ImageSize="50px">
</FluentPersona>
```

### Persona with Text Position Start

Display a person with his name at the start.

```razor
<FluentPersona Name="Bill Gates"
               Status="PresenceStatus.Available"
               StatusSize="PresenceBadgeSize.Small"
               StatusTitle="He is available"
               Image="@DataSource.SamplePicture"
               ImageSize="50px"
               TextPosition="TextPosition.Start">
</FluentPersona>
```

### Persona with Icon Image

An icon can be displayed instead of an image (in this example, to depict an anonymous user).

```razor
<FluentPersona Name="Anonymous"
               Status="PresenceStatus.Offline"
               StatusSize="PresenceBadgeSize.Small"
               StatusTitle="Anonymous user is offline"
               Image="@(new Icons.Regular.Size48.Person().ToDataUri(size: "25px", color: "white"))"
               ImageSize="50px">
</FluentPersona>
```

### Persona with Default Initials (No Image)

If no image is specified, the initials of the person are automatically retrieved.

```razor
<FluentStack>
    <FluentPersona Name="Lydia Bauer"
                   ImageSize="50px"
                   Status="PresenceStatus.Busy"
                   StatusSize="PresenceBadgeSize.Small">
    </FluentPersona>

    <FluentPersona Initials="LB"
                   ImageSize="50px">
    </FluentPersona>
</FluentStack>
```

### Persona with Specific Initials (No Image)

Explicit initials for the person can be defined with the `Initials` property.

```razor
<FluentPersona Name="Lydia Bauer"
               ImageSize="50px"
               Initials="LY">
</FluentPersona>
```

### Persona with Dismiss Action

Display a "Dismiss" cross and raise an event.

```razor
<div hidden="@this.Hidden">
    <FluentPersona Name="Bill Gates"
                   Status="PresenceStatus.Available"
                   StatusSize="PresenceBadgeSize.Small"
                   StatusTitle="He is available"
                   Image="@DataSource.SamplePicture"
                   ImageSize="50px"
                   DismissTitle="Hide Bill"
                   OnDismissClick="@this.Dismiss">
    </FluentPersona>
</div>

@code {
    private bool Hidden { get; set; }

    private void Dismiss()
    {
        this.Hidden = true;
    }
}
```
```

--------------------------------

### 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
<h4>Default</h4>
<FluentTextArea @bind-Value=value1 Appearance="FluentInputAppearance.Filled"></FluentTextArea>
<FluentTextArea @bind-Value=value2 Appearance="FluentInputAppearance.Filled">
    <span>label</span>
</FluentTextArea>
```

### Placeholder
```html
<h4>Placeholder</h4>
<FluentTextArea @bind-Value=value3 Appearance="FluentInputAppearance.Filled" Placeholder="Placeholder"></FluentTextArea>
```

### Required
```html
<!-- Required -->
<h4>Required</h4>
<FluentTextArea @bind-Value=value4 Appearance="FluentInputAppearance.Filled" Required="true"></FluentTextArea>
```

### Disabled
```html
<!-- Disabled -->
<h4>Disabled</h4>
<FluentTextArea @bind-Value=value5 Appearance="FluentInputAppearance.Filled" Disabled="true"></FluentTextArea>
<FluentTextArea @bind-Value=value6 Appearance="FluentInputAppearance.Filled" Disabled="true">
    <span>label</span>
</FluentTextArea>
<FluentTextArea @bind-Value=value7 Appearance="FluentInputAppearance.Filled" Disabled="true" Placeholder="placeholder"></FluentTextArea>
```

### Read only
```html
<!-- Read only -->
<h4>Read only</h4>
<FluentTextArea @bind-Value=value8 Appearance="FluentInputAppearance.Filled" ReadOnly="true">
    label
</FluentTextArea>
<FluentTextArea @bind-Value=value9 Appearance="FluentInputAppearance.Filled" ReadOnly="true">
    label
</FluentTextArea>
```

### C# Code
```csharp
@code {
    string? value1, value2, value3, value4, value5, value6, value7, value8="Read only text area", value9 = "Read only text area";
}
```
```

--------------------------------

### FluentPopover Keyboard Navigation Example

Source: https://www.fluentui-blazor.net/Popover

A basic Razor example demonstrating the structure for an open callout and the next control.

```razor
Open Callout 
Next control
```

--------------------------------

### Default FluentSwitch Examples

Source: https://www.fluentui-blazor.net/Switch

Demonstrates basic FluentSwitch usage with and without labels, and with custom checked/unchecked messages using slots. Requires a Blazor component setup.

```razor
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
    <FluentSwitch @bind-Value=value1 AriaLabel="No label"></FluentSwitch>
    <FluentSwitch @bind-Value=value2 Label=" Dark Mode" />
    <FluentSwitch @bind-Value=@value3 Label="New Feature">
        <span slot="checked-message">On</span>
        <span slot="unchecked-message">Off</span>
    </FluentSwitch>
    <FluentSwitch @bind-Value=value4 Label="Theme">
        <span slot="checked-message">Dark</span>
        <span slot="unchecked-message">Light</span>
    </FluentSwitch>
</div>

<p>New feature: @value3</p>

@code {
    bool value1, value2, value3=true, value4;

}
```

--------------------------------

### Install OData DataGrid Adapter

Source: https://www.fluentui-blazor.net/datagrid

Install the OData adapter package for FluentDataGrid to enable asynchronous query resolution with OData.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapterCopy
```

--------------------------------

### 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

```

--------------------------------

### Install EF Core DataGrid Adapter

Source: https://www.fluentui-blazor.net/datagrid

Install the EF Core adapter package for FluentDataGrid to enable asynchronous query resolution with EF Core.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapterCopy
```

--------------------------------

### Basic FluentTextField Examples

Source: https://www.fluentui-blazor.net/TextField

Demonstrates the basic usage of `<FluentTextField>` with and without a label, including examples for setting minimum and maximum lengths.

```razor
<p>Without label:</p>
<FluentTextField @bind-Value=value1 AriaLabel="No label"></FluentTextField>
<p>You entered: @value1</p>

<p>With label:</p>
<FluentTextField @bind-Value=value2 Label="Label"></FluentTextField>
<p>You entered: @value2</p>

<h4>Minlength</h4>
<FluentTextField @bind-Value=value3 Minlength="4" Label="Minlength"></FluentTextField>
<p>You entered: @value3</p>

<h4>Maxlength</h4>
<FluentTextField @bind-Value=value4 Maxlength="4" Label="Maxlength"></FluentTextField>
<p>You entered: @value4</p>

@code {
    string? value1, value2, value3, value4;
}
```

--------------------------------

### 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
<FluentStack HorizontalAlignment="@HorizontalAlignment.End"
             VerticalAlignment="@VerticalAlignment.Center"
             Style="height: 48px; background: var(--neutral-layer-4); padding-inline-end: 10px; ">
    <FluentProfileMenu Initials="BG"
                       Style="--fluent-profile-menu-hover: var(--neutral-stroke-focus); padding: 4px;">
        <StartTemplate>
            Bill Gates
        </StartTemplate>
        <HeaderTemplate>
            <FluentLabel Typo="@Typography.Header">Login</FluentLabel>
        </HeaderTemplate>
        <ChildContent>
            <div style="width: 250px; height: 80px">
                <FluentLabel Typo="@Typography.Header" Style="font-weight: bold;">Bill Gates</FluentLabel>
                <FluentLabel>bill.gates@microsoft.com</FluentLabel>
            </div>
        </ChildContent>
        <FooterTemplate>
            <FluentStack>
                <FluentSpacer />
                <FluentAnchor Appearance="@Appearance.Hypertext"
                              Href="https://microsoft.com"
                              Target="_blank">About</FluentAnchor>
            </FluentStack>
        </FooterTemplate>
    </FluentProfileMenu>
</FluentStack>
```

--------------------------------

### FluentCard and FluentButton example

Source: https://www.fluentui-blazor.net/

A basic example showing a FluentCard containing a FluentButton with the Accent appearance.

```razor
@using Microsoft.FluentUI.AspNetCore.Components.

                    <FluentCard Width="350px" Height="250px">
                    <h2>Hello World!</h2>
                    <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
                    </FluentCard>
```

--------------------------------

### FluentNavMenuTree Implementation Examples

Source: https://www.fluentui-blazor.net/NavMenuTree

A comprehensive example showing three different configurations of the FluentNavMenuTree component: one with nested groups and icons, one with icons only, and a simple text-only version.

```razor
@{
#pragma warning disable CS0618
}

<h2>Navigation Examples</h2>
<FluentStack Orientation="Orientation.Horizontal" >
    <!-- Menu with sub-items and icons -->
    <FluentNavMenuTree Collapsible="false" Title="Navigation  demo">
        <FluentNavMenuLink Text="Item 1" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 2" Href="/NavMenu" />
        <FluentNavMenuGroup Text="Item 3" Href="/NavMenu">
            <FluentNavMenuLink Text="Item 3.1" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
            <FluentNavMenuLink Text="Item 3.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu" />
        </FluentNavMenuGroup>
        <FluentNavMenuGroup Text="Item 4" @onclick="OnClick" Href="/NavMenu">
            <FluentNavMenuLink Text="Item 4.1" @onclick="OnClick" Href="/NavMenu" />
            <FluentNavMenuLink Text="Item 4.2" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
        </FluentNavMenuGroup>
        <FluentNavMenuGroup Text="Item 5" @onclick="OnClick" Href="/NavMenu">
            <FluentNavMenuLink Text="Item 5.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu" />
            <FluentNavMenuGroup @onclick="OnClick" Text="Item 5.2" Href="/NavMenu">
                <FluentNavMenuLink Text="Item 5.2.1" @onclick="OnClick" Href="/NavMenu" />
                <FluentNavMenuLink Text="Item 5.2.2" @onclick="OnClick" Href="/NavMenu" />
            </FluentNavMenuGroup>
            <FluentNavMenuGroup @onclick="OnClick" Text="Item 5.3" Href="/NavMenu">
                <FluentNavMenuLink Text="Item 5.3.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
                <FluentNavMenuLink Text="Item 5.3.2" @onclick="OnClick" Href="/NavMenu" />
            </FluentNavMenuGroup>
        </FluentNavMenuGroup>
        <FluentNavMenuGroup @onclick="OnClick" Text="Items with Href">
            <FluentNavMenuLink Text="Go to Bing" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="https://bing.com" />
            <FluentNavMenuLink Text="Go to home page" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" Href="/" />
        </FluentNavMenuGroup>
        <FluentNavMenuLink Text="Last item" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafThree())" Disabled="true" />
    </FluentNavMenuTree>

    <!-- Menu with icons -->
    <FluentNavMenuTree>
        <FluentNavMenuLink Text="Item 1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 2" @onclick="OnClick" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 3" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 4" @onclick="OnClick" Href="/NavMenu" />
    </FluentNavMenuTree>

    <!-- Menu simple -->
    <FluentNavMenuTree>
        <FluentNavMenuLink Text="Item 1" @onclick="OnClick" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 2" @onclick="OnClick" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 3" @onclick="OnClick" Href="/NavMenu" />
        <FluentNavMenuLink Text="Item 4" @onclick="OnClick" Href="/NavMenu" />
    </FluentNavMenuTree>

</FluentStack>
@code
{

    void OnClick(MouseEventArgs e)
    {
        DemoLogger.WriteLine("NavMenuTree item clicked");
    }

    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) 
        {
            
        }
        base.OnAfterRender(firstRender);
    }
}
```

--------------------------------

### Using FluentIcon Component

Source: https://www.fluentui-blazor.net/UpgradeGuide

Example of how to use the FluentIcon component with the new syntax in v3.

```cshtml
<FluentIcon Value="@(new Icons.Regular.Size24.Save())" />
```

--------------------------------

### 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

<style>
    .pull-up-demo {
        height: 51.2vh;
        max-width: 400px;
        border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-rest);
        border-radius: calc(var(--control-corner-radius)* 1px);
        overflow: auto;
    }
    .pull-content {
        user-select: none;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: calc(var(--design-unit) * 2px);
        height: calc(100% - 50px);
    }
</style>

<div class="pull-up-demo">
    <FluentPullToRefresh Direction="@PullDirection.Up" OnRefreshAsync="OnRefreshAsync" TipHeight="50" DragDistance="100" >
        <LoadingTemplate>
            <FluentProgress Width="150px;"/>
        </LoadingTemplate>
        <ChildContent>
            <div class="pull-content">
                @for (int i = 1; i <= count; i++)
                {
                    <span @key="i">item @i</span>
                }
            </div>
        </ChildContent>
    </FluentPullToRefresh>
</div>

@code {
    int refreshcount = 0;
    int count = 3;

    public async Task<bool> OnRefreshAsync()
    {
        refreshcount++;
        if (count < 15)
        {
            await Task.Delay(1000);
            count += 3;
            DemoLogger.WriteLine($"Pull up refresh count {refreshcount}");

            return true;
        }

        return false;
    }
}
```

### Download

Razor
```

--------------------------------

### FluentNavMenuTree Custom Actions Example

Source: https://www.fluentui-blazor.net/NavMenuTree

A complete Razor component example showing how to intercept menu actions, handle them at different levels, and trigger a FluentDialog.

```Razor
@{
#pragma warning disable CS0618
}

@using System.Text;

<h2>Custom Actions Example</h2>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
    <div>
        <FluentNavMenuTree OnAction="@InterceptAtMenuLevel" Title="Custom actions demo">
            @*
            This item is handled by the MenuLevelHandler, which intercepts all items
            but will only handle ones with Id ending with _HandleAtMenuLevel
            *@
            <FluentNavMenuLink Id="HandleAtMenuLevel" Text="Handled at menu level" Icon="@(new Icons.Regular.Size24.Home())" />

            @*
            This item has an OnAction callback specified at item level
            *@
            <FluentNavMenuLink OnAction="@InterceptAtItemLevel" Text="Handled at item level" Icon="@(new Icons.Regular.Size24.LeafOne())" />

            @*
            This item is intercepted by the menu but not marked as handled.
            It does not have an item handler to mark it as handled.
            It does not have a Href, so will not be selectable.
            *@
            <FluentNavMenuLink Text="Not selectable" Icon="@(new Icons.Regular.Size24.DismissCircle())" />

            @*
            This item shows a dialog
            *@
            <FluentNavMenuLink OnAction="@ShowDialog" Text="Show a dialog" Icon="@(new Icons.Regular.Size24.Window())" />

            @*
            This item is disabled
            *@
            <FluentNavMenuLink Disabled Text="Disabled" Icon="@(new Icons.Regular.Size24.Prohibited())" Href="https://microsoft.com"/>

            @*
            This item is intercepted by the menu but not marked as handled.
            It does not have an item handler to mark it as handled.
            It does have a Href, so it will navigate.
            *@
            <FluentNavMenuLink Href="https://microsoft.com" Text="Default behavior (navigate)" Icon="@(new Icons.Regular.Size24.Earth())" />

            @*
                This is a group without link or action. Should expand/collapse when text clicked
            *@
             <FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" >
                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" />
                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" />
             </FluentNavMenuGroup>
        </FluentNavMenuTree>
    </div>
    <div style="width: 100%;">
        <h2>Log</h2>
        <pre><code>@_output</code></pre>
    </div>
</FluentStack>

<FluentDialog Hidden="@_hideDialog" aria-label="Simple dialog" Modal="@true" TrapFocus="@true" @ondialogdismiss=CloseDialog>
    <h2>Just a simple dialog</h2>
    <p>The 'Close dialog' button is automatically focused.</p>
    <FluentButton Appearance="Appearance.Accent" Autofocus="true" @onclick="CloseDialog">Close dialog</FluentButton>
</FluentDialog>

@code
{
    bool _hideDialog = true;
    StringBuilder _output = new();

    void InterceptAtMenuLevel(NavMenuActionArgs args)
    {
        _output = new StringBuilder();
        _output.AppendLine($"Actioned at {DateTime.Now}");
        _output.AppendLine($"Item \"{args.Target.Id}\" intercepted at menu level.");
        if (args.Target.Id == "HandleAtMenuLevel")
        {
            _output.AppendLine("Handled at menu level.");
            args.SetHandled();
        }
    }

    void InterceptAtItemLevel(NavMenuActionArgs args)
    {
        _output.AppendLine($"Item \"{args.Target.Id}\" intercepted at item level.");
        _output.AppendLine("Handled at item level.");
        args.SetHandled();
    }

    void ShowDialog(NavMenuActionArgs args)
    {
        _output.AppendLine($"Item \"{args.Target.Id}\" intercepted at item level.");
        _hideDialog = false;
        args.SetHandled();
    }

    void CloseDialog()
    {
        _hideDialog = true;
    }
}
```

--------------------------------

### Default FluentStack Example

Source: https://www.fluentui-blazor.net/Stack

Demonstrates a basic FluentStack with default parameters, rendered with a border to show its boundaries.

```Razor
@namespace FluentUI.Demo.Shared

<FluentStack Style="border: 1px dotted var(--accent-fill-rest)">
    <div class="demopanel">This is some content displayed in a div</div>
    <div class="demopanel">This is some content displayed in a div</div>
</FluentStack>
```

--------------------------------

### Transparent Fluent Overlay Example

Source: https://www.fluentui-blazor.net/Overlay

An example of a transparent overlay. This overlay does not have a background color, allowing content underneath to be partially visible.

```Razor
<FluentButton Appearance="Appearance.Accent" @onclick="() => visible = !visible">Show Overlay</FluentButton>

<FluentOverlay @bind-Visible=@visible OnClose="HandleOnClose">
    <FluentProgressRing />
</FluentOverlay>

@code {
    bool visible = false;

    protected void HandleOnClose()
    {
        DemoLogger.WriteLine("Transparent overlay closed");
    }
}
```

--------------------------------

### 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
<h4>Default</h4>
<FluentTextArea @bind-Value=value1 Appearance="FluentInputAppearance.Filled"></FluentTextArea>
<FluentTextArea @bind-Value=value2 Appearance="FluentInputAppearance.Filled">
    <span>label</span>
</FluentTextArea>

<h4>Placeholder</h4>
<FluentTextArea @bind-Value=value3 Appearance="FluentInputAppearance.Filled" Placeholder="Placeholder"></FluentTextArea>

<!-- Required -->
<h4>Required</h4>
<FluentTextArea @bind-Value=value4 Appearance="FluentInputAppearance.Filled" Required="true"></FluentTextArea>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentTextArea @bind-Value=value5 Appearance="FluentInputAppearance.Filled" Disabled="true"></FluentTextArea>
<FluentTextArea @bind-Value=value6 Appearance="FluentInputAppearance.Filled" Disabled="true">
    <span>label</span>
</FluentTextArea>
<FluentTextArea @bind-Value=value7 Appearance="FluentInputAppearance.Filled" Disabled="true" Placeholder="placeholder"></FluentTextArea>

<!-- Read only -->
<h4>Read only</h4>
<FluentTextArea @bind-Value=value8 Appearance="FluentInputAppearance.Filled" ReadOnly="true">
    label
</FluentTextArea>
<FluentTextArea @bind-Value=value9 Appearance="FluentInputAppearance.Filled" ReadOnly="true">
    label
</FluentTextArea>
@code {
    string? value1, value2, value3, value4, value5, value6, value7, value8="Read only text area", value9 = "Read only text area";
}
```

--------------------------------

### Default Progress Example

Source: https://www.fluentui-blazor.net/Progress

Demonstrates the default usage of the FluentProgress component for both determinate and indeterminate states.

```APIDOC
## GET /websites/fluentui-blazor_net/examples/progress/default

### Description
Displays default FluentProgress components, one showing a determinate state (75%) and another in an indeterminate state.

### Method
GET

### Endpoint
/websites/fluentui-blazor_net/examples/progress/default

### Request Body
None

### Response
#### Success Response (200)
- **HTML Content**: Renders the default progress components.

### Request Example
```html
<h4>Default</h4>
<div style="width: 300px; display: grid; grid-gap: 12px; grid-auto-flow: column;">
    <FluentProgress Min="0" Max="100" Value="75"></FluentProgress>
    <FluentProgress></FluentProgress>
</div>
```
```

--------------------------------

### FluentOption with Icons

Source: https://www.fluentui-blazor.net/Option

Shows how to include icons in the start and end slots of a FluentOption.

```APIDOC
## FluentOption with Icons

### Description
Shows how to include icons in the start and end slots of a FluentOption.

### Examples

#### With icons
This option has an icon in its start and end slots. This option has an icon in its start slot. This option has an icon in its end slot.

```razor
<h4>With icons</h4>
<FluentSelect Value=2 TOption="int">
    <FluentOption Value=1>
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="start" />
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="end" />
        This option has an icon in its start and end slots.
    </FluentOption>
    <FluentOption Value=2>
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="start" />
        This option has an icon in its start slot.
    </FluentOption>
    <FluentOption Value=3>
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="end" />
        This option has an icon in its end slot.
    </FluentOption>
</FluentSelect>
```
```

--------------------------------

### Horizontal Catalog Data Setup

Source: https://www.fluentui-blazor.net/Overflow

Initializes a static string array for the catalog items used in the horizontal overflow example.

```Razor
@code
{
    static string[] Catalog = new[] { "Blazor", "WPF", "Microsoft", "#Framework",
                                      "Electron", "WinForms", "MAUI", "Fluent", "Reality",
                                      "Office", "Installation", "Azure", "DevOps" };
}
```

--------------------------------

### 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
<h4>Autofocus</h4>
<p>Commented out to prevent page actually jumping to this location. See example code on 'Razor'-tab for implementation.</p>
@*<FluentNumberField TValue="int?" Autofocus="true">autofocus</FluentNumberField>*@

<h4>Focus Async</h4>
<p style="display:flex">
    <FluentButton @onclick="() => focusTest!.FocusAsync()">FocusAsync</FluentButton>
    <FluentNumberField @ref=focusTest @bind-Value=value></FluentNumberField>
</p>

@code {
    FluentNumberField<int?>? focusTest;
    int? value;
}
```

--------------------------------

### Simple Context Menu Example

Source: https://www.fluentui-blazor.net/Menu

Demonstrates how to create a simple context menu that appears on right-click. The menu items trigger actions logged via DemoLogger.

```Razor
<div id="myId4" class="demopanel">
    Right-click on this text <br />
    to open a Context Menu.
</div>

<FluentMenu Anchor="myId4" Trigger="MouseButton.Right" Anchored="false" @onmenuchange=OnMenuChange>
    <FluentMenuItem Label="Item 1" OnClick="@((e) => DemoLogger.WriteLine("Item 1 Clicked"))" />

    <FluentMenuItem Label="Item 2">
        <MenuItems>
            <FluentMenuItem Label="Item 2.1">
                <MenuItems>
                    <FluentMenuItem Label="Item 2.1.1" OnClick="@((e) => DemoLogger.WriteLine("Item 2.1.1 Clicked"))" />
                    <FluentMenuItem Label="Item 2.1.2" OnClick="@((e) => DemoLogger.WriteLine("Item 2.1.2 Clicked"))" />
                </MenuItems>
            </FluentMenuItem>
            <FluentMenuItem Label="Item 2.2" OnClick="@((e) => DemoLogger.WriteLine("Item 2.2 Clicked"))" />
        </MenuItems>
    </FluentMenuItem>

    <FluentMenuItem Label="Item 3" OnClick="@((e) => DemoLogger.WriteLine("Item 3 Clicked"))" />
</FluentMenu>

<p>@status</p>

@code {
 
    private string status = "";

    private void OnMenuChange(MenuChangeEventArgs args)
    {
        if (args is not null && args.Value is not null)
            status = $"Item \"{args.Value}\" clicked";
    }
}
```

--------------------------------

### 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<HorizontalScrollDefault> logger;
    
<FluentHorizontalScroll Speed="600" Easing=ScrollEasing.EaseInOut @onfluentscrollstart=OnHorizontalScrollStart @onfluentscrollend=OnHorizontalScrollEnd>
    <FluentCard>
        Card number 1
        <FluentButton Appearance="Appearance.Neutral">A button</FluentButton>
    </FluentCard>
    <FluentCard>Card number 2</FluentCard>
    <FluentCard>Card number 3</FluentCard>
    <FluentCard>Card number 4</FluentCard>
    <FluentCard>Card number 5</FluentCard>
    <FluentCard>Card number 6</FluentCard>
    <FluentCard>Card number 7</FluentCard>
    <FluentCard>Card number 8</FluentCard>
    <FluentCard>Card number 9</FluentCard>
    <FluentCard>Card number 10</FluentCard>
    <FluentCard>Card number 11</FluentCard>
    <FluentCard>Card number 12</FluentCard>
    <FluentCard>Card number 13</FluentCard>
    <FluentCard>Card number 14</FluentCard>
    <FluentCard>Card number 15</FluentCard>
    <FluentCard>Card number 16</FluentCard>
</FluentHorizontalScroll>

@code {
    private void OnHorizontalScrollStart(HorizontalScrollEventArgs args)
    {
        logger.LogInformation($"{args.Scroll}");
    }

    private void OnHorizontalScrollEnd(HorizontalScrollEventArgs args)
    {
        logger.LogInformation($"{args.Scroll}");
    }
}
```

--------------------------------

### 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
<FluentDragContainer TItem="string"
                     OnDragEnd="@(e => DemoLogger.WriteLine($"{e.Source.Id} drag ended"))"
                     OnDragEnter="@(e => DemoLogger.WriteLine($"{e.Source.Id} is entered in  {e.Target.Id}"))"
                     OnDragLeave="@(e => DemoLogger.WriteLine($"{e.Source.Id} has left {e.Target.Id}"))"
                     OnDropEnd="@(e => DemoLogger.WriteLine($"{e.Source.Id} dropped in {e.Target.Id}"))">
    <FluentStack>
        <FluentDropZone Id="Item1" Draggable="true" Droppable="true">
            <div style="width: 50px; height: 50px; background-color: pink;">
                Item 1
            </div>
        </FluentDropZone>
        <FluentDropZone Id="Item2" Draggable="true" Droppable="true">
            <div style="width: 50px; height: 50px; background-color: lightgreen;">
                Item 2
            </div>
        </FluentDropZone>
    </FluentStack>
</FluentDragContainer>
```

--------------------------------

### Show Progress Toast Example

Source: https://www.fluentui-blazor.net/Toast

Demonstrates how to show a progress toast with update, reset, and close functionality. Requires IToastService and FluentButton components.

```Razor
@inject IToastService ToastService

<FluentStack Wrap=true>
    <FluentButton Appearance=Appearance.Neutral @onclick=@ShowExample>Progress toast example 1</FluentButton>
    <FluentButton @ref=_button Appearance="Appearance.Neutral" @onclick=UpdateProgress>Update</FluentButton>
    <FluentButton Appearance="Appearance.Neutral" @onclick=Reset>Reset</FluentButton>
    <FluentButton Appearance="Appearance.Neutral" @onclick=Close>Close</FluentButton>
    <FluentButton Appearance=Appearance.Neutral @onclick="@ShowIndeterminateExample">Indeterminate progress toast</FluentButton>
</FluentStack>

@code {
    private FluentButton? _button;
    private static string _id = "progressToast";
    private CancellationTokenSource _cancel = new();

    private ToastParameters<ProgressToastContent> _progressToastData;
    private ToastParameters<ProgressToastContent> _progressToastDataIndeterminate;

    public ToastProgressToasts()
    {
        _progressToastData = new() 
            {
                Id = _id,
                Intent = ToastIntent.Upload,
                Title = "Uploading file",
                Timeout = 0,
                TopAction = "Cancel",
                OnTopAction = EventCallback.Factory.Create<ToastResult>(this, ClickedCancel),
                Content = new ProgressToastContent()
                {
                    Details = "This may take a while.",
                    Progress = 0,
                },
            };

        _progressToastDataIndeterminate = new() 
            {
                Id = $"{_id}Indeterminate",
                Intent = ToastIntent.Progress,
                Title = "Creating resource",
                Content = new ProgressToastContent()
                {
                    Details = "This will close after the default timeout of 7000 milliseconds.",
                },
            };

    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _button!.SetDisabled(true);
        }
    }

    private void ShowExample()
    {
        _button!.SetDisabled(false);
        ToastService.ShowProgressToast(_progressToastData);
    }

    private void ShowIndeterminateExample()
    {
        ToastService.ShowProgressToast(_progressToastDataIndeterminate);
    }

    private static void ClickedCancel()
    {
        DemoLogger.WriteLine($"Clicked cancel");
    }


    private async Task UpdateProgress()
    {
        _button!.SetDisabled(true);

        for (int i = 0; i < 101; i++)
        {
            _progressToastData.Content.Progress = i;
            ToastService.UpdateToast(_id, _progressToastData);
            await Task.Delay(100, _cancel.Token);
        };

    }

    private void Reset()
    {
        _cancel.Cancel();   
        _progressToastData.Content.Progress = 0;
        ToastService.UpdateToast(_id, _progressToastData);
        _cancel = new();
        _button!.SetDisabled(false);

    }

    private void Close()
    {
        Reset();
        ToastService.CloseToast(_id);
        _button!.SetDisabled(true);
    }
}
```

--------------------------------

### FluentTextField with Start and End Icons

Source: https://www.fluentui-blazor.net/TextField

Demonstrates how to add icons to the start and end of the `<FluentTextField>` using the `FluentIcon` component.

```razor
<h4>With start</h4>
<FluentTextField @bind-Value=value1>
    <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Slot="start" Color="Color.Neutral" />
</FluentTextField>

<h4>With end</h4>
<FluentTextField @bind-Value=value2                                                                                                                                                                                                                                                                                                                                                                                                       >
    <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="end" />
</FluentTextField>

@code {
    string? value1, value2;
}
```

--------------------------------

### Display Persona with Text at Start

Source: https://www.fluentui-blazor.net/Persona

Configures the Persona to display the text to the start of the avatar. Requires the DataSource.SamplePicture to be accessible.

```razor
<FluentPersona Name="Bill Gates"
               Status="PresenceStatus.Available"
               StatusSize="PresenceBadgeSize.Small"
               StatusTitle="He is available"
               Image="@DataSource.SamplePicture"
               ImageSize="50px"
               TextPosition="TextPosition.Start">
</FluentPersona>
```

--------------------------------

### FluentOption<TOption> Class Documentation

Source: https://www.fluentui-blazor.net/Option

Detailed documentation for the FluentOption class parameters, event callbacks, and methods.

```APIDOC
## Documentation

### FluentOption<TOption> Class

#### Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `ChildContent` | RenderFragment? |  | Gets or sets the content to be rendered inside the component. |
| `Disabled` | bool | False | Gets or sets a value indicating whether the element is disabled. |
| `Selected` | bool | False | Gets or sets a value indicating whether the element is selected. |
| `Title` | string? |  | Gets or sets the title tooltip of this option. |
| `Value` | string? |  | Gets or sets the value of this option. |

#### EventCallbacks

| Name | Type | Description |
|---|---|---|
| `OnSelect` | EventCallback<string> | Called whenever the selection changed. |
| `SelectedChanged` | EventCallback<bool> | Called whenever the selection changed. |

#### Methods

| Name | Parameters | Type | Description |
|---|---|---|---|
| `OnClickHandlerAsync` |  | Task |  |
```

--------------------------------

### FluentToolbar with Start and End slots

Source: https://www.fluentui-blazor.net/Toolbar

Demonstrates how to use the start and end slots within a FluentToolbar in both horizontal and vertical orientations.

```Razor
<FluentToolbar id="toolbar-start-end-slots" Orientation="Orientation.Horizontal">
    <FluentIcon Value="@(new Icons.Filled.Size16.Globe())" Slot="start" Color="Color.Accent" />
    <FluentIcon Value="@(new Icons.Filled.Size16.Globe())" Slot="end" Color="Color.Accent" />
</FluentToolbar>
<FluentToolbar id="toolbar-start-end-slots-vertical" Orientation="Orientation.Vertical">
    <FluentIcon Value="@(new Icons.Filled.Size16.Globe())" Slot="start" Color="Color.Accent" />
    <FluentIcon Value="@(new Icons.Filled.Size16.Globe())" Slot="end" Color="Color.Accent" />
</FluentToolbar>
```

--------------------------------

### Default Combobox Examples

Source: https://www.fluentui-blazor.net/Combobox

Demonstrates basic Combobox usage with a list of items, a pre-selected option, and a placeholder.

```Razor
Razor
@inject DataSource Data

<h4>Select the best song from the list or type your own</h4>
<p>
    Selected hit: @hit
</p>
<FluentCombobox Placeholder="Make a selection..." Label="Best song" Autofocus="true" Items="@Data.Hits" @bind-Value="@hit" Height="200px" Immediate ImmediateDelay="100" />

<h4>Pre-selected option</h4>
<FluentCombobox AriaLabel="Pre-selected option" Items="@Data.Names" @bind-Value="@name" Height="200px" />
<p>
    Selected name: @name
</p>

<h4>With Placeholder</h4>
<FluentCombobox Placeholder="Please select a size" Items="@Data.Sizes" @bind-Value="@size" Height="200px" />
<p>
    Selected size: @size
</p>

@code {
    string? hit = "";
    string? name = "Nur Sari";
    string? size = "";
}
```

--------------------------------

### Default Tooltip Example

Source: https://www.fluentui-blazor.net/Tooltip

A basic example of a FluentTooltip anchored to an icon. The tooltip content appears on hover. The OnDismissed event is handled to log a message.

```razor
<FluentIcon Id="myFirstButton" Icon="Icons.Regular.Size24.Notepad" />

<FluentTooltip Anchor="myFirstButton" OnDismissed="OnDismiss">
    Hello World <br />
    It is a <i>small</i> tooltip.
</FluentTooltip>

@code {
    private void OnDismiss()
    {
        DemoLogger.WriteLine("Tooltip dismissed!");
    }
}
```

--------------------------------

### FluentIcon usage examples

Source: https://www.fluentui-blazor.net/Icon

Demonstrates rendering various icons, using custom image sources, and integrating icons into FluentButton components using IconStart and IconEnd parameters.

```razor
<FluentStack VerticalAlignment="VerticalAlignment.Center">
    <FluentIcon Value="@(new Icons.Regular.Size24.Save())" Title="Save" />
    <FluentIcon Value="@(new Icons.Regular.Size24.Open())" Title="Open" Color="Color.Error" />
    <FluentIcon Value="@(new Icons.Regular.Size24.Album())" />

    <FluentIcon Value="@(Icon.FromImageUrl("_content/FluentUI.Demo.Shared/images/BlazorLogo.png"))" Width="24px"/>

    @(new Icons.Regular.Size20.Add().ToMarkup())
    @(new Icons.Regular.Size20.Airplane().ToMarkup("16px", "blue"))

    <FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleLeft())">
        Back
    </FluentButton>

    <FluentButton IconEnd="@(new Icons.Regular.Size24.ArrowCircleRight().WithColor(Color.Success))">
        Next
    </FluentButton>

    <FluentButton IconEnd="@(new Icons.Regular.Size24.DismissCircle().WithColor("red"))">
        Exit
    </FluentButton>

    <FluentButton Appearance="Appearance.Accent"
                  IconEnd="@(new Icons.Regular.Size24.Alert().WithColor(Color.Fill))">
        Next
    </FluentButton>

```
Tokens:
Raw