(options);
if (!result.Cancelled)
{
// result.Value contains the returned data
}
}
```
### Dialog component
```razor
@* ConfirmDialog.razor *@
Are you sure you want to proceed?
Yes
No
@code {
[CascadingParameter]
public IDialogInstance Dialog { get; set; } = default!;
private async Task Confirm()
=> await Dialog.CloseAsync(DialogResult.Ok(true));
private async Task Cancel()
=> await Dialog.CloseAsync(DialogResult.Cancel());
}
```
### Show a drawer
```csharp
var result = await DialogService.ShowDrawerAsync(options =>
{
options.Header.Title = "Settings";
options.Alignment = DialogAlignment.End;
options.Size = DialogSize.Small;
});
```
### Pass parameters to the dialog component
```csharp
var options = new DialogOptions
{
Header = { Title = "Edit item" },
Parameters = new Dictionary
{
["ItemId"] = selectedItemId,
["ItemName"] = selectedItemName,
},
};
await DialogService.ShowDialogAsync(options);
```
> **Common mistake**: Implementing `IDialogContentComponent` (v4 pattern). In v5, dialog components are plain Razor components that receive `IDialogInstance` as a cascading parameter.
---
## Data Grid
```razor
Edit
@code {
private IQueryable people = GetPeople().AsQueryable();
private PaginationState pagination = new() { ItemsPerPage = 10 };
}
```
### Remote data with ItemsProvider
```csharp
@code {
private GridItemsProvider dataProvider = default!;
protected override void OnInitialized()
{
dataProvider = async request =>
{
var result = await Http.GetFromJsonAsync>(
$"api/people?start={request.StartIndex}&count={request.Count}");
return GridItemsProviderResult.From(result!.Items, result.TotalCount);
};
}
}
```
See [DATAGRID.md](references/DATAGRID.md) for advanced patterns (EF adapter,
OData, column options, resize, custom sort).
---
## Forms & Input Components
v5 input components extend `InputBase` and implement `IFluentField`,
providing built-in form validation integration.
```razor
Submit
```
### List components — two type parameters
All list-based components (`FluentSelect`, `FluentCombobox`, `FluentListbox`)
now take **two** type parameters: `TOption` (the item type) and `TValue` (the
bound value type).
```razor
@* Multiple selection *@
```
> **Common mistake**: Using `SelectedOptions` or `SelectedOptionsChanged` (v4 names). In v5, use `SelectedItems` / `SelectedItemsChanged`.
---
## Icons
Icons are instantiated as objects and passed via `Value`, `IconStart`, or
`IconEnd` parameters:
```razor
@* Standalone icon *@
@* Icon with color *@
@* Icon in a button *@
Add item
@* Icon from image URL *@
```
Icon naming: `Icons.{Variant}.{Size}.{Name}`
- Variants: `Regular`, `Filled`
- Sizes: `Size16`, `Size20`, `Size24`, `Size28`, `Size32`, `Size48`
---
## Margin & Padding (NEW in v5)
Every component supports `Margin` and `Padding` parameters using a
spacing-utility syntax:
```razor
Content with spacing
```
---
## Common Pitfalls
1. **Missing ``** — Dialogs, tooltips, and keyboard shortcuts
will silently fail without this component in your layout.
2. **Using v4 component names** — `FluentNavMenu` → `FluentNav`,
`FluentProgress` → `FluentProgressBar`, `FluentDesignTheme` → removed.
3. **Using `IToastService`** — Toast service does not exist in v5.
4. **`SelectedOptions` on lists** — Renamed to `SelectedItems`.
5. **Single type parameter on lists** — `FluentSelect` is v4.
v5 requires `FluentSelect`.
6. **`Appearance.Accent`** — Use `ButtonAppearance.Primary` instead.
7. **Targeting net8.0** — v5 requires net9.0 or later.
8. **Implementing `IDialogContentComponent`** — Not needed in v5. Dialog components
are plain Razor components receiving `IDialogInstance` as a cascading parameter.
---
## Reference Files
- [SETUP.md](references/SETUP.md) — Full setup guide for Blazor Server, WebAssembly, and Auto modes
- [DATAGRID.md](references/DATAGRID.md) — Advanced data grid patterns
- [THEMING.md](references/THEMING.md) — Detailed theming, design tokens, and CSS variables reference