microsoft · vnbaaij · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026
@@ -0,0 +1,29 @@
+<FluentDialogBody>
+
+    <TitleTemplate>
+        Dialog
+    </TitleTemplate>
+
+    <ChildContent>
+        This is the body content of the dialog.
+    </ChildContent>
+
+    <ActionTemplate>
+        <FluentButton OnClick="btnOK_Click" Appearance="ButtonAppearance.Primary">Close</FluentButton>
+    </ActionTemplate>
+
+</FluentDialogBody>
+
+@code
+{
+    [CascadingParameter]
+    public required IDialogInstance Dialog { get; set; }
+
+    [Inject]
+    public required IDialogService DialogService { get; set; }
+
+    private async Task btnOK_Click()
+    {
+        await Dialog.CloseAsync(DialogResult.Ok("Yes"));
+    }
+}
@@ -0,0 +1,10 @@
+<div class="sticker-row">
+    <FluentAccordion>
+        <FluentAccordionItem Header="Accordion header 1">
+            Accordion panel 1
+        </FluentAccordionItem>
+        <FluentAccordionItem Header="Accordion header 2">
+            Accordion panel 2
+        </FluentAccordionItem>
+    </FluentAccordion>
+</div>
@@ -0,0 +1,17 @@
+<div class="sticker-row">
+    <FluentAnchorButton>
+        Default
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Primary">
+        Primary
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Outline">
+        Outline
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Subtle">
+        Subtle
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Transparent">
+        Transparent
+    </FluentAnchorButton>
+</div>
@@ -0,0 +1,49 @@
+<div class="sticker-row">
+    <FluentAppBar Orientation="Orientation.Horizontal" Style="width: 350px;">
+        <FluentAppBarItem IconRest="ResourcesIcon()"
+                          IconActive="ResourcesIcon(active: true)"
+                          Text="Resources" />
+        <FluentAppBarItem IconRest="ConsoleLogsIcon()"
+                          IconActive="ConsoleLogsIcon(active: true)"
+                          Text="Console Logs" />
+        <FluentAppBarItem Href="/sticker-sheet"
+                          IconRest="StickerSheetIcon()"
+                          IconActive="StickerSheetIcon(active: true)"
+                          Text="Sticker Sheet" />
+        <FluentAppBarItem IconRest="StructuredLogsIcon()"
+                          IconActive="StructuredLogsIcon(active: true)"
+                          Text="Logs"
+                          Tooltip="Structured Logs" />
+        <FluentAppBarItem IconRest="TracesIcon()"
+                          IconActive="TracesIcon(active: true)"
+                          Text="Traces" />
+        <FluentAppBarItem IconRest="MetricsIcon()"
+                          IconActive="MetricsIcon(active: true)"
+                          Text="Metrics" />
+    </FluentAppBar>
+</div>
+
+@code {
+    private static Icon ResourcesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.AppFolder()
+               : new Icons.Regular.Size24.AppFolder();
+
+    private static Icon ConsoleLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideText()
+               : new Icons.Regular.Size24.SlideText();
+
+    private static Icon StructuredLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideTextSparkle()
+               : new Icons.Regular.Size24.SlideTextSparkle();
+
+    private static Icon TracesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.GanttChart()
+               : new Icons.Regular.Size24.GanttChart();
+
+    private static Icon MetricsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.ChartMultiple()
+               : new Icons.Regular.Size24.ChartMultiple();
+    private static Icon StickerSheetIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.Sticker()
+               : new Icons.Regular.Size24.Sticker();
+}
@@ -0,0 +1,22 @@
+@using static FluentUI.Demo.SampleData.Olympics2024
+<div class="sticker-row">
+
+    <FluentAutocomplete TOption="Country"
+                        TValue="string"
+                        Width="100%"
+                        Label="Select countries"
+                        Placeholder="Type to search..."
+                        OnOptionsSearch="@OnSearchAsync"
+                        OptionText="@(item => item.Name)"
+                        OptionDisabled="@(e => e.Code == "au")"/>
+</div>
+@code
+{
+    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
+    {
+        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
+                           .OrderBy(i => i.Name);
+
+        return Task.CompletedTask;
+    }
+}
@@ -0,0 +1,6 @@
+<div class="sticker-row">
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size32" Initials="VB" />
+    <FluentAvatar Shape="AvatarShape.Square" Size="AvatarSize.Size32" Initials="DV" />
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size48" Initials="MK" />
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size48" Initials="AC" Active="true" />
+</div>
@@ -0,0 +1,14 @@
+<div class="sticker-row">
+    <FluentBadge Appearance="BadgeAppearance.Filled" Color="BadgeColor.Brand">
+        Filled
+    </FluentBadge>
+    <FluentBadge Appearance="BadgeAppearance.Ghost" Color="BadgeColor.Brand">
+        Ghost
+    </FluentBadge>
+    <FluentBadge Appearance="BadgeAppearance.Outline" Color="BadgeColor.Brand">
+        Outline
+    </FluentBadge>
+    <FluentBadge Appearance="BadgeAppearance.Tint" Color="BadgeColor.Brand">
+        Tint
+    </FluentBadge>
+</div>
@@ -0,0 +1,17 @@
+<div class="sticker-row">
+    <FluentButton>
+        Default
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Primary">
+        Primary
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Outline">
+        Outline
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Subtle">
+        Subtle
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Transparent">
+        Transparent
+    </FluentButton>
+</div>
@@ -0,0 +1,23 @@
+<div class="sticker-row">
+    <FluentCalendar DisabledDateFunc="@DisabledDay"
+                    @bind-Value="@SelectedDay"
+                    @bind-PickerMonth="@PickerDay"
+                    Style="height: 250px; align-content: start;" />
+</div>
+
+@code {
+
+    private static readonly DateTime Today = DateTime.Today;
+    private static readonly DateTime StartOfMonth = new DateTime(Today.Year, Today.Month, 1);
+
+    private DateTime SelectedDay = Today;
+    private DateTime PickerDay = StartOfMonth;
+    private DateTime SelectedMonth = Today;
+    private DateTime PickerMonth = StartOfMonth;
+    private DateTime SelectedYear = Today;
+    private DateTime PickerYear = StartOfMonth;
+
+    private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20;
+    private bool DisableMonth(DateTime date) => date.Month == 3 || date.Month == 8;
+    private bool DisableYear(DateTime date) => date.Year == 2026 || date.Year == 2027;
+}
@@ -0,0 +1,5 @@
+<div class="sticker-row">
+    <FluentCard Shadow="CardShadow.Default">
+        Hello! This is a card.
+    </FluentCard>
+</div>
@@ -0,0 +1,13 @@
+<div class="sticker-col">
+    <FluentCheckbox Margin="0" @bind-Value="@value1" Label="Checked" />
+    <FluentCheckbox Margin="0" @bind-Value="@value2" Disabled="true" Label="Disabled" />
+    <FluentCheckbox Margin="0" @bind-Value="@value3" Label="Unchecked" />
+    <FluentCheckbox Margin="0"  @bind-CheckState="value4" ShowIndeterminate="true" Label="Indeterminate" />
+</div>
+
+@code {
+    bool value1 = true;
+    bool value2 = true;
+    bool value3;
+    bool? value4;
+}
@@ -0,0 +1,5 @@
+<div class="sticker-row">
+    <FluentColorPickerInput Label="Color"
+                            Placeholder="#000000"
+                            View="ColorPickerView.SwatchPalette" />
+</div>
@@ -0,0 +1,12 @@
+<div class="sticker-row">
+    <FluentCombobox Label="Country"
+                Placeholder="Select your country"
+                Multiple="false"
+                OptionText="@(i => i?.Name)"
+                OptionValue="@(i => i?.Code)"
+                Items="@Countries" />
+</div>
+
+@code {
+    IEnumerable<SampleData.Olympics2024.Country> Countries = SampleData.Olympics2024.Countries;
+}
@@ -0,0 +1,10 @@
+<div class="sticker-row">
+    <FluentCompoundButton Label="Primary" Appearance="ButtonAppearance.Primary">
+        <Description>Description content</Description>
+    </FluentCompoundButton>
+    <FluentCompoundButton Label="Default">
+        <Description>Description content</Description>
+    </FluentCompoundButton>
+
+
+</div>
@@ -0,0 +1,6 @@
+<div class="sticker-row">
+    <FluentCounterBadge Count="5" />
+    <FluentCounterBadge Count="42" />
+    <FluentCounterBadge Count="0" ShowZero="true" />
+    <FluentCounterBadge Count="120" Appearance="BadgeAppearance.Ghost" />
+</div>
@@ -0,0 +1,21 @@
+<div class="sticker-row">
+    <FluentDataGrid Items="@people" >
+        <PropertyColumn Width="75px" Property="@(p => p.PersonId)" Sortable="true" />
+        <PropertyColumn Width="175px" Property="@(p => p.Name)" Sortable="true" />
+        <PropertyColumn Width="110px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
+    </FluentDataGrid>
+
+@code {
+    PaginationState pagination = new PaginationState() { ItemsPerPage = 2 };
+
+    record Person(int PersonId, string Name, DateOnly BirthDate);
+
+    IQueryable<Person> people = new[]
+    {
+        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
+        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
+        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
+    }.AsQueryable();
+
+}
+</div>
@@ -0,0 +1,7 @@
+<div class="sticker-row">
+    <FluentDatePicker Label="Pick a date" @bind-Value="@SelectedValue" />
+</div>
+
+@code{
+    private DateTime SelectedValue { get; set; } = DateTime.Today.AddDays(-2);
+}
@@ -0,0 +1,24 @@
+@inject IDialogService DialogService
+<div class="sticker-row">
+    <FluentButton OnClick="@OpenDialogAsync"
+                  Appearance="ButtonAppearance.Primary">
+        Open Dialog
+    </FluentButton>
+</div>
+
+@code
+{
+
+    private async Task OpenDialogAsync()
+    {
+        var result = await DialogService.ShowDialogAsync<DialogForCard>(options =>
+        {
+            options.Modal = true;
+            options.Size = DialogSize.Small;
+
+        });
+
+
+    }
+}
+
@@ -0,0 +1,12 @@
+<div class="sticker-col">
+    <FluentDivider />
+    <FluentDivider>
+        Text
+    </FluentDivider>
+    <FluentDivider Appearance="DividerAppearance.Brand">
+        Brand
+    </FluentDivider>
+    <FluentDivider Appearance="DividerAppearance.Subtle">
+        Subtle
+    </FluentDivider>
+</div>
@@ -0,0 +1,4 @@
+<div class="sticker-row">
+    <FluentEmoji Value="@(new Emojis.PeopleBody.Color.Default.Artist())" />
+    <FluentEmoji Value="@(new Emojis.SmileysEmotion.Color.Default.RollingOnTheFloorLaughing())" Width="50px" />
+</div>
@@ -0,0 +1,3 @@
+<div class="sticker-row">
+    <FluentTextInput Placeholder="Enter text" Label="Label" Message="Helper message" MessageCondition="@FluentFieldCondition.Always"></FluentTextInput>
+</div>
@@ -0,0 +1,26 @@
+@using System.ComponentModel.DataAnnotations
+
+<EditForm Model="@model" novalidate="true">
+    <DataAnnotationsValidator />
+    <FluentValidationSummary />
+
+    <FluentStack Orientation="Orientation.Vertical">
+        <div>
+            <FluentTextInput Name="identifier" @bind-Value="model.Identifier" Label="Identifier" Required="true" />
+        </div>
+
+        <FluentButton Type="ButtonType.Submit" Appearance="ButtonAppearance.Primary">Submit</FluentButton>
+    </FluentStack>
+</EditForm>
+
+@code {
+    private class Model
+    {
+        [Required]
+        [StringLength(10, MinimumLength = 3, ErrorMessage = "Identifier must be between 3 and 10 characters.")]
+        public string Identifier { get; set; } = string.Empty;
+    }
+
+    private Model model = new Model();
+
+}
@@ -0,0 +1,11 @@
+<div class="sticker-row" style="display:inline;">
+    <FluentHighlighter HighlightedText="@Highlight"
+                       Delimiters=" ,;"
+                       Text="@Text" />
+</div>
+
+@code
+{
+    static string Text = SampleData.Text.GenerateLoremIpsum(1,50);
+    string Highlight = "Lorem";
+}
@@ -0,0 +1,4 @@
+<div class="sticker-row">
+    <FluentIcon Value="@(new Icons.Regular.Size24.Save())" Title="Save" />
+    <FluentIcon Value="@(new Icons.Regular.Size24.Open())" Title="Open" Color="Color.Error" />
+</div>
@@ -0,0 +1,3 @@
+<div class="sticker-row">
+    <FluentImage Source="/big-heart.jpg" AlternateText="Placeholder Image" />
+</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
@@ -0,0 +1 @@
+<div class="sticker-row">This card will show a component soon!</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div class="sticker-row">This card will show a component soon!</div>