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