메뉴
Reference for MudBlazor 9.x components used in FinanceManager. Consult this whenever building or modifying UI with MudBlazor — it lists every component family, links to the official docs, and shows the minimal idiomatic snippet for each. Use it to avoid guessing API surface or re-reading full docs pages.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
How to use the running FinanceManager app as an agent — above all the develop-only auto test login (/DevelopLogin/{login}/{page}) that skips the landing page and login form. Use this skill whenever you need to sign in to the app for testing (UI or API), deep-link to an authenticated page, or obtain an access token without credentials. Covers guest vs testuser accounts, environment gating, and direct API usage.
Use this skill whenever a change touches the Blazor UI (any .razor/.razor.cs/.razor.css under FinanceManager.Components, layouts, or styling) and you need to see it rendered — not just compiled. It explains how to boot the app in the cloud sandbox, log in through the built-in guest/demo account, and screenshot the real pages on both mobile and desktop viewports using the pre-installed Playwright Chromium.
Use this skill whenever a code change introduces a user-visible difference (new feature, behaviour change, bug fix, removal, security patch). It explains how to add or update entries in the root `CHANGELOG.md` so the project keeps a consistent, human-readable history any agent can extend.
| name | mudblazor |
| description | Reference for MudBlazor 9.x components used in FinanceManager. Consult this whenever building or modifying UI with MudBlazor — it lists every component family, links to the official docs, and shows the minimal idiomatic snippet for each. Use it to avoid guessing API surface or re-reading full docs pages. |
Version in use: MudBlazor 9.4.0 (see code/Directory.Packages.props)
Docs root: https://mudblazor.com/components/
[Inject] properties in code-behind or @code {} — never @inject directives in markup.Variant="Variant.Outlined" and Margin="Margin.Dense" for compact, consistent look.color: var(--mud-palette-text-primary) for theme-safe text, not hard-coded colours.Icons.Material.Filled.*, Icons.Material.Outlined.*, Icons.Material.Rounded.*.Size.Small, Size.Medium, Size.Large.Color.Default, Color.Primary, Color.Secondary, Color.Tertiary, Color.Success, Color.Warning, Color.Error, Color.Info, Color.Surface, Color.Inherit.Docs: https://mudblazor.com/components/appbar | https://mudblazor.com/components/drawer | https://mudblazor.com/components/navmenu
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"
OnClick="@(() => _drawerOpen = !_drawerOpen)" />
<MudText Typo="Typo.h6">FinanceManager</MudText>
<MudSpacer />
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
<MudNavMenu>
<MudNavLink Href="/" Icon="@Icons.Material.Filled.Dashboard" Match="NavLinkMatch.All">Dashboard</MudNavLink>
<MudNavGroup Title="Accounts" Icon="@Icons.Material.Filled.AccountBalance" Expanded="true">
<MudNavLink Href="/AccountDetails/1">Cash 1</MudNavLink>
</MudNavGroup>
</MudNavMenu>
</MudDrawer>
<MudMainContent>
@Body
</MudMainContent>
</MudLayout>
Key params: MudDrawer — Variant (DrawerVariant.Mini/Responsive/Temporary), @bind-Open. MudAppBar — Fixed, Dense, Color.
Docs: https://mudblazor.com/components/container
<MudContainer MaxWidth="MaxWidth.Large" Class="my-4 px-4">
@* page content *@
</MudContainer>
MaxWidth values: False, ExtraSmall, Small, Medium, Large, ExtraLarge.
Docs: https://mudblazor.com/components/grid
<MudGrid Spacing="3">
<MudItem xs="12" sm="6" md="4">
<MudText>Column 1</MudText>
</MudItem>
<MudItem xs="12" sm="6" md="8">
<MudText>Column 2</MudText>
</MudItem>
</MudGrid>
Breakpoints: xs, sm, md, lg, xl (1–12 columns). Spacing is 0–16 (MUI spacing units).
Docs: https://mudblazor.com/components/stack
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Justify="Justify.SpaceBetween">
<MudText>Left</MudText>
<MudButton>Right</MudButton>
</MudStack>
Row="false" (default) = column. Wrap="Wrap.Wrap" for flex-wrap.
Docs: https://mudblazor.com/components/text
<MudText Typo="Typo.h5" Color="Color.Primary">Heading</MudText>
<MudText Typo="Typo.body2" Align="Align.Center">Body copy</MudText>
Typo values: h1–h6, subtitle1, subtitle2, body1, body2, button, caption, overline.
Docs: https://mudblazor.com/components/link
<MudLink Href="/settings" Typo="Typo.body2" Color="Color.Primary">Settings</MudLink>
Docs: https://mudblazor.com/components/highlighter
<MudHighlighter Text="@fullText" HighlightedText="@searchTerm" />
Docs: https://mudblazor.com/components/button
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Save"
StartIcon="@Icons.Material.Filled.Save" Size="Size.Medium">
Save
</MudButton>
Variant: Text, Outlined, Filled. Disabled, FullWidth, Style all supported.
Docs: https://mudblazor.com/components/button
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error"
Size="Size.Small" OnClick="Delete" />
Docs: https://mudblazor.com/components/fab
<MudFab Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add"
Size="Size.Large" OnClick="AddItem" />
Docs: https://mudblazor.com/components/buttongroup
<MudButtonGroup Variant="Variant.Filled" Color="Color.Primary" Size="Size.Medium">
<MudButton OnClick="Save">Save</MudButton>
<MudMenu Icon="@Icons.Material.Filled.ArrowDropDown"
AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight"
Dense="true" Style="align-self: auto;">
<MudMenuItem OnClick="SaveAs">Save as…</MudMenuItem>
<MudMenuItem OnClick="Export">Export</MudMenuItem>
</MudMenu>
</MudButtonGroup>
Split-button pattern: put MudMenu with Icon directly inside MudButtonGroup — do NOT use ActivatorContent + inner MudButton for this pattern.
Docs: https://mudblazor.com/components/togglegroup
<MudToggleGroup T="string?" Value="@_selected" ValueChanged="OnChanged"
SelectionMode="SelectionMode.ToggleSelection"
Dense="true" Size="Size.Small" Outlined="true" Delimiters="true">
<MudToggleItem Value="@("income")">Income</MudToggleItem>
<MudToggleItem Value="@("expense")">Expense</MudToggleItem>
</MudToggleGroup>
SelectionMode: SingleSelection (always one selected), ToggleSelection (nullable — clicking active item deselects), MultiSelection (T must be IList).
Docs: https://mudblazor.com/components/textfield
<MudTextField T="string" @bind-Value="_name"
Label="Name" Placeholder="Enter name"
Variant="Variant.Outlined" Margin="Margin.Dense"
Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search"
Clearable="true" Immediate="true" DebounceInterval="300"
HelperText="Max 100 chars" MaxLength="100" />
Use Value + ValueChanged (uncontrolled) or @bind-Value (two-way). Immediate="true" fires on every keystroke.
Docs: https://mudblazor.com/components/numericfield
<MudNumericField T="decimal" @bind-Value="_amount"
Label="Amount" Variant="Variant.Outlined" Margin="Margin.Dense"
Min="0m" Max="1_000_000m" Step="0.01m"
Adornment="Adornment.Start" AdornmentText="$" />
Docs: https://mudblazor.com/components/select
<MudSelect T="string" @bind-Value="_category"
Label="Category" Variant="Variant.Outlined" Margin="Margin.Dense"
AnchorOrigin="Origin.BottomCenter">
@foreach (var cat in _categories)
{
<MudSelectItem Value="@cat">@cat</MudSelectItem>
}
</MudSelect>
@* Multi-select *@
<MudSelect T="string" @bind-SelectedValues="_selected"
MultiSelection="true" Label="Tags" Variant="Variant.Outlined">
<MudSelectItem Value="@("tag1")">Tag 1</MudSelectItem>
</MudSelect>
Docs: https://mudblazor.com/components/autocomplete
<MudAutocomplete T="string" @bind-Value="_picked"
Label="Search" Variant="Variant.Outlined" Margin="Margin.Dense"
SearchFunc="SearchAsync" MinCharacters="1" />
SearchFunc is Func<string, CancellationToken, Task<IEnumerable<T>>>.
Docs: https://mudblazor.com/components/checkbox
<MudCheckBox @bind-Value="_checked" Label="Accept terms" Color="Color.Primary" Dense="true" />
T="bool" (default). For nullable: T="bool?".
Docs: https://mudblazor.com/components/switch
<MudSwitch @bind-Value="_enabled" Label="Enable notifications" Color="Color.Primary" />
Docs: https://mudblazor.com/components/radio
<MudRadioGroup T="string" @bind-Value="_mode">
<MudRadio Value="@("auto")" Color="Color.Primary">Auto</MudRadio>
<MudRadio Value="@("manual")" Color="Color.Primary">Manual</MudRadio>
</MudRadioGroup>
Docs: https://mudblazor.com/components/datepicker
<MudDatePicker @bind-Date="_date" Label="Date"
Variant="Variant.Outlined" Margin="Margin.Dense"
DateFormat="yyyy-MM-dd" MinDate="DateTime.Today.AddYears(-10)" />
_date is DateTime?. DateRangePicker is a separate component (see below).
Docs: https://mudblazor.com/components/daterangepicker
<MudDateRangePicker @bind-DateRange="_range" Label="Period"
Variant="Variant.Outlined" DateFormat="MMM d" />
@code {
DateRange _range = new(DateTime.Today.AddMonths(-1), DateTime.Today);
}
DateRange is MudBlazor.DateRange with Start and End (DateTime?).
Docs: https://mudblazor.com/components/timepicker
<MudTimePicker @bind-Time="_time" Label="Time"
Variant="Variant.Outlined" Margin="Margin.Dense" AmPm="false" />
_time is TimeSpan?.
Docs: https://mudblazor.com/components/slider
<MudSlider T="int" @bind-Value="_value" Min="0" Max="100" Step="5"
Color="Color.Primary">@_value%</MudSlider>
Docs: https://mudblazor.com/components/rating
<MudRating @bind-SelectedValue="_stars" MaxValue="5" Color="Color.Warning" />
Docs: https://mudblazor.com/components/fileupload
<MudFileUpload T="IBrowserFile" FilesChanged="OnFileChanged" Accept=".csv">
<ActivatorContent>
<MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Upload">
Choose file
</MudButton>
</ActivatorContent>
</MudFileUpload>
Docs: https://mudblazor.com/components/table
<MudTable Items="_rows" Hover="true" Dense="true" Striped="false"
Loading="_loading" LoadingProgressColor="Color.Primary"
Filter="FilterFunc" SortLabel="Sort by">
<ToolBarContent>
<MudText Typo="Typo.h6">Transactions</MudText>
</ToolBarContent>
<HeaderContent>
<MudTh><MudTableSortLabel SortBy="new Func<Row, object>(r => r.Date)">Date</MudTableSortLabel></MudTh>
<MudTh>Amount</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd>@context.Date.ToShortDateString()</MudTd>
<MudTd>@context.Amount.ToString("C")</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager />
</PagerContent>
</MudTable>
Docs: https://mudblazor.com/components/datagrid
<MudDataGrid T="Row" Items="_rows" Filterable="true" Sortable="true"
Dense="true" Hover="true" RowClick="OnRowClick">
<Columns>
<PropertyColumn Property="r => r.Date" Title="Date" />
<PropertyColumn Property="r => r.Amount" Title="Amount" Format="C" />
<TemplateColumn Title="Actions">
<CellTemplate>
<MudIconButton Icon="@Icons.Material.Filled.Delete" OnClick="@(() => Delete(context.Item))" />
</CellTemplate>
</TemplateColumn>
</Columns>
</MudDataGrid>
Docs: https://mudblazor.com/components/list
<MudList T="string" Dense="true" ReadOnly="false" @bind-SelectedValue="_sel">
@foreach (var item in _items)
{
<MudListItem Value="@item" Icon="@Icons.Material.Filled.Circle">@item</MudListItem>
}
</MudList>
Docs: https://mudblazor.com/components/expansion-panels
<MudExpansionPanels MultiExpansion="true">
<MudExpansionPanel Text="Section 1" IsInitiallyExpanded="true">
<MudText>Content 1</MudText>
</MudExpansionPanel>
<MudExpansionPanel Text="Section 2">
<MudText>Content 2</MudText>
</MudExpansionPanel>
</MudExpansionPanels>
Docs: https://mudblazor.com/components/treeview
<MudTreeView T="string" Dense="true" Hover="true">
<MudTreeViewItem Value="@("root")" Text="Root">
<MudTreeViewItem Value="@("child")" Text="Child" />
</MudTreeViewItem>
</MudTreeView>
Docs: https://mudblazor.com/components/card
<MudCard Elevation="2">
<MudCardHeader>
<CardHeaderAvatar>
<MudAvatar Color="Color.Primary">A</MudAvatar>
</CardHeaderAvatar>
<CardHeaderContent>
<MudText Typo="Typo.body1">Title</MudText>
<MudText Typo="Typo.body2" Color="Color.Default">Subtitle</MudText>
</CardHeaderContent>
<CardHeaderActions>
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" />
</CardHeaderActions>
</MudCardHeader>
<MudCardContent>
<MudText>Body text here.</MudText>
</MudCardContent>
<MudCardActions>
<MudButton Variant="Variant.Text" Color="Color.Primary">Action</MudButton>
</MudCardActions>
</MudCard>
Docs: https://mudblazor.com/components/paper
<MudPaper Elevation="4" Class="pa-4">
@* content *@
</MudPaper>
Elevation 0–24. Outlined="true" instead of shadow. Square="true" removes border-radius.
Docs: https://mudblazor.com/components/divider
<MudDivider Class="my-2" />
<MudDivider Vertical="true" FlexItem="true" Class="mx-2" />
Docs: https://mudblazor.com/components/chip
<MudChipSet T="string" @bind-SelectedValues="_selectedChips" SelectionMode="SelectionMode.MultiSelection">
<MudChip T="string" Value="@("food")" Color="Color.Primary">Food</MudChip>
<MudChip T="string" Value="@("travel")" Color="Color.Secondary">Travel</MudChip>
</MudChipSet>
Standalone chip with close button:
<MudChip T="string" OnClose="Remove" Color="Color.Primary">Label</MudChip>
Docs: https://mudblazor.com/components/badge
<MudBadge Content="3" Color="Color.Error" Overlap="true" Bordered="true">
<MudIconButton Icon="@Icons.Material.Filled.Notifications" />
</MudBadge>
Docs: https://mudblazor.com/components/avatar
<MudAvatar Color="Color.Primary" Size="Size.Medium">JD</MudAvatar>
<MudAvatar Image="/img/avatar.png" Size="Size.Large" />
Docs: https://mudblazor.com/components/icon
<MudIcon Icon="@Icons.Material.Filled.Euro" Color="Color.Success" Size="Size.Small" />
Docs: https://mudblazor.com/components/tabs
<MudTabs Elevation="0" Rounded="false" ApplyEffectsToContainer="true"
@bind-ActivePanelIndex="_tabIndex">
<MudTabPanel Text="Overview" Icon="@Icons.Material.Filled.BarChart">
@* content *@
</MudTabPanel>
<MudTabPanel Text="Transactions">
@* content *@
</MudTabPanel>
</MudTabs>
Docs: https://mudblazor.com/components/breadcrumbs
<MudBreadcrumbs Items="_breadcrumbs" Separator=">" />
@code {
List<BreadcrumbItem> _breadcrumbs =
[
new("Home", "/"),
new("Accounts", "/accounts"),
new("Cash 1", null, disabled: true),
];
}
Docs: https://mudblazor.com/components/pagination
<MudPagination Count="_pageCount" @bind-Selected="_page"
Color="Color.Primary" BoundaryCount="1" MiddleCount="3" />
Docs: https://mudblazor.com/components/stepper
<MudStepper @bind-ActiveIndex="_step" Linear="true">
<MudStep Title="Basic info">
@* step content *@
</MudStep>
<MudStep Title="Confirm">
@* step content *@
</MudStep>
</MudStepper>
Docs: https://mudblazor.com/components/menu
@* Icon-activated menu (no activator wrapper needed) *@
<MudMenu Icon="@Icons.Material.Filled.MoreVert" Dense="true"
AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight">
<MudMenuItem Icon="@Icons.Material.Filled.Edit" OnClick="Edit">Edit</MudMenuItem>
<MudDivider />
<MudMenuItem Icon="@Icons.Material.Filled.Delete" OnClick="Delete">Delete</MudMenuItem>
</MudMenu>
@* Custom activator *@
<MudMenu @ref="_menu" Dense="true" AnchorOrigin="Origin.BottomLeft">
<ActivatorContent>
<MudButton EndIcon="@Icons.Material.Filled.KeyboardArrowDown"
Variant="Variant.Outlined" OnClick="@(_menu!.OpenMenuAsync)">
Options
</MudButton>
</ActivatorContent>
<ChildContent>
<MudMenuItem>Item 1</MudMenuItem>
</ChildContent>
</MudMenu>
AutoClose="false" on MudMenuItem keeps the menu open after click (useful for multi-select menus).
Docs: https://mudblazor.com/components/popover
<MudPopover Open="_open" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft"
Paper="true" Elevation="4" Class="pa-3">
<MudText>Popover content</MudText>
</MudPopover>
Docs: https://mudblazor.com/components/alert
<MudAlert Severity="Severity.Warning" Variant="Variant.Filled" Dense="true" ShowCloseIcon="true">
This is a warning message.
</MudAlert>
Severity: Normal, Info, Success, Warning, Error.
Docs: https://mudblazor.com/components/snackbar
@* In markup (required once, usually in MainLayout): *@
<MudSnackbarProvider />
// In code-behind:
[Inject] public ISnackbar Snackbar { get; set; } = default!;
Snackbar.Add("Saved!", Severity.Success);
Snackbar.Add("Error saving", Severity.Error, cfg => cfg.ShowCloseIcon = true);
ISnackbar is registered by builder.Services.AddMudServices().
Docs: https://mudblazor.com/components/dialog
@* Dialog definition (separate .razor file) *@
<MudDialog>
<TitleContent>Confirm delete</TitleContent>
<DialogContent>
<MudText>Are you sure?</MudText>
</DialogContent>
<DialogActions>
<MudButton OnClick="Cancel">Cancel</MudButton>
<MudButton Color="Color.Error" Variant="Variant.Filled" OnClick="Submit">Delete</MudButton>
</DialogActions>
</MudDialog>
@code {
[CascadingParameter] IMudDialogInstance MudDialog { get; set; } = default!;
void Cancel() => MudDialog.Cancel();
void Submit() => MudDialog.Close(DialogResult.Ok(true));
}
// Caller:
[Inject] public IDialogService DialogService { get; set; } = default!;
var result = await DialogService.ShowAsync<ConfirmDialog>("Confirm");
if (!result.Canceled) { /* proceed */ }
Always declare <MudDialogProvider /> in MainLayout.
Docs: https://mudblazor.com/components/skeleton
@if (_loading)
{
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="40px" Width="100%" Class="mb-2" />
<MudSkeleton SkeletonType="SkeletonType.Text" Width="60%" />
}
Docs: https://mudblazor.com/components/progresslinear
<MudProgressLinear Color="Color.Primary" Indeterminate="_loading" Class="mb-4" />
<MudProgressLinear Color="Color.Success" Value="_progress" Max="100" />
Docs: https://mudblazor.com/components/progresscircular
<MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Medium" />
Docs: https://mudblazor.com/components/overlay
<MudOverlay Visible="_busy" DarkBackground="true" Absolute="true" ZIndex="9999">
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
</MudOverlay>
Docs: https://mudblazor.com/components/tooltip
<MudTooltip Text="Click to add" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Add" />
</MudTooltip>
Docs: https://mudblazor.com/components/scrolltotop
<MudScrollToTop>
<MudFab Color="Color.Primary" StartIcon="@Icons.Material.Filled.ArrowUpward" Size="Size.Small" />
</MudScrollToTop>
Docs: https://mudblazor.com/components/virtualize
(Thin wrapper over Blazor's built-in <Virtualize> with MudBlazor styling.)
<MudList T="Row" Dense="true">
<Virtualize Items="_allRows" Context="row">
<MudListItem>@row.Description</MudListItem>
</Virtualize>
</MudList>
Docs: https://mudblazor.com/components/colorpicker
<MudColorPicker @bind-Text="_hexColor" Label="Colour"
Variant="Variant.Outlined" ColorPickerMode="ColorPickerMode.HEX" />
Docs: — (inline layout helper)
<MudAppBar>
<MudText>Left</MudText>
<MudSpacer />
<MudIconButton Icon="@Icons.Material.Filled.AccountCircle" />
</MudAppBar>
MudSpacer is simply flex: 1 1 auto — useful inside any flex container.
| Type | Values |
|---|---|
Variant | Text, Outlined, Filled |
Size | Small, Medium, Large |
Color | Default, Primary, Secondary, Tertiary, Success, Warning, Error, Info, Surface, Inherit |
Typo | h1–h6, subtitle1, subtitle2, body1, body2, button, caption, overline |
Adornment | None, Start, End |
Margin | None, Dense, Normal |
Origin | TopLeft, TopCenter, TopRight, CenterLeft, Center, CenterRight, BottomLeft, BottomCenter, BottomRight |
Severity | Normal, Info, Success, Warning, Error |
SelectionMode | SingleSelection, ToggleSelection, MultiSelection |
Placement | Top, Bottom, Left, Right, Start, End |
DrawerVariant | Temporary, Persistent, Mini, Responsive |
pa-{0-16} px-{n} py-{n} pt-{n} pb-{n} pl-{n} pr-{n} — padding
ma-{n} mx-{n} my-{n} mt-{n} mb-{n} ml-{n} mr-{n} — margin
d-flex d-block d-none d-inline-flex
flex-grow-1 flex-shrink-0 flex-column flex-row flex-wrap
align-center align-start align-end
justify-center justify-space-between justify-end
gap-{1-8}