Graphical components

This section references the Blazor components of Lagoon (Lg prefix). Each page details the properties, events, and public methods verified against the framework's source code.

The table below lists all documented components, grouped by use. Click on a component to access its reference page.

Interacting with users

Buttons & actions

Component	Description
LgButton	Standard button handling user actions (variants, icons, confirmation, link).
LgActionPanel	Horizontal area combining a main action on the left and a toolbar on the right.
LgCopyButton	Button that copies a value to the clipboard.
LgPasteButton	Button that pastes text from the clipboard.
LgLabelAction	Read-only value accompanied by a label and an action button.

Toolbars

Component	Description
LgToolbar	Toolbar container organizing buttons, groups, and menus.
LgToolbarButton	Button adapted for toolbars (rendered as button or menu item).
LgToolbarGroup	Groups multiple toolbar elements in a btn-group.
LgToolbarMenu	Adds a dropdown menu to a toolbar.
LgCrudToolbarButton	Toolbar button with secondary actions (rename, save, delete).

Navigation & links

Component	Description
LgHyperlink	Hyperlink.
LgNavLink	Navigation link with active state management.
LgNavigationBox	Navigation search area.

Editing & input

Component	Description
LgHtmlEditor	HTML editor (Jodit) bound to @bind-Value and validatable in an LgEditForm.
LgInputFile	Selection, upload, download, and deletion of attached files.

Modal windows

Component	Description
LgModal	Draggable modal window (title, content, footer, toolbar, close confirmation).

Labels & icons

Component	Description
LgIcon	Icon from the Lagoon library, with optional tooltip and click.
LgLabel	Translated label, associable to a field via the for attribute.
LgTitle	Section title rendered as h1 to h6.

Forms

Form & validation

Component	Description
LgEditForm	Edit form with validation (DataAnnotations, IValidatableObject, ModelState).
LgValidator	Adding custom validation errors (business rules, server errors) to the form.

Input fields

Component	Description
LgTextBox	Text field (simple, multiline, password, input mask).
LgNumericBox	Numeric input (format, decimals, rounding, increment buttons).
LgSummaryBox	Long text edited in a modal window, with optional HTML editor.
LgTagBox	Input of a list of text values as tags.
LgSuggestBox	Text field with suggestions filtered during input (local or remote source).
LgColorPickerBox	Color selection from a palette, with hexadecimal input.

Selection

Component	Description
LgSelect	Selection of a single value from a dropdown list.
LgCheckBox	Checkbox.
LgCheckBoxList	Multiple selection by checkbox list.
LgRadioGroup	Radio button group for single selection.
LgToggle	Boolean switch (on/off) with customizable text.

Date & time

Component	Description
LgDateBox	Input and selection of a day (calendar, bounds, formats).
LgMonthBox	Month selection.
LgWeekBox	Week selection (ISO number).
LgYearBox	Input and selection of a year (int).
LgTimeBox	Input of a time (mask or interactive clock).

Containers & layout

Frames

Component	Description
LgFrame	Structuring container (header, body, summary, footer, toolbar, collapsible).
LgFilterFrame	Ready-to-use filter panel (reset, advanced filters).

Other containers

Component	Description
LgAccordion	Accordion of LgAccordionPane panels with only one open at a time.
LgCard	Clickable, navigable, or commandable content card (+ LgCardSeparator, LgCardStripe).
LgPager	Pagination bar (known or unknown total pages).
LgSplitContainer	Two resizable panels separated by a grip.

Application structure

Menu

Component	Description
LgMenuConfiguration	Centralized declaration of the main menu, sidebar, and toolbars.
LgMenuItem	Navigation or action entry in the menu.
LgMenuTitle	Section title in the menu.
LgMenuSeparator	Separator line between menu action groups.

Tabs

Component	Description
LgTabContainer	Horizontal tabs (activation, opening, closing, moving, reloading).
LgSideTabContainer	Side tabs with resizable column.

Navigation aids

Component	Description
LgBreadcrumbTrail	Breadcrumb trail to locate the user in navigation.

Authorization

Component	Description
LgAuthorizeView	Conditions the display and editing of a UI area to policies.
LgCascadingPolicies	Propagates validated policies to a subtree of components.

Data & lists

Grids

Component	Description
LgGridView	Data grid (display, filter, sort, group, paginate, select, edit, export).

Grid columns

Component	Description
LgGridTextColumn	Text column (string value) and base for common parameters.
LgGridCustomColumn	Generic column linked to a value of any type.
LgGridBooleanColumn	Boolean column as a checkbox.
LgGridColorColumn	Color editing column from a palette.
LgGridDateColumn	Date column (day or month precision).
LgGridMonthColumn	Month column (MM/yyyy) of a date value.
LgGridWeekColumn	Week column (week number) of a date value.
LgGridYearColumn	Year column (yyyy) of a date value.
LgGridTimeColumn	Hour or duration column.
LgGridNumericColumn	Numeric column with formatting, prefix, and suffix.
LgGridEnumColumn	Enumeration column with selection filter.
LgGridEnumListColumn	Enumeration list column (multi-selection).
LgGridSelectColumn	Column linked to a data source for display, editing, and filtering.
LgGridSelectMultipleColumn	Column for editing and filtering a collection of values.
LgGridSelectionColumn	Row selection column (multiple or single).
LgGridImageColumn	Column displaying an image from a URL or computed path.
LgGridTagBoxColumn	Column of free text tags.
LgGridSummaryColumn	Column suited for long text and editable HTML content.
LgGridCommandColumn	Column displaying a button or command menu.
LgGridEditColumn	Inline editing column (Edit / Save / Cancel / Delete).
LgGridSeparatorColumn	Vertical separator column between column groups.

Timeline

Component	Description
LgTimelineContainer	Container of a series of LgTimelineStep steps in a horizontal timeline.
LgTimelineStep	Validatable step in a timeline (labels, central content, clickable state).

Sliders

Component	Description
LgSlider	Slider for selecting a single value on a bounded scale.
LgSliderRange	Slider for selecting a range between two bounds.

Other data presentations

Component	Description
LgCalendar	Annual or multi-month calendar, with one line per day.
LgListView	Customizable list with local or remote loading, sorting, filters, pagination, and selection.
LgTreeView	Collapsible tree structure for hierarchical data.
LgWorkScheduler	Interactive workload schedule (tasks, milestones, drag-and-drop).
LgLeafletMap	Leaflet map (Blazor container driven by the LeafletMap object).
LgDocument	Document display (image, video, frame) uploaded via a blob.
Charts (Chart.js)	Chart integration via a third-party package (no native component).

Feedback

Messages

Component	Description
LgBanner	Contextual information banner persistent on the page.
LgBigMessage	Full-page centered message (icon, title, description).
LgEmptyMessage	Empty state displayed when an area contains no data.
Toasts	Brief non-blocking feedback triggered by LgComponentBase methods.

Progress indicators

Component	Description
LgProgress	Horizontal progress bar (bounded or indeterminate).
LgCircleProgress	Compact circular progress.
LgLoaderView	Loading state automatically replaced by final content.

Notifications

Component	Description
LgNotificationMenuItem	Notification entry in the menu (icon, unread counter, list).
LgNotificationItem	Individual notification rendering.
LgNotificationCounter	Notification number badge.
Notification system	Notification system guide (module Lagoon.UI.Notifications).
WebPush Notifications	Browser notifications at the operating system level.
Remote Progress & Background Task	Tracking of a long-running server task via SignalR.