Panel

Overview

Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings.

Usage

Panels
<Dropdown ItemsSource=@panelTypes
          MultiSelect="false"
          @bind-SelectedOption=@panelTypeSelected
          Style="width:300px;" />
<TextField @bind-Value=@customWidth
           Style="width:300px;"
           Label="Custom Width (number only! valid only when Custom panel type selected)" />

<PrimaryButton Text="Open Panel" OnClick=@Click />

<PrimaryButton Text="Open Light Dismiss Panel" OnClick=@(() => lightDismissPanelOpen=true ) />

<PrimaryButton Text="Open Custom Nav Panel" OnClick=@(() => customNavPanelOpen=true ) />


<Panel IsOpen=@isOpen
       OnDismiss=@PanelDismiss
       Type=@((PanelType)Enum.Parse(typeof(PanelType),panelTypeSelected?.Key!))
       IsLightDismiss="false"
       CustomWidth=@customWidth
       HeaderText="Panel Example">
    <p>
        Hey, there's some content in here.
        <TextField Description="Can I type here?" />

        <BlazorFluentUI.Label>Selected: @string.Join(", ", controlledMultiSelectionResult!.Select(x => x.Text))</BlazorFluentUI.Label>
        <Dropdown ItemsSource=@items
  MultiSelect="true"
  Placeholder="Select options..."
  @bind-SelectedOptions=@controlledMultiSelectionResult
  Style="width:220px;" />
    </p>
</Panel>

<Panel IsOpen=@lightDismissPanelOpen
       OnDismiss=@(() => lightDismissPanelOpen = !lightDismissPanelOpen)
       Type=@((PanelType)Enum.Parse(typeof(PanelType),panelTypeSelected?.Key!))
       CustomWidth=@customWidth
       IsLightDismiss="true"
       HeaderText="Light Dismiss Panel">
    <p>
        This is a light dismiss panel...
    </p>
</Panel>

<Panel IsOpen=@customNavPanelOpen
       OnDismiss=@(() => customNavPanelOpen = !customNavPanelOpen)
       Type=@((PanelType)Enum.Parse(typeof(PanelType),panelTypeSelected?.Key!))
       CustomWidth=@customWidth
       IsLightDismiss="false"
       HeaderText="Custom Nav Panel">
    <NavigationTemplate>
        <IconButton OnClick=@(() => customNavPanelOpen = false)
    IconName="navigation" />
    </NavigationTemplate>
    <ChildContent>
        <p>
            This is a panel with a completely custom nav area (at the top)...
        </p>
    </ChildContent>
</Panel>