# Comprehensive Component Reference **NeoUI** - A comprehensive UI component library for Blazor inspired by shadcn/ui Version: 3.8.3 Target Framework: .NET 10+ Last Updated: 2026-03-30 > **Import Note (NeoUI 3.x):** Add `@using NeoUI.Blazor` to `_Imports.razor` once to access all > components globally. Chart components additionally require `@using NeoUI.Blazor.Charts`. > Service interfaces (`IToastService`, `IDialogService`, etc.) require `@using NeoUI.Blazor.Services`. --- ## 📋 Table of Contents ### Styled Components (100+) - [Accordion](#accordion) - [Alert](#alert) - [AlertDialog](#alertdialog) - [AspectRatio](#aspectratio) - [Avatar](#avatar) - [Badge](#badge) - [Breadcrumb](#breadcrumb) - [Button](#button) - [ButtonGroup](#buttongroup) - [Calendar](#calendar) - [Card](#card) - [Carousel](#carousel) - [Chart](#chart) - [CandlestickChart](#candlestickchart) - [Checkbox](#checkbox) - [Collapsible](#collapsible) - [ColorPicker](#colorpicker) - [Combobox](#combobox) - [Command](#command) - [ContextMenu](#contextmenu) - [CurrencyInput](#currencyinput) - [DataGrid](#datagrid) - [DataTable](#datatable) - [DataView](#dataview) - [DarkModeToggle](#darkmodetoggle) - [DatePicker](#datepicker) - [DateRangePicker](#daterangepicker) - [Dialog](#dialog) - [DialogHost](#dialoghost) - [Drawer](#drawer) - [DropdownMenu](#dropdownmenu) - [DynamicForm](#dynamicform) - [Empty](#empty) - [Field](#field) - [FileUpload](#fileupload) - [FilterBuilder](#filterbuilder) - [FunnelChart](#funnelchart) - [GaugeChart](#gaugechart) - [HeightAnimation](#heightanimation) - [HeatmapChart](#heatmapchart) - [HoverCard](#hovercard) - [Input](#input) - [InputGroup](#inputgroup) - [InputOtp](#inputotp) - [Item](#item) - [Kbd](#kbd) - [Label](#label) - [MarkdownEditor](#markdowneditor) - [MaskedInput](#maskedinput) - [Menubar](#menubar) - [Motion](#motion) - [MultiSelect](#multiselect) - [NativeSelect](#nativeselect) - [NavigationMenu](#navigationmenu) - [NumericInput](#numericinput) - [Pagination](#pagination) - [PageTransition](#pagetransition) - [Popover](#popover) - [Progress](#progress) - [RadioGroup](#radiogroup) - [RangeSlider](#rangeslider) - [Rating](#rating) - [Resizable](#resizable) - [RenderStateProvider](#renderstateprovider) - [ResponsiveNav](#responsivenav) - [RichTextEditor](#richtexteditor) - [ScrollArea](#scrollarea) - [Select](#select) - [SelectionIndicator](#selectionindicator) - [Separator](#separator) - [Sheet](#sheet) - [Sidebar](#sidebar) - [SidebarPillNav](#sidebarpillnav) - [Skeleton](#skeleton) - [Slider](#slider) - [Spinner](#spinner) - [SplitButton](#splitbutton) - [Switch](#switch) - [Sortable](#sortable) - [Tabs](#tabs) - [TagInput](#taginput) - [Textarea](#textarea) - [ThemeSwitcher](#themeswitcher) - [TimePicker](#timepicker) - [Timeline](#timeline) - [Toast](#toast) - [Toggle](#toggle) - [ToggleGroup](#togglegroup) - [Tooltip](#tooltip) - [TreeView](#treeview) - [Typography](#typography) --- ## 🎨 Styled Components Pre-styled components with shadcn/ui design, built on top of primitives. ### Accordion **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Vertically stacked collapsible content sections with smooth animations. Supports single or multiple panel expansion with keyboard navigation. **Components & Parameters:** #### `Accordion` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the accordion. Should include AccordionItem components. | | `Value` | `HashSet?` | | Controls which items are open (controlled mode). | | `ValueChanged` | `EventCallback>` | | Event callback invoked when the open items change. | | `DefaultValue` | `HashSet?` | | Default open items when in uncontrolled mode. | | `OnValueChange` | `EventCallback>` | | Event callback invoked when the open items change. | | `Type` | `AccordionType` | `AccordionType.Single` | Type of accordion (single or multiple). | | `Collapsible` | `bool` | `false` | Whether items can be collapsed when in single mode. | | `Class` | `string?` | | Additional CSS classes to apply to the accordion. | #### `AccordionContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ForceMount` | `bool` | `true` | Whether to force mount the content even when closed. When true (default), enables smooth CSS animations. When false, content unmounts when closed (no animation, lower memory). | | `ChildContent` | `RenderFragment?` | | The child content to render when the item is open. | | `Class` | `string?` | | Additional CSS classes to apply to the content. | #### `AccordionItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Disabled` | `bool` | | Whether this accordion item is disabled. | | `ChildContent` | `RenderFragment?` | | The child content to render within the accordion item. | | `Class` | `string?` | | Additional CSS classes to apply to the accordion item. | #### `AccordionTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the trigger. | | `Class` | `string?` | | Additional CSS classes to apply to the trigger. | **Basic Usage:** ```razor Is it accessible? Yes. It adheres to WCAG 2.1 AA standards. Is it styled? Yes. It comes with default shadcn/ui styles. ``` --- ### Alert **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Status messages and callouts with multiple variants (default, destructive). Used to display important information to users. **Components & Parameters:** #### `Alert` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Variant` | `AlertVariant` | `AlertVariant.Default` | Gets or sets the visual style variant of the alert. Controls the color scheme and visual appearance using CSS custom properties. Default value is . | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the alert. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the alert. Typically contains AlertTitle, AlertDescription, and optionally an icon. For accessibility, ensure meaningful content is provided. | #### `AlertDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the alert description. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the alert description. | #### `AlertTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the alert title. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the alert title. | **Basic Usage:** ```razor @* Default alert *@ Note This is an informational message. @* Destructive alert *@ Error Something went wrong. Please try again. @* With icon *@ Information Check your email for confirmation. ``` --- ### AlertDialog **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Modal dialog for critical confirmations requiring user action. Prevents accidental destructive actions with explicit confirm/cancel buttons. **Components & Parameters:** #### `AlertDialog` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the alert dialog. | | `Open` | `bool?` | | Controls whether the alert dialog is open (controlled mode). When null, the dialog manages its own state (uncontrolled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. Use with @bind-Open for two-way binding. | | `DefaultOpen` | `bool` | `false` | Default open state when in uncontrolled mode. | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the dialog open state changes. | #### `AlertDialogAction` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render as the action button. | #### `AlertDialogCancel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render as the cancel button. | #### `AlertDialogContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the alert dialog. | | `Class` | `string?` | | Additional CSS classes to apply to the alert dialog content. | | `CloseOnEscape` | `bool` | `true` | Whether the alert dialog can be closed with the Escape key. Default is true for accessibility. | #### `AlertDialogDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `AlertDialogFooter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `AlertDialogHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `AlertDialogTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `AlertDialogTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render as the trigger. | **Basic Usage:** ```razor Are you absolutely sure? This action cannot be undone. This will permanently delete your account. ``` --- ### AspectRatio **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Display content within a desired width/height ratio. Maintains consistent proportions across different screen sizes. **Components & Parameters:** #### `AspectRatio` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render within the aspect ratio container. | | `Ratio` | `double` | `1.0` | The desired aspect ratio (width / height). Default is 1 (square). Common values: 16/9 = 1.778, 4/3 = 1.333, 1/1 = 1. | | `Class` | `string?` | | Additional CSS classes to apply to the container. | **Basic Usage:** ```razor @* 16:9 video container *@ Photo @* Square 1:1 *@ Avatar @* 4:3 classic *@ ``` --- ### Avatar **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** User avatars with image fallback support. Displays user profile pictures with automatic fallback to initials or placeholder. **Components & Parameters:** #### `Avatar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to render inside the avatar. Typically contains AvatarImage and AvatarFallback components. The first successfully loaded content will be displayed. | | `Size` | `AvatarSize` | `AvatarSize.Default` | Gets or sets the size variant of the avatar. Controls the dimensions and font-size of the avatar. Default value is . | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the avatar container. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | #### `AvatarFallback` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to render as fallback. Typically contains: - User initials (e.g., "JD" for John Doe) - An icon component (e.g., LucideIcon with "user") - Custom markup or components Content is automatically centered within the avatar. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the fallback container. Custom classes are appended after the component's base classes, allowing for style overrides such as custom background colors. | #### `AvatarImage` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Source` | `string?` | | Gets or sets the URL of the image to display. Should be a valid image URL. If the image fails to load, the component will hide and defer to AvatarFallback. | | `Alt` | `string?` | | Gets or sets the alternative text for the image. Essential for accessibility. Screen readers use this to describe the image to visually impaired users. Should describe who the avatar represents (e.g., "John Doe", "User avatar"). | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the image. Custom classes are appended after the component's base classes. | **Basic Usage:** ```razor @* Avatar with image *@ UN @* Avatar with fallback initials *@ JD @* Avatar group *@
U1 U2
``` --- ### Badge **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Status badges and labels with multiple variants. Used to highlight status, categories, or counts. **Components & Parameters:** #### `Badge` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Variant` | `BadgeVariant` | `BadgeVariant.Default` | Gets or sets the visual style variant of the badge. Controls the color scheme and visual appearance using CSS custom properties. Default value is . | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the badge. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the badge. Typically contains short text (1-2 words) or a small number. For accessibility, ensure the content is meaningful. | **Basic Usage:** ```razor @* Default badge *@ Default @* Variant badges *@ Secondary Destructive Outline @* With icon *@ Verified ``` --- ### Breadcrumb **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Hierarchical navigation with customizable separators. Shows current location within site hierarchy. **Components & Parameters:** #### `Breadcrumb` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `AriaLabel` | `string` | `"breadcrumb"` | Gets or sets the aria-label for the breadcrumb navigation. Provides accessible label for screen readers. Default value is "breadcrumb". | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the breadcrumb. | #### `BreadcrumbEllipsis` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb ellipsis. | #### `BreadcrumbItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb item. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the breadcrumb item. | #### `BreadcrumbLink` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Href` | `string?` | | Gets or sets the href attribute for the link. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb link. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the breadcrumb link. | #### `BreadcrumbList` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb list. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the breadcrumb list. | #### `BreadcrumbPage` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb page. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the breadcrumb page. | #### `BreadcrumbSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the breadcrumb separator. | | `ChildContent` | `RenderFragment?` | | Gets or sets custom content for the separator. If not provided, a default chevron icon is used. | **Basic Usage:** ```razor Home Products Product Details ``` --- ### Button **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Interactive button component with multiple variants (default, destructive, outline, secondary, ghost, link) and sizes. Supports icons, disabled states, and full keyboard navigation. **Components & Parameters:** #### `Button` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Variant` | `ButtonVariant` | `ButtonVariant.Default` | Gets or sets the visual style variant of the button. Controls the color scheme and visual appearance using CSS custom properties. Default value is . | | `Size` | `ButtonSize` | `ButtonSize.Default` | Gets or sets the size of the button. Controls padding, font size, and overall dimensions. Default value is . All sizes maintain minimum touch target sizes (44x44px) for accessibility. | | `Type` | `ButtonType` | `ButtonType.Button` | Gets or sets the HTML button type attribute. Controls form submission behavior when button is inside a form. Default value is to prevent accidental form submissions. | | `Disabled` | `bool` | | Gets or sets whether the button is disabled. When disabled: - Button cannot be clicked or focused - Opacity is reduced (via disabled:opacity-50 Tailwind class) - Pointer events are disabled (via disabled:pointer-events-none) - aria-disabled attribute is set to true | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the button. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `OnClick` | `EventCallback` | | Gets or sets the callback invoked when the button is clicked. The event handler receives a parameter with click details. If the button is disabled, this callback will not be invoked. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the button. Can contain text, icons, or any other Blazor markup. For icon-only buttons, use and provide an aria-label. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the button. Required for icon-only buttons to provide accessible text for screen readers. Optional for buttons with text content. | | `Icon` | `RenderFragment?` | | Gets or sets the icon to display in the button. Can be any RenderFragment (SVG, icon font, image). Position is controlled by . Automatically adds RTL-aware spacing between icon and text. | | `IconPosition` | `IconPosition` | `IconPosition.Start` | Gets or sets the position of the icon relative to the button text. Default value is (before text in LTR). Automatically adapts to RTL layouts using Tailwind directional utilities. | **Basic Usage:** ```razor @* Simple button *@ @* With variant and size *@ @* With icon *@ @* Icon-only button *@ ``` --- ### ButtonGroup **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Visually grouped related buttons with connected styling. Groups multiple buttons as a cohesive unit with shared borders. **Components & Parameters:** #### `ButtonGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Orientation` | `ButtonGroupOrientation` | `ButtonGroupOrientation.Horizontal` | Gets or sets the orientation of the button group. Controls whether buttons are arranged horizontally (default) or vertically. Default value is . | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the button group. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the button group. Provides an accessible name for the group when role="group" is used. Important for screen reader users to understand the group's purpose. Recommended for button groups that perform a specific function (e.g., "Text formatting", "Email actions"). | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the button group. Typically contains Button components, but can also contain nested ButtonGroup components for creating complex layouts. | #### `ButtonGroupSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Orientation` | `SeparatorOrientation` | `SeparatorOrientation.Vertical` | Gets or sets the orientation of the separator. Should match the parent ButtonGroup's orientation. Default value is (for horizontal button groups). | | `Decorative` | `bool` | `true` | Gets or sets whether the separator is purely decorative. When true (default), the separator is treated as decorative and hidden from assistive technologies. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the separator. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | #### `ButtonGroupText` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the text container. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the text container. Can contain text, icons, or any other markup. Icons will automatically be sized to match the button group's icon size. | **Basic Usage:** ```razor @* With active state *@ ``` --- ### Calendar **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Date selection grid with month navigation. Interactive calendar for selecting single dates or date ranges. **Components & Parameters:** #### `Calendar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `SelectedDate` | `DateOnly?` | | The currently selected date. | | `SelectedDateChanged` | `EventCallback` | | Event callback invoked when the selected date changes. | | `MinDate` | `DateOnly?` | | The minimum selectable date. | | `MaxDate` | `DateOnly?` | | The maximum selectable date. | | `Culture` | `CultureInfo` | `CultureInfo.CurrentCulture` | The culture to use for formatting. Default is the current culture. | | `InitialMonth` | `DateOnly?` | | The initial month to display. Defaults to the selected date's month or current month. | | `IsDateDisabled` | `Func?` | | Function to determine if a specific date is disabled. | | `Class` | `string?` | | Additional CSS classes to apply to the calendar. | | `RowClass` | `string?` | | Additional CSS classes to apply to each week row in the day grid. | | `CaptionLayout` | `CalendarCaptionLayout` | `CalendarCaptionLayout.Label` | The caption layout mode for month/year display. Default is Label (static text). Dropdown allows quick month/year selection. | | `YearRange` | `int` | `20` | The number of years to show before and after the current year in dropdown mode. Default is 20 years in each direction. | | `RangeStart` | `DateOnly?` | | The start date of a range selection (for visual styling). | | `RangeEnd` | `DateOnly?` | | The end date of a range selection (for visual styling). | | `DisplayedMonthChanged` | `EventCallback` | | Event callback invoked when the displayed month changes. This fires whenever the user navigates to a different month via buttons, keyboard, or dropdown. | **Basic Usage:** ```razor @* Simple calendar *@ @* Date range calendar *@ @* With disabled dates *@ @code { private DateTime? selectedDate = DateTime.Today; private DateRange? dateRange; private HashSet disabledDates = new() { DateTime.Today.AddDays(1) }; } ``` --- ### Card **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Container for grouped content with header, body, and footer sections. Flexible component for displaying information, forms, or actions. **Components & Parameters:** #### `Card` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the card. Typically contains CardHeader, CardContent, and CardFooter components. Can contain any Blazor markup. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | #### `CardAction` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered in the card action area. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card action area. | #### `CardContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the card content area. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card content. | #### `CardDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered as the card description. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card description. | #### `CardFooter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the card footer. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card footer. | #### `CardHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the card header. Typically contains CardTitle, CardDescription, and optionally CardAction. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card header. | #### `CardTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered as the card title. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the card title. | **Basic Usage:** ```razor Card Title Card description goes here

Main content of the card.

 ``` --- ### Carousel **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Slideshow component with touch gestures and animations. Displays content in a rotating carousel with navigation controls. **Components & Parameters:** #### `Carousel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content containing CarouselItem components. | | `Orientation` | `CarouselOrientation` | `CarouselOrientation.Horizontal` | Orientation of the carousel. Default is Horizontal. | | `ShowNavigation` | `bool` | `true` | Whether to show navigation arrows. Default is true. | | `ShowIndicators` | `bool` | `false` | Whether to show dot indicators. Default is false. | | `AutoPlay` | `bool` | `false` | Whether to enable auto-play. Default is false. | | `AutoPlayInterval` | `int` | `3000` | Auto-play interval in milliseconds. Default is 3000. | | `Loop` | `bool` | `false` | Whether to enable loop (infinite scroll). Default is false. | | `SlidesPerView` | `int` | `1` | Number of slides to show at once. Default is 1. | | `Gap` | `int` | `0` | Gap between slides in pixels. Default is 0. | | `EnableDrag` | `bool` | `false` | Whether to enable drag gestures. Default is false. | | `Class` | `string?` | | Additional CSS classes for the carousel container. | | `ContentClass` | `string?` | | Additional CSS classes for the inner content container that holds the slides. | | `OnSlideChange` | `EventCallback` | | Event callback invoked when the current slide index changes. | #### `CarouselItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content of the carousel item. | | `Class` | `string?` | | Additional CSS classes for the item. | **Basic Usage:** ```razor

Slide 1

Slide 2

 ``` --- ### Chart **Package:** `NeoUI.Blazor.Charts` **Namespace:** `NeoUI.Blazor.Charts` **Installation:** ```bash dotnet add package NeoUI.Blazor.Charts --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor.Charts ``` **Description:** Beautiful data visualizations with multiple chart types including Area, Bar, Composed, Line, Pie, Radar, Radial Bar, and Scatter charts. **Components & Parameters:** #### `Area` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the area color (legacy, use Fill instead). | | `Emphasis` | `bool` | `false` | Gets or sets whether emphasis is enabled. | | `Focus` | `Focus` | `Focus.None` | Gets or sets the focus behavior. | | `ShowDots` | `bool` | `false` | Gets or sets whether to show dots at data points. | | `LineWidth` | `int` | `1` | Gets or sets the line width in pixels. | | `Opacity` | `double?` | | Gets or sets the opacity for the area fill (0.0 to 1.0). Maps to series.areaStyle.opacity. If Fill.Opacity is also set, Fill.Opacity takes precedence. | | `StackId` | `string?` | | Gets or sets the stack group ID for stacked areas. | | `Interpolation` | `InterpolationType` | `InterpolationType.Natural` | Gets or sets the interpolation type for the area. | #### `AreaChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `StackOffset` | `StackOffset` | `StackOffset.None` | Gets or sets the stack offset mode for percentage stacking. | #### `AxisLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool?` | | Gets or sets whether to show axis labels. | | `Rotate` | `int?` | | Gets or sets the rotation angle in degrees (clockwise). Common value: -45. | | `Formatter` | `string?` | | Gets or sets the formatter string. Can be an ECharts template string or JavaScript function. Examples: "{value}", "function(value) { return value + '%'; }" | | `Interval` | `int?` | | Gets or sets the interval for showing labels. Shows every Nth label. | | `Inside` | `bool?` | | Gets or sets whether to render labels inside the chart area. | | `Margin` | `int?` | | Gets or sets the distance to the axis line in pixels. | | `HideOverlap` | `bool?` | | Gets or sets whether to hide overlapping labels. | | `Color` | `string?` | | Gets or sets the label color. CSS variable or hex color. | | `FontSize` | `int?` | | Gets or sets the font size in pixels. | | `FontFamily` | `string?` | | Gets or sets the font family. | | `FontWeight` | `string?` | | Gets or sets the font weight. E.g., "normal", "bold", "600". | | `LineHeight` | `int?` | | Gets or sets the line height in pixels. | | `Align` | `string?` | | Gets or sets the horizontal text alignment. E.g., "left", "center", "right". | | `VerticalAlign` | `string?` | | Gets or sets the vertical text alignment. E.g., "top", "middle", "bottom". | | `Overflow` | `string?` | | Gets or sets the overflow behavior. E.g., "truncate", "break", "breakAll". | | `Width` | `int?` | | Gets or sets the maximum width for label text. | | `Ellipsis` | `string?` | | Gets or sets the ellipsis character for truncated text. | #### `Bar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the bar color (legacy, use Fill instead). | | `Emphasis` | `bool` | `false` | Gets or sets whether emphasis is enabled. | | `Focus` | `Focus` | `Focus.None` | Gets or sets the focus behavior. | | `StackId` | `string?` | | Gets or sets the stack group ID for stacked bars. | | `Radius` | `int?` | | Gets or sets the border radius for bar corners. | | `Opacity` | `double?` | | Gets or sets the opacity for the bars (0.0 to 1.0). Maps to series.itemStyle.opacity. | #### `BarChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Layout` | `BarLayout` | `BarLayout.Vertical` | Gets or sets the bar chart layout (vertical or horizontal). | | `StackOffset` | `StackOffset` | `StackOffset.None` | Gets or sets the stack offset mode for percentage stacking. | #### `CenterLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Text` | `string?` | | Gets or sets the text to display in the center. | | `FontSize` | `double?` | | Gets or sets the font size. | | `Color` | `string?` | | Gets or sets the text color. | | `FontWeight` | `string?` | | Gets or sets the font weight. | #### `ChartContainer` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes. | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content. | #### `ChartDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the child content. | #### `ChartEmptyState` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Height` | `int` | `350` | Gets or sets the height of the empty state in pixels. | | `Title` | `string` | `"No data available"` | Gets or sets the title text to display. | | `Description` | `string?` | | Gets or sets the description text to display. | | `ShowIcon` | `bool` | `true` | Gets or sets whether to show the chart icon. | | `Content` | `RenderFragment?` | | Gets or sets custom content to display instead of the default message. | | `Class` | `string?` | | Gets or sets additional CSS classes. | #### `ChartHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the child content. | #### `ChartSkeleton` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Height` | `int` | `350` | Gets or sets the height of the skeleton in pixels. | | `BarCount` | `int` | `8` | Gets or sets the number of skeleton bars to display. | | `Class` | `string?` | | Gets or sets additional CSS classes. | #### `ChartTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the child content. | #### `ComposedChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | *(No parameters)* | | | | #### `Fill` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the fill color. | | `Opacity` | `double?` | | Gets or sets the fill opacity. | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content (for LinearGradient). | #### `Grid` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool` | `true` | Gets or sets whether to show grid lines. | | `Horizontal` | `bool` | `true` | Gets or sets whether to show horizontal grid lines. | | `Vertical` | `bool` | `true` | Gets or sets whether to show vertical grid lines. | | `Stroke` | `string?` | | Gets or sets the stroke color for grid lines. | | `StrokeWidth` | `int?` | | Gets or sets the stroke width for grid lines in pixels. Maps to grid line lineStyle.width. | | `StrokeType` | `LineStyleType` | `LineStyleType.Solid` | Gets or sets the stroke/line type for grid lines. Maps to grid line lineStyle.type. | | `Opacity` | `double?` | | Gets or sets the opacity for grid lines (0.0 to 1.0). Maps to grid line lineStyle.opacity. | #### `LabelLine` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool` | `true` | Whether to show the label line. | | `Length` | `double?` | | Length of the first segment (in pixels). | | `Length2` | `double?` | | Length of the second segment (in pixels). | | `Smooth` | `bool?` | | Whether to use smooth curved lines. When true, label lines will be smoothly curved. When false or null, label lines will be straight. | #### `LabelList` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Position` | `LabelPosition` | `LabelPosition.Top` | Label position. | | `Formatter` | `string?` | | Label formatter (template string or JS function string). | | `Color` | `string?` | | Label text color. | | `FontSize` | `double?` | | Label font size. | | `Offset` | `double?` | | Label offset from data point. | | `Show` | `bool` | `true` | Whether to show labels. | #### `Legend` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool` | `true` | Gets or sets whether to show the legend. | | `Layout` | `LegendLayout` | `LegendLayout.Horizontal` | Gets or sets the legend layout orientation. | | `Align` | `LegendAlign` | `LegendAlign.Center` | Gets or sets the horizontal alignment of the legend. | | `VerticalAlign` | `LegendVerticalAlign` | `LegendVerticalAlign.Top` | Gets or sets the vertical alignment of the legend. | | `MarginTop` | `int` | `0` | Gets or sets the top margin in pixels (applies only when VerticalAlign is Top). | | `Icon` | `LegendIcon` | `LegendIcon.Circle` | Gets or sets the icon type for legend items. Maps to ECharts legend.icon property. | | `TextColor` | `string?` | | Gets or sets the text color for legend labels. Supports CSS variables like 'var(--foreground)'. | #### `Line` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the line color (legacy, use Fill instead). | | `Emphasis` | `bool` | `false` | Gets or sets whether emphasis is enabled. | | `Focus` | `Focus` | `Focus.None` | Gets or sets the focus behavior. | | `ShowDots` | `bool` | `false` | Gets or sets whether to show dots at data points. | | `DotSize` | `int` | `4` | Gets or sets the size of dots/symbols at data points in pixels. Maps to series.symbolSize. | | `DotShape` | `SymbolShape` | `SymbolShape.EmptyCircle` | Gets or sets the shape of dots/symbols at data points. Maps to series.symbol. | | `LineWidth` | `int` | `1` | Gets or sets the line width in pixels. | | `Opacity` | `double?` | | Gets or sets the opacity for the line (0.0 to 1.0). Maps to series.lineStyle.opacity or itemStyle.opacity. | | `Dashed` | `bool` | `false` | Gets or sets whether the line should be dashed. | | `Interpolation` | `InterpolationType` | `InterpolationType.Natural` | Gets or sets the interpolation type for the line. | #### `LineChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | *(No parameters)* | | | | #### `LinearGradient` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Direction` | `GradientDirection` | `GradientDirection.Vertical` | Gets or sets the gradient direction. | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content (for Stop components). | #### `Pie` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `InnerRadius` | `string?` | | Gets or sets the inner radius for donut charts (e.g., "60" or "60%"). | | `OuterRadius` | `string` | `"75%"` | Gets or sets the outer radius (e.g., "75%", "80%", "200"). Controls the overall size of the pie chart. | | `StartAngle` | `int` | `90` | Gets or sets the start angle in degrees (0-360). 90 = top, 0 = right, 180 = bottom, 270 = left. | | `EndAngle` | `int` | `450` | Gets or sets the end angle in degrees. For full circle: StartAngle + 360. For semi-circle gauge: StartAngle + 180. | | `RoseType` | `string?` | | Gets or sets the rose chart type. "radius" - radius represents value (Nightingale rose chart). "area" - area represents value. null - normal pie chart. | | `PadAngle` | `int` | `0` | Gets or sets the padding angle between slices in degrees. | | `Center` | `string[]?` | | Gets or sets the center position as [x, y] (e.g., ["50%", "50%"]). | | `SelectedMode` | `string?` | | Gets or sets the selection mode. "single" - single slice selection. "multiple" - multiple slice selection. null/false - no selection. | | `SelectedOffset` | `int` | `10` | Gets or sets the offset distance when slice is selected (pixels). | | `MinAngle` | `int` | `0` | Gets or sets the minimum angle for a slice to be visible (degrees). Small value slices below this threshold will be hidden. | | `Colors` | `string[]?` | | Custom color palette for slices. Colors are distributed by index and wrap automatically. `null` = auto CSS-variable palette (`--chart-1` … `--chart-5`). | | `ShowLabelLine` | `bool` | `true` | Gets or sets whether to show label lines. | | `EmphasisScale` | `bool?` | | Gets or sets whether to enable emphasis (hover) scaling. | | `EmphasisScaleSize` | `int?` | | Gets or sets the emphasis scale size in pixels (default 5-10). | | `EmphasisFocus` | `string?` | | Gets or sets the emphasis focus mode ("self", "series", "none"). | | `EmphasisShowLabel` | `bool?` | | Gets or sets whether to show labels on hover (emphasis). | | `EmphasisLabelFormatter` | `string?` | | Gets or sets the label formatter for emphasis state. | #### `PieChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | *(No parameters)* | | | | #### `PolarGrid` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Type` | `PolarGridType` | `PolarGridType.Circle` | Gets or sets the grid type (Circle or Polygon). | | `Show` | `bool` | `true` | Gets or sets whether to show the grid. | | `Stroke` | `string?` | | Gets or sets the grid line color. | | `StrokeWidth` | `int?` | | Gets or sets the grid line width. | | `SplitNumber` | `int` | `5` | Gets or sets the number of split levels (concentric rings). | | `ShowAxisLine` | `bool` | `true` | Gets or sets whether to show the angle axis line. | | `ShowSplitLine` | `bool` | `true` | Gets or sets whether to show split lines. | #### `Radar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the series color (legacy, use Fill instead). | | `Emphasis` | `bool` | `false` | Gets or sets whether emphasis is enabled. | | `Focus` | `Focus` | `Focus.None` | Gets or sets the focus behavior. | | `FillArea` | `bool` | `false` | Gets or sets whether to fill the radar area. | | `AreaOpacity` | `double?` | | Gets or sets the area fill opacity (0.0 to 1.0). Only applies when FillArea is true. | | `LineWidth` | `int` | `2` | Gets or sets the line width in pixels. | #### `RadarChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | *(No parameters)* | | | | #### `RadarGrid` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Shape` | `RadarShape` | `RadarShape.Polygon` | Gets or sets the radar grid shape. | | `SplitNumber` | `int` | `5` | Gets or sets the number of split levels (concentric grid lines). | | `Radius` | `string` | `"75%"` | Gets or sets the radar radius relative to container (e.g., "75%", "200"). | | `Center` | `string[]?` | | Gets or sets the center position [x, y] (e.g., ["50%", "50%"]). | | `ShowAxisLine` | `bool` | `true` | Gets or sets whether to show axis lines (spokes). | | `ShowSplitLine` | `bool` | `true` | Gets or sets whether to show split lines (rings). | | `AxisLineColor` | `string?` | | Gets or sets the axis line color. | | `AxisLineWidth` | `int?` | | Gets or sets the axis line width. | | `SplitLineColor` | `string?` | | Gets or sets the split line color. | | `SplitLineWidth` | `int?` | | Gets or sets the split line width. | | `ShowIndicatorLabels` | `bool` | `true` | Gets or sets whether to show radar indicator labels (axis names like "Coding", "Design", etc.). | | `IndicatorColor` | `string?` | | Gets or sets the text color for radar indicator labels. Supports CSS variables like 'var(--foreground)'. | | `IndicatorFontSize` | `int?` | | Gets or sets the font size for radar indicator labels. | | `IndicatorFontWeight` | `string?` | | Gets or sets the font weight for radar indicator labels (e.g., "normal", "bold"). | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content. | #### `RadialBar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the series color (legacy, use Fill instead). | | `InnerRadius` | `string?` | | Gets or sets the inner radius (e.g., "60%" or "60"). | | `OuterRadius` | `string?` | | Gets or sets the outer radius (e.g., "80%" or "80"). | | `CornerRadius` | `int?` | | Gets or sets the corner radius for rounded bars. | | `StackId` | `string?` | | Gets or sets the stack group ID for stacked radial bars. | | `ShowBackground` | `bool` | `false` | Gets or sets whether to show a background track. | | `BackgroundColor` | `string?` | | Gets or sets the background track color. | | `BackgroundOpacity` | `double?` | `0.1` | Gets or sets the background track opacity (0.0 to 1.0). | #### `RadialBarChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `StartAngle` | `int` | `90` | Gets or sets the start angle in degrees (0-360). 90 = top, 0 = right, 180 = bottom, 270 = left. | | `EndAngle` | `int` | `450` | Gets or sets the end angle in degrees. For full circle: 450 (90 + 360). For semi-circle gauge: 270 (90 + 180). | | `Clockwise` | `bool` | `true` | Gets or sets whether angle axis runs clockwise. | | `RadiusMin` | `double?` | `0` | Gets or sets the minimum value for the radius axis. | | `RadiusMax` | `double?` | | Gets or sets the maximum value for the radius axis. | #### `Scatter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | Gets or sets the marker color (legacy, use Fill instead). Note: Scatter uses XAxis.DataKey and YAxis.DataKey for X/Y coordinates. | | `SymbolSize` | `int` | `10` | Gets or sets the size of scatter symbols in pixels. Maps to series.symbolSize. | | `Symbol` | `SymbolShape` | `SymbolShape.Circle` | Gets or sets the shape of scatter symbols. Maps to series.symbol. | | `Emphasis` | `bool` | `false` | Gets or sets whether emphasis is enabled. | | `Focus` | `Focus` | `Focus.None` | Gets or sets the focus behavior. | | `SymbolSizeFunction` | `string?` | | Gets or sets a JavaScript function string to dynamically calculate symbol size. Example: "function(data) { return data[2] / 100; }" for bubble charts. If set, overrides SymbolSize parameter. | | `SymbolRotate` | `int?` | | Gets or sets the symbol rotation in degrees. | | `BorderColor` | `string?` | | Gets or sets the border color for scatter symbols. | | `BorderWidth` | `int?` | | Gets or sets the border width for scatter symbols in pixels. | | `Large` | `bool` | `false` | Gets or sets whether to enable large dataset optimization (10K+ points). | | `LargeThreshold` | `int?` | `2000` | Gets or sets the threshold for enabling large mode automatically. | | `Progressive` | `int?` | | Gets or sets the progressive rendering chunk size for huge datasets. | | `Clip` | `bool` | `true` | Gets or sets whether to clip points outside axis range. | #### `ScatterChart` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | *(No parameters)* | | | | #### `Stop` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Opacity` | `double?` | | Gets or sets the opacity at this stop. | #### `Tooltip` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool` | `true` | Gets or sets whether to show the tooltip. | | `Mode` | `TooltipMode?` | | Gets or sets the tooltip trigger mode. Default depends on chart type (see spec section 4.4). | | `Cursor` | `TooltipCursor` | `TooltipCursor.None` | Gets or sets the cursor/axis pointer type. | | `Formatter` | `string?` | | Gets or sets the formatter string. Can be either an ECharts template string or a JavaScript function as a string. Examples: - Template: "{b}: {c}" - Function: "function(params) { return params.name + ': ' + params.value; }" | | `BackgroundColor` | `string?` | | Gets or sets the background color for the tooltip. Maps to tooltip.backgroundColor. | | `BorderColor` | `string?` | | Gets or sets the border color for the tooltip. Maps to tooltip.borderColor. | | `BorderWidth` | `int?` | | Gets or sets the border width for the tooltip in pixels. Maps to tooltip.borderWidth. | | `TextColor` | `string?` | | Gets or sets the text color for the tooltip. Maps to tooltip.textStyle.color. | | `AppendToBody` | `bool?` | | When `true`, appends the tooltip DOM to `document.body` instead of nesting inside the chart container. Prevents clipping inside `overflow:hidden` ancestors. Maps to ECharts `tooltip.appendToBody`. | #### `XAxis` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool` | `true` | Gets or sets whether to show the X axis. | | `DataKey` | `string?` | | Gets or sets the data key for X axis values. | | `Scale` | `AxisScale` | `AxisScale.Auto` | Gets or sets the scale type for the axis. | | `Min` | `double?` | | Gets or sets the minimum value for the axis. Maps to xAxis.min. | | `Max` | `double?` | | Gets or sets the maximum value for the axis. Maps to xAxis.max. | | `Interval` | `double?` | | Gets or sets the interval of axis ticks. Maps to xAxis.interval. | | `AxisLine` | `bool` | `true` | Gets or sets whether to show the axis line. | | `TickLine` | `bool` | `true` | Gets or sets whether to show tick lines. | | `Color` | `string?` | | Gets or sets the color of the axis line. Maps to axisLine.lineStyle.color. | | `Width` | `int?` | | Gets or sets the width of the axis line in pixels. Maps to axisLine.lineStyle.width. | | `TickColor` | `string?` | | Gets or sets the color of the tick lines. Maps to axisTick.lineStyle.color. | | `TickWidth` | `int?` | | Gets or sets the width of the tick lines in pixels. Maps to axisTick.lineStyle.width. | | `BoundaryGap` | `bool?` | | Gets or sets whether there is a gap on both sides of the axis. Default is null (auto). For bar charts, this leaves space on both sides. For line charts, this is typically set to false to have data points at the edges. Maps to xAxis.boundaryGap. | | `IndicatorMin` | `double?` | | Gets or sets the minimum value for this radar indicator. Only applies to RadarChart. | | `IndicatorMax` | `double?` | | Gets or sets the maximum value for this radar indicator. Only applies to RadarChart. | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content for nested components (e.g., AxisLabel). | #### `YAxis` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Show` | `bool` | `true` | Gets or sets whether to show the Y axis. | | `DataKey` | `string?` | | Gets or sets the data key for Y axis values. | | `Scale` | `AxisScale` | `AxisScale.Auto` | Gets or sets the scale type for the axis. | | `Position` | `YAxisPosition` | `YAxisPosition.Left` | Gets or sets the position of the Y axis (left or right). Maps to yAxis.position. | | `Min` | `double?` | | Gets or sets the minimum value for the axis. Maps to yAxis.min. | | `Max` | `double?` | | Gets or sets the maximum value for the axis. Maps to yAxis.max. | | `Interval` | `double?` | | Gets or sets the interval of axis ticks. Maps to yAxis.interval. | | `AxisLine` | `bool` | `true` | Gets or sets whether to show the axis line. | | `TickLine` | `bool` | `true` | Gets or sets whether to show tick lines. | | `Color` | `string?` | | Gets or sets the color of the axis line. Maps to axisLine.lineStyle.color. | | `Width` | `int?` | | Gets or sets the width of the axis line in pixels. Maps to axisLine.lineStyle.width. | | `TickColor` | `string?` | | Gets or sets the color of the tick lines. Maps to axisTick.lineStyle.color. | | `TickWidth` | `int?` | | Gets or sets the width of the tick lines in pixels. Maps to axisTick.lineStyle.width. | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content for nested components (e.g., AxisLabel). | **Basic Usage:** ```razor @* Line Chart *@ @* Bar Chart *@ @code { private List chartData = new() { new() { Name = "Jan", Value = 100 }, new() { Name = "Feb", Value = 200 } }; } ``` --- ### Checkbox **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Accessible checkbox with indeterminate state support. Binary selection control with support for partial selections. **Components & Parameters:** #### `Checkbox` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Checked` | `bool` | | Gets or sets whether the checkbox is checked. This property supports two-way binding using the @bind-Checked directive. Changes to this property trigger the CheckedChanged event callback. | | `CheckedChanged` | `EventCallback` | | Gets or sets the callback invoked when the checked state changes. This event callback enables two-way binding with @bind-Checked. It is invoked whenever the user toggles the checkbox state. Also notifies EditContext for form validation. | | `Indeterminate` | `bool` | | Gets or sets whether the checkbox is in an indeterminate state. The indeterminate state is typically used for "select all" checkboxes when only some child items are selected. When indeterminate is true, a dash icon is displayed instead of a checkmark. | | `IndeterminateChanged` | `EventCallback` | | Gets or sets the callback invoked when the indeterminate state changes. | | `Disabled` | `bool` | | Gets or sets whether the checkbox is disabled. When disabled: - Checkbox cannot be clicked or focused - Opacity is reduced - Pointer events are disabled - aria-disabled attribute is set to true | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the checkbox. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the checkbox. Provides accessible text for screen readers when the checkbox doesn't have associated label text. | | `Id` | `string?` | | Gets or sets the ID attribute for the checkbox element. Used for associating the checkbox with label elements via htmlFor attribute. | | `Name` | `string?` | | Gets or sets the name of the checkbox for form submission. This is critical for form submission. The name/value pair is submitted to the server. If not specified, falls back to the Id value. | | `Required` | `bool` | | Gets or sets whether the checkbox is required. When true, the checkbox must be checked for form submission. Works with form validation. | | `CheckedExpression` | `Expression>?` | | Gets or sets an expression that identifies the bound value. Used for form validation integration. When provided, the checkbox registers with the EditContext and participates in form validation. | **Basic Usage:** ```razor @* Simple checkbox *@ @* With label *@
@* Indeterminate state *@ @code { private bool isAccepted = false; private bool acceptTerms = false; } ``` --- ### ColorPicker **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Canvas-based color picker with popover. Supports Hex, RGB, and HSL output formats, hue/saturation/lightness canvas selection, alpha/opacity control, and preset color swatches. **Components & Parameters:** #### `ColorPicker` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Color` | `string?` | | The selected color value in the configured format. Use `@bind-Color` for two-way binding. | | `ColorChanged` | `EventCallback` | | Callback invoked when the color changes. | | `Format` | `ColorFormat` | `ColorFormat.Hex` | Output format: `Hex`, `RGB`, or `HSL`. | | `Size` | `ColorPickerSize` | `ColorPickerSize.Compact` | Size of the picker: `Compact` or `Large`. | | `ShowAlpha` | `bool` | `false` | Show alpha/opacity slider. | | `ShowInputs` | `bool` | `true` | Show RGB/HSL text input fields. | | `ShowPresets` | `bool` | `true` | Show preset color swatches. | | `Disabled` | `bool` | `false` | Disable the picker. | | `Required` | `bool` | `false` | Mark as required for form validation. | | `Class` | `string?` | | Additional CSS classes for the trigger button. | | `Id` | `string?` | | HTML id attribute. | **Basic Usage:** ```razor @code { private string? hexColor; private string? rgbColor; private string? color; } ``` --- ### Collapsible **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Expandable/collapsible content panels. Shows or hides content with smooth animations. **Components & Parameters:** #### `Collapsible` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Open` | `bool` | | Gets or sets a value indicating whether the collapsible is currently expanded. true if the collapsible is open (content visible); otherwise, false. Default is false. Supports two-way binding via @bind-Open syntax. | | `OpenChanged` | `EventCallback` | | Gets or sets the callback invoked when the open state changes. An that receives the new open state, or null if no callback is provided. | | `Disabled` | `bool` | | Gets or sets a value indicating whether the collapsible is disabled. true if the collapsible is disabled and cannot be toggled; otherwise, false. Default is false. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the container element. A string containing one or more CSS class names, or null. Use this parameter to customize the container's appearance and layout. Common Tailwind utilities include: Borders: border rounded-lg Padding: p-4, px-6 Background: bg-muted, bg-card Spacing: space-y-2, mb-4 | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content to be rendered inside the collapsible container. A containing the child components, or null. Typically contains: - The button/trigger element - The expandable content area | #### `CollapsibleContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the content container element. A string containing one or more CSS class names, or null. Use this parameter to style the content area and add animations. Common Tailwind utilities include: Padding: p-4, px-6 py-4 Borders: border-t, border-x Background: bg-muted, bg-card Transitions: transition-all duration-300 Animation: animate-in slide-in-from-top Overflow: overflow-hidden (for smooth height transitions) | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered when the collapsible is expanded. A containing the collapsible content, or null. | #### `CollapsibleTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the trigger button element. A string containing one or more CSS class names, or null. Common Tailwind utilities for styling triggers: Flex layout: flex items-center gap-2 Padding: px-4 py-2 Hover states: hover:bg-accent Transitions: transition-all duration-200 | | `AsChild` | `bool` | `false` | When true, the trigger does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the trigger. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the trigger. A containing the trigger content, or null. | **Basic Usage:** ```razor

This content can be shown or hidden.

 @* Controlled mode *@

Detailed information here.

 @code { private bool isOpen = false; } ``` --- ### Combobox **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Searchable autocomplete dropdown with keyboard navigation. Combines text input with dropdown selection. **Components & Parameters:** #### `Combobox` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | Gets or sets the currently selected value. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback that is invoked when the selected value changes. | | `Placeholder` | `string` | `"Select an option..."` | Gets or sets the placeholder text shown in the button when no item is selected. | | `SearchPlaceholder` | `string` | `"Search..."` | Gets or sets the placeholder text shown in the search input. | | `EmptyMessage` | `string` | `"No results found."` | Gets or sets the message displayed when no items match the search. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the combobox container. | | `Disabled` | `bool` | | Gets or sets whether the combobox is disabled. | | `PopoverWidth` | `string` | `"w-[200px]"` | Gets or sets the width of the popover content. Defaults to "w-[200px]". Can be overridden with Tailwind classes. | | `OnLoadMore` | `EventCallback` | | Fires when the user scrolls near the bottom of the list. Use for infinite-scroll / async pagination (v3.7.2). | | `IsLoading` | `bool` | `false` | Shows a loading indicator at the bottom of the list while fetching more items (v3.7.2). | | `EndOfListMessage` | `string?` | | Message shown when there are no more items to load (v3.7.2). | | `SearchQueryChanged` | `EventCallback` | | Fires on every keystroke in the search input. Use for server-side async filtering (v3.7.2). | **Basic Usage:** ```razor Item 1 Item 2 Item 3 @code { private string? selectedValue; } ``` --- ### Command **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Command palette with keyboard navigation and search. Quick access to actions and navigation via keyboard shortcuts. **Components & Parameters:** #### `Command` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the command container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the command. | | `OnSelect` | `EventCallback` | | Event callback invoked when a command item is selected. Receives the selected value as a parameter. | #### `CommandEmpty` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the empty state container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered when there are no results. | #### `CommandGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the group container. | | `Heading` | `string?` | | Gets or sets the heading text for this group (optional). | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the group. | #### `CommandInput` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the input container. | | `Placeholder` | `string` | `"Type a command or search..."` | Gets or sets the placeholder text for the input. | | `Disabled` | `bool` | | Gets or sets whether the input is disabled. | | `AutoFocus` | `bool` | | Gets or sets whether the input should auto-focus when rendered. | | `SearchInterval` | `int` | `0` | Gets or sets the debounce interval in milliseconds before triggering search. Default is 0 (no debouncing). Set to 150-300ms for better performance with large datasets. | #### `CommandItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the item. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the item. | | `Value` | `string?` | | Gets or sets the value associated with this item. | | `Disabled` | `bool` | | Gets or sets whether this item is disabled. | | `OnSelect` | `EventCallback` | | Gets or sets the callback invoked when this item is selected. | | `SearchText` | `string?` | | Gets or sets the text used for search filtering. If not provided, uses Value. | #### `CommandList` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the list container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the list. | #### `CommandSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the separator. | #### `CommandShortcut` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the shortcut. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the shortcut (e.g., "⌘K", "Ctrl+S"). | **Basic Usage:** ```razor No results found. Calendar Search Emoji Calculator Profile Settings ``` --- ### ContextMenu **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Right-click context menus with actions and keyboard shortcuts. Displays contextual actions on right-click. **Components & Parameters:** #### `ContextMenu` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render. | | `Open` | `bool?` | | Controls whether the context menu is open. | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. | | `X` | `double` | | Viewport X coordinate for programmatic positioning. Use with `OpenAt()`. | | `Y` | `double` | | Viewport Y coordinate for programmatic positioning. Use with `OpenAt()`. | | `OnOpen` | `EventCallback<(double X, double Y)>` | | Event callback invoked when the context menu opens. | | `OnClose` | `EventCallback` | | Event callback invoked when the context menu closes. | > **Programmatic positioning:** Call `contextMenuRef.OpenAt(x, y)` to open and position the menu at specific viewport coordinates without a `ContextMenuTrigger`. Used by `DataTable` row context menus. #### `ContextMenuCheckboxItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the checkbox item. | | `Disabled` | `bool` | `false` | Whether the checkbox item is disabled. | | `Checked` | `bool` | `false` | Whether the checkbox is checked. | | `CheckedChanged` | `EventCallback` | | Event callback invoked when the checked state changes (for two-way binding). | | `OnCheckedChange` | `EventCallback` | | Event callback invoked when the checkbox state changes. | | `CloseOnSelect` | `bool` | `false` | Whether to close the context menu when this item is selected. Default is false for checkbox items. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the menu. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the menu. | | `CloseOnClickOutside` | `bool` | `true` | Whether clicking outside should close the menu. | | `ZIndex` | `int` | `50` | Z-index value for the menu content. | | `LockScroll` | `bool` | `true` | Whether to lock body scroll when menu is open. Default is true. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the group. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the group. | #### `ContextMenuItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the item. | | `Disabled` | `bool` | `false` | Whether the item is disabled. | | `OnClick` | `EventCallback` | | Event callback invoked when the item is clicked. | | `Inset` | `bool` | `false` | Whether to show the item with inset padding. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The label content. | | `Inset` | `bool` | `false` | Whether to show the label with inset padding. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuRadioGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the radio group. Typically contains ContextMenuRadioItem components. | | `Class` | `string?` | | Additional CSS classes to apply to the radio group. | | `Value` | `TValue?` | | The currently selected value. | | `ValueChanged` | `EventCallback` | | Event callback invoked when the selected value changes (for two-way binding). | | `OnValueChange` | `EventCallback` | | Event callback invoked when the selection changes. | #### `ContextMenuRadioItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the radio item. | | `Disabled` | `bool` | `false` | Whether the radio item is disabled. | | `Value` | `TValue?` | | The value associated with this radio item. | | `CloseOnSelect` | `bool` | `true` | Whether to close the context menu when this item is selected. Default is true for radio items. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuShortcut` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The shortcut text (e.g., "⌘C" or "Ctrl+C"). | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuSub` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the submenu. Typically contains ContextMenuSubTrigger and ContextMenuSubContent. | | `Open` | `bool?` | | Controls whether the submenu is open (controlled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes (for two-way binding). | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the submenu open state changes. | #### `ContextMenuSubContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the submenu. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the submenu. | | `Offset` | `int` | `-4` | Offset distance from the trigger in pixels. | | `ZIndex` | `int` | `50` | Z-index for the submenu content. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuSubTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger. | | `Disabled` | `bool` | `false` | Whether the trigger is disabled. | | `Inset` | `bool` | `false` | Whether to show the item with inset padding. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `ContextMenuTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content that triggers the context menu. | | `Disabled` | `bool` | `false` | Whether the trigger is disabled. | **Basic Usage:** ```razor
Right-click me
Edit Copy Delete ``` --- ### CurrencyInput **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Culture-aware currency input with automatic symbol and decimal formatting. Generic over `decimal` or `double`. Integrates with EditForm validation. **Components & Parameters:** #### `CurrencyInput` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `TValue?` | | The bound currency value. Use `@bind-Value` for two-way binding. | | `ValueChanged` | `EventCallback` | | Callback invoked when the value changes. | | `Currency` | `string` | `"USD"` | ISO currency code (e.g., USD, EUR, GBP, JPY). | | `Culture` | `string?` | | Culture code for formatting (e.g., "en-US", "de-DE"). Defaults to current culture. | | `ShowCurrencySymbol` | `bool` | `true` | Show the currency symbol (e.g., $, €, £). | | `Placeholder` | `string?` | | Placeholder text. | | `Disabled` | `bool` | `false` | Disable the input. | | `Required` | `bool` | `false` | Mark as required. | | `Name` | `string?` | | Input name for form submission. | | `Readonly` | `bool` | `false` | Make input read-only. | | `Class` | `string?` | | Additional CSS classes. | | `Id` | `string?` | | HTML id attribute. | | `UpdateOn` | `InputUpdateMode` | `Change` | `Input` (every keystroke) or `Change` (on blur). | **Basic Usage:** ```razor @code { private decimal price; private decimal amount; private double cost; } ``` --- ### DataTable **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Powerful tables with sorting, filtering, pagination, and row selection. Enterprise-grade data table component. **Components & Parameters:** #### `DataTable` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Data` | `IEnumerable` | `Array.Empty()` | The client-side collection of items to display. For server-side loading use `ServerData` instead. | | `Columns` | `RenderFragment?` | | Gets or sets the column definitions as child content. Use DataTableColumn components to define columns declaratively. | | `SelectionMode` | `DataTableSelectionMode` | `DataTableSelectionMode.None` | Gets or sets the row selection mode. Default is None (no selection). | | `ShowToolbar` | `bool` | `true` | Gets or sets whether to show the toolbar with global search and column visibility. Default is true. | | `ShowPagination` | `bool` | `true` | Gets or sets whether to show pagination controls. Default is true. | | `IsLoading` | `bool` | | Gets or sets whether the table is in a loading state. Default is false. | | `PageSizes` | `int[]` | `{ 5, 10, 20, 50, 100 }` | Gets or sets the available page size options. | | `InitialPageSize` | `int` | `5` | Gets or sets the initial page size. Default is 5. | | `ToolbarActions` | `RenderFragment?` | | Gets or sets custom toolbar actions (buttons, etc.). | | `EmptyTemplate` | `RenderFragment?` | | Gets or sets a custom template for the empty state. If null, displays default "No results found" message. | | `LoadingTemplate` | `RenderFragment?` | | Gets or sets a custom template for the loading state. If null, displays default "Loading..." message. | | `Class` | `string?` | | Gets or sets additional CSS classes for the container div. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the table. | | `Dense` | `bool` | `true` | Compact cell padding. Set to `false` for a spacious layout. | | `HeaderBackground` | `bool` | `true` | Applies `bg-muted/50` to the header row. | | `HeaderBorder` | `bool` | `false` | Adds vertical dividers between header cells. | | `CellBorder` | `bool` | `false` | Adds vertical dividers between body cells. | | `ColumnsVisibility` | `bool` | `true` | Shows/hides the column visibility toggle button in the toolbar. | | `HeaderClass` | `string?` | | Extra CSS classes applied to ``. | | `HeaderRowClass` | `string?` | | Extra CSS classes applied to the header ``. | | `BodyRowClass` | `string?` | | Extra CSS classes applied to each body ``. | | `SelectedItems` | `IReadOnlyCollection` | `Array.Empty()` | Gets or sets the selected items. Use @bind-SelectedItems for two-way binding. | | `SelectedItemsChanged` | `EventCallback>` | | Event callback invoked when the selected items change. | | `OnSort` | `EventCallback<(string ColumnId, SortDirection Direction)>` | | Event callback invoked when sorting changes. Use for custom sorting logic (hybrid mode). | | `OnFilter` | `EventCallback` | | Event callback invoked when the global search text changes. | | `ServerData` | `Func>>?` | | Server-side data callback. When set, the table passes current page/sort/search state and renders the returned page. Mutually exclusive with `Data`. | | `ItemsProvider` | `DataTableVirtualProvider?` | `null` | Activates server-side virtualised infinite-scroll mode (Blazor ``). Set instead of `ServerData`. | | `ItemHeight` | `float` | `40` | Approximate row height in pixels passed to the virtualizer as `ItemSize`. Must match your actual row height. Required when either virtualisation mode is active. | | `Height` | `string` | `"400px"` | CSS height of the scrollable table container. Required when either virtualisation mode is active. | | `VirtualizeOverscanCount` | `int` | `3` | Extra rows rendered beyond the visible viewport to reduce blank-row flicker during fast scrolling. | | `Virtualize` | `bool` | `false` | Enables Blazor `` for large in-memory datasets (client-side DOM windowing). Requires `ItemHeight` and `Height`. | | `Resizable` | `bool` | `false` | Enables drag-resize handles on all column headers. Activates `table-layout: fixed` automatically. | | `MinColumnWidth` | `int` | `80` | Minimum column width in pixels enforced during drag-resize. | | `OnColumnResize` | `EventCallback<(string ColumnId, string Width)>` | | Raised once when the user releases a resize handle. | | `Reorderable` | `bool` | `false` | Enables drag-to-reorder on all eligible columns. Pinned and selection columns are always excluded. | | `OnColumnReorder` | `EventCallback<(string ColumnId, int NewIndex)>` | | Raised when a column is dropped into a new position. | | `RowContextMenu` | `RenderFragment>?` | | Template for a right-click context menu scoped to each row. | | `SyncWidthOnResize` | `bool` | `false` | Keeps `` total width equal to the sum of all column widths during and after resize. Pair with `TableContainerClass="border-0"`. | | `TableContainerClass` | `string?` | | Additional CSS classes on the inner table container div (wraps the `
`). Use `border-0` to remove the border. | | `Striped` | `bool` | `false` | Enables alternating row background colours (zebra striping). | | `StripeClass` | `string?` | `even:bg-muted/30 even:hover:bg-muted/70` | Tailwind class for the stripe. Override to change colour or swap odd/even. | | `ChildrenProperty` | `Func?>?` | | Returns child items for a row. Setting this activates tree/hierarchical mode; pagination is hidden. | | `LoadChildrenAsync` | `Func>>?` | | Lazy-loads children on first expand. Used when children are not pre-populated. | | `HasChildrenField` | `Func?` | | Determines whether an expand toggle is shown before children are loaded. | | `ValueField` | `Func?` | | Unique key per row, used to track expanded state in tree mode. | | `ExpandedValues` | `IEnumerable?` | | Externally controlled set of expanded row keys. | | `ExpandedValuesChanged` | `EventCallback>` | | Notifies when expanded state changes. | | `PreprocessData` | `Func, Task>>?` | | Gets or sets a function to preprocess data before automatic processing. Use for custom transformations. | | `AdditionalRowAttributes` | `Func?>?` | | Returns extra HTML attributes stamped on each `` (e.g. `data-id`, `draggable`). Used with the `Sortable` integration (v3.8.0). | #### Server-Side Types | Type | Properties | |---|---| | `DataTableRequest` | `Page` (int, 1-based), `PageSize` (int), `SortDescriptors` (IReadOnlyList<SortDescriptor>), `SearchText` (string?) | | `DataTableResult` | `Items` (IEnumerable<TData>), `TotalCount` (int) | | `DataTableVirtualProvider` | Delegate: `Func>>` | | `DataTableVirtualRequest` | `StartIndex` (int), `Count` (int), `SortDescriptors` (IReadOnlyList<SortDescriptor>), `SearchText` (string?), `CancellationToken` | | `SortDescriptor` | `Column` (string), `Direction` (SortDirection) | | `DataTableRowMenuContext` | `Item` (TData), `SelectedItems` (IReadOnlyList<TData>), `VisibleColumns` (IReadOnlyList<string>) | > ⚠️ **Breaking (3.6.1):** `DataTableRequest.SortColumn` and `SortDirection` are removed. Use `SortDescriptors.FirstOrDefault()` instead. #### `DataTableColumn` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Id` | `string?` | | Gets or sets the unique identifier for this column. If not provided, it will be auto-generated from the Header. | | `Sortable` | `bool` | | Gets or sets whether this column can be sorted. Default is false. | | `Filterable` | `bool` | | Gets or sets whether this column can be filtered. Default is false. | | `Visible` | `bool` | `true` | Gets or sets whether this column is currently visible. Default is true. | | `Width` | `string?` | | Gets or sets the width of the column (e.g., "200px", "20%", "auto"). Null means the column will size automatically. | | `MinWidth` | `string?` | | Gets or sets the minimum width of the column (e.g., "100px"). Useful for responsive layouts. | | `MaxWidth` | `string?` | | Gets or sets the maximum width of the column (e.g., "400px"). Useful for preventing excessively wide columns. | | `Pinned` | `ColumnPinnedSide` | `ColumnPinnedSide.None` | Pins the column to the left or right edge of the table. Pinned columns stay fixed during horizontal scroll with a frosted-glass treatment. | | `Resizable` | `bool?` | | Per-column resize override. `null` inherits the table-level `Resizable` setting. | | `Reorderable` | `bool?` | | Per-column reorder override. `null` inherits the table-level `Reorderable` setting. Pinned columns are always excluded. | | `CellTemplate` | `RenderFragment?` | | Gets or sets a custom template for rendering cell values. If null, the value is rendered using ToString(). The context parameter provides the data item (TData) for the row. <DataTableColumn Property="@(p => p.Status)" Header="Status"> <CellTemplate Context="person"> <Badge Variant="@(person.Status == "Active" ? BadgeVariant.Default : BadgeVariant.Destructive)"> @person.Status </Badge> </CellTemplate> </DataTableColumn> | | `CellClass` | `string?` | | Gets or sets additional CSS classes to apply to cells in this column. | | `HeaderClass` | `string?` | | Gets or sets additional CSS classes to apply to the header cell. | **New enums:** `ColumnPinnedSide` — `None`, `Left`, `Right` #### `DataTablePagination` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `PageSizes` | `int[]` | `{ 10, 20, 50, 100 }` | | | `OnPageChanged` | `EventCallback` | | | | `OnPageSizeChanged` | `EventCallback` | | | #### `DataTableToolbar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `GlobalSearchValue` | `string` | `string.Empty` | | | `OnGlobalSearchChanged` | `EventCallback` | | | | `Columns` | `List.ColumnData>` | `new()` | | | `OnColumnVisibilityChanged` | `Action` | `null!` | | | `ChildContent` | `RenderFragment?` | | | **Basic Usage:** ```razor @* Server-side *@ @code { private List users = new() { new User { Name = "John", Email = "john@example.com", Role = "Admin" }, new User { Name = "Jane", Email = "jane@example.com", Role = "User" } }; private async Task> LoadOrdersAsync(DataTableRequest req) { var result = await _orderService.GetPagedAsync(req.Page, req.PageSize, req.SortDescriptors.FirstOrDefault()?.Column, req.SearchText); return new DataTableResult { Items = result.Items, TotalCount = result.Total }; } } ``` --- ### DarkModeToggle **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** A sun/moon toggle switch that controls the application's dark mode via the injected `ThemeService`. Automatically synchronizes with external theme changes. **Components & Parameters:** #### `DarkModeToggle` No configurable parameters. Uses the injected `ThemeService` to get and set dark mode state. **Basic Usage:** ```razor ``` --- ### DatePicker **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Date selection with calendar in popover. Includes support for single dates and date ranges. **Components & Parameters:** #### `DatePicker` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `SelectedDateChanged` | `EventCallback` | | Event callback invoked when the selected date changes. Use with @bind-SelectedDate for two-way binding. | | `MinDate` | `DateOnly?` | | Minimum selectable date. | | `MaxDate` | `DateOnly?` | | Maximum selectable date. | | `IsDateDisabled` | `Func?` | | Function to determine if a specific date should be disabled. | | `Culture` | `System.Globalization.CultureInfo?` | | Culture for date formatting. | | `CaptionLayout` | `CalendarCaptionLayout` | `CalendarCaptionLayout.Label` | Calendar caption layout (label or dropdown). | | `ButtonVariant` | `ButtonVariant` | `ButtonVariant.Outline` | Button variant for the trigger button. | | `ButtonSize` | `ButtonSize` | `ButtonSize.Default` | Button size for the trigger button. | | `ShowIcon` | `bool` | `true` | Whether to show the calendar icon in the button. | | `ShowDropdownIcon` | `bool` | `false` | Whether to show the chevron-down icon on the right side of the button. | | `Placeholder` | `string` | `"Pick a date"` | Placeholder text when no date is selected. | | `DateFormat` | `string?` | | Date format string for displaying the selected date. | | `Disabled` | `bool` | | Whether the date picker is disabled. | | `Align` | `PopoverAlign` | `PopoverAlign.Start` | Alignment of the popover content. | | `Class` | `string?` | | Additional CSS classes for the button. | | `CalendarClass` | `string?` | | Additional CSS classes for the calendar. | | `AriaLabel` | `string?` | | ARIA label for the button. | #### `DateRangePicker` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `StartDateChanged` | `EventCallback` | | Event callback invoked when the start date changes. | | `EndDateChanged` | `EventCallback` | | Event callback invoked when the end date changes. | | `MinDate` | `DateOnly?` | | Minimum selectable date. | | `MaxDate` | `DateOnly?` | | Maximum selectable date. | | `IsDateDisabled` | `Func?` | | Function to determine if a specific date should be disabled. | | `Culture` | `System.Globalization.CultureInfo?` | | Culture for date formatting. | | `CaptionLayout` | `CalendarCaptionLayout` | `CalendarCaptionLayout.Label` | Calendar caption layout (label or dropdown). | | `ButtonVariant` | `ButtonVariant` | `ButtonVariant.Outline` | Button variant for the trigger button. | | `ButtonSize` | `ButtonSize` | `ButtonSize.Default` | Button size for the trigger button. | | `ShowIcon` | `bool` | `true` | Whether to show the calendar icon in the button. | | `ShowDropdownIcon` | `bool` | `false` | Whether to show the chevron-down icon on the right side of the button. | | `Placeholder` | `string` | `"Pick a date range"` | Placeholder text when no date range is selected. | | `DateFormat` | `string?` | | Date format string for displaying dates. | | `Disabled` | `bool` | | Whether the date range picker is disabled. | | `Align` | `PopoverAlign` | `PopoverAlign.Start` | Alignment of the popover content. | | `StartDateLabel` | `string?` | | Label for the start date calendar. | | `EndDateLabel` | `string?` | | Label for the end date calendar. | | `Class` | `string?` | | Additional CSS classes for the button. | | `CalendarClass` | `string?` | | Additional CSS classes for the calendars. | | `AriaLabel` | `string?` | | ARIA label for the button. | **Basic Usage:** ```razor @* Simple date picker *@ @* Date range picker *@ @* With placeholder *@ @code { private DateTime? selectedDate; private DateRange? dateRange; } ``` --- ### DateRangePicker **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Date range selector with dual side-by-side calendars for picking start and end dates. Supports quick-select presets sidebar, Clear/Apply buttons, min/max date constraints, and culture-aware formatting. **Components & Parameters:** #### `DateRangePicker` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Start` | `DateOnly?` | | The selected start date. Use `@bind-Start` for two-way binding. | | `StartChanged` | `EventCallback` | | Callback invoked when the start date changes. | | `End` | `DateOnly?` | | The selected end date. Use `@bind-End` for two-way binding. | | `EndChanged` | `EventCallback` | | Callback invoked when the end date changes. | | `ShowPresets` | `bool` | `false` | Show a quick-select preset sidebar (Today, This Week, This Month, etc.). | | `ShowButtons` | `bool` | `true` | Show Clear and Apply buttons at the bottom. | | `ShowIcon` | `bool` | `true` | Show calendar icon in the trigger. | | `ShowDropdownIcon` | `bool` | `true` | Show chevron icon in the trigger. | | `StartDateLabel` | `string?` | `"From"` | Label above the start calendar. | | `EndDateLabel` | `string?` | `"To"` | Label above the end calendar. | | `MinDate` | `DateOnly?` | | Minimum selectable date. | | `MaxDate` | `DateOnly?` | | Maximum selectable date. | | `Format` | `string?` | | Date display format string. | | `Culture` | `string?` | | Culture for date formatting. | | `Disabled` | `bool` | `false` | Disable the picker. | | `Placeholder` | `string?` | | Placeholder text when no range is selected. | | `Class` | `string?` | | Additional CSS classes. | **Basic Usage:** ```razor @code { private DateOnly? startDate; private DateOnly? endDate; } ``` --- ### Dialog **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Modal dialogs for focused interactions. Displays content in an overlay that requires user interaction. **Components & Parameters:** #### `Dialog` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the dialog. | | `Open` | `bool?` | | Controls whether the dialog is open (controlled mode). When null, the dialog manages its own state (uncontrolled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. Use with @bind-Open for two-way binding. | | `DefaultOpen` | `bool` | `false` | Default open state when in uncontrolled mode. | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the dialog open state changes. | | `Modal` | `bool` | `true` | Whether the dialog can be dismissed by clicking outside or pressing Escape. Default is true. | #### `DialogClose` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the close button. | | `AsChild` | `bool` | `false` | When true, the close does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the close button. | | `OnClick` | `EventCallback` | | Custom click handler. Called after the dialog is closed. | | `PreventClose` | `bool` | `false` | Whether to prevent the default close behavior. When true, only the OnClick handler is invoked. Default is false (dialog closes on click). | #### `DialogContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the dialog. | | `Class` | `string?` | | Additional CSS classes to apply to the dialog content. | | `OverlayClass` | `string?` | | Additional CSS classes to apply to the dialog overlay/backdrop. Merged with built-in defaults using ClassNames.cn. | | `UseCustomAnimations` | `bool` | `false` | When true, do not include default animation-related classes so consumers can provide completely custom animations. | | `ShowClose` | `bool` | `true` | Whether to show the close button (X icon). Default is true. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the dialog. Default is true. | | `TrapFocus` | `bool` | `true` | Whether to trap focus within the dialog. Default is true for modal dialogs. | | `LockScroll` | `bool` | `true` | Whether to lock body scroll when dialog is open. Default is true for modal dialogs. | | `OnEscapeKeyDown` | `EventCallback` | | Event callback invoked when Escape key is pressed. | #### `DialogDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The description content to display. | | `Class` | `string?` | | Additional CSS classes to apply to the description. | #### `DialogFooter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display in the dialog footer (typically action buttons). | | `Class` | `string?` | | Additional CSS classes to apply to the footer container. | #### `DialogHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display in the dialog header (typically DialogTitle and DialogDescription). | | `Class` | `string?` | | Additional CSS classes to apply to the header container. | #### `DialogTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The title content to display. | | `Class` | `string?` | | Additional CSS classes to apply to the title. | #### `DialogTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger button. | | `AsChild` | `bool` | `false` | When true, the trigger does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the trigger. | **Basic Usage:** ```razor Edit Profile Make changes to your profile here.
Name
@code { private string name = ""; } ``` --- ### DialogHost **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Host component that renders dialogs triggered by `IDialogService`. Place once in your layout (e.g., `MainLayout.razor`). Uses `DialogService` to show confirmation, warning, info, and destructive dialogs programmatically with configurable buttons, icons, and variants. **Components & Parameters:** #### `DialogHost` No configurable parameters. Registers itself with the injected `DialogService` on initialization. **Service types used with `IDialogService`:** | Type | Description | |------|-------------| | `DialogOptions` | Configuration for the dialog: `Title`, `Message`, `Buttons`, `Variant`, `Icon`, `ConfirmText`, `CancelText`, `AlternateText` | | `DialogButtons` | `OkOnly`, `OkCancel`, `YesNo`, `YesNoCancel` | | `DialogVariant` | `Default`, `Destructive`, `Warning`, `Success`, `Info` | | `DialogResult` | `Confirmed`, `Cancelled`, `Alternate` | **Basic Usage:** ```razor @* In MainLayout.razor *@ @* In a page/component *@ @inject IDialogService DialogService @code { private async Task ConfirmDelete() { var result = await DialogService.ShowAsync(new DialogOptions { Title = "Delete Item", Message = "Are you sure you want to delete this item?", Buttons = DialogButtons.YesNo, Variant = DialogVariant.Destructive, Icon = "trash-2" }); if (result == DialogResult.Confirmed) await DeleteAsync(); } } ``` --- ### Drawer **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Mobile-friendly slide-in panel that can emerge from any edge (Bottom, Top, Left, Right). Includes a backdrop overlay, keyboard/click-to-dismiss, focus trap, and body scroll lock. **Components & Parameters:** #### `Drawer` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Content including trigger, content, and other drawer sub-components. | | `Open` | `bool?` | | Controlled open state. Use `@bind-Open` for two-way binding. | | `OpenChanged` | `EventCallback` | | Callback invoked when open state changes. | | `DefaultOpen` | `bool` | `false` | Initial open state in uncontrolled mode. | | `Direction` | `DrawerDirection` | `DrawerDirection.Bottom` | Slide direction: `Bottom`, `Top`, `Left`, `Right`. | #### `DrawerContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The drawer body content. | | `Class` | `string?` | | Additional CSS classes. | | `ShowHandle` | `bool` | `true` | Show drag handle indicator. | | `TrapFocus` | `bool` | `true` | Trap focus inside the drawer while open. | | `LockScroll` | `bool` | `true` | Lock body scroll while open. | | `CloseOnEscape` | `bool` | `true` | Close when Escape key is pressed. | #### `DrawerTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The trigger element content. | | `Class` | `string?` | | Additional CSS classes. | **Basic Usage:** ```razor Edit Profile Make changes to your profile here.
Content goes here.
 ``` --- ### DropdownMenu **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Context menus with nested submenus and keyboard navigation. Displays a menu of actions triggered by a button. **Components & Parameters:** #### `DropdownMenu` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the dropdown menu. Typically includes DropdownMenuTrigger and DropdownMenuContent. | | `Open` | `bool?` | | Controls whether the dropdown menu is open (controlled mode). When null, the dropdown menu manages its own state (uncontrolled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. Use with @bind-Open for two-way binding. | | `DefaultOpen` | `bool` | `false` | Default open state when in uncontrolled mode. | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the dropdown menu open state changes. | | `Modal` | `bool` | `true` | Whether the dropdown menu can be dismissed by clicking outside or pressing Escape. Default is true. | | `Dir` | `string` | `"ltr"` | Direction for the menu content layout ("ltr" or "rtl"). Default is "ltr". | #### `DropdownMenuCheckboxItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the checkbox item. | | `Class` | `string?` | | Additional CSS classes to apply to the checkbox item. | | `Disabled` | `bool` | `false` | Whether the checkbox item is disabled. | | `Checked` | `bool` | `false` | Whether the checkbox is checked. | | `CheckedChanged` | `EventCallback` | | Event callback invoked when the checked state changes (for two-way binding). | | `OnCheckedChange` | `EventCallback` | | Event callback invoked when the checkbox state changes. | | `CloseOnSelect` | `bool` | `false` | Whether to close the dropdown menu when this item is selected. Default is false for checkbox items. | #### `DropdownMenuContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the dropdown menu. | | `Class` | `string?` | | Additional CSS classes to apply to the content container. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the dropdown menu. | | `CloseOnClickOutside` | `bool` | `true` | Whether clicking outside should close the dropdown menu. | | `Side` | `PopoverSide` | `PopoverSide.Bottom` | Preferred side for positioning. | | `Align` | `PopoverAlign` | `PopoverAlign.Start` | Alignment relative to trigger. | | `Offset` | `int` | `4` | Offset distance from the trigger in pixels. | | `OnEscapeKeyDown` | `EventCallback` | | Event callback invoked when Escape key is pressed. | | `OnClickOutside` | `EventCallback` | | Event callback invoked when clicking outside. | | `Loop` | `bool` | `true` | Whether to enable keyboard loop navigation. | | `Strategy` | `PositioningStrategy` | `PositioningStrategy.Absolute` | Positioning strategy: "absolute" or "fixed". Use "fixed" when dropdown needs to escape stacking contexts (e.g., in sidebars). Default is "absolute". | | `MatchTriggerWidth` | `bool` | `false` | Whether to match the trigger element's width. Default is false. | | `ZIndex` | `int` | `50` | Z-index for the dropdown content. Default is 50. | | `Style` | `string?` | | Inline styles to apply to the dropdown content. | #### `DropdownMenuGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the group. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the group. | #### `DropdownMenuItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the menu item. | | `Class` | `string?` | | Additional CSS classes to apply to the menu item. | | `Disabled` | `bool` | `false` | Whether the menu item is disabled. | | `OnClick` | `EventCallback` | | Custom click handler. | | `CloseOnSelect` | `bool` | `true` | Whether to close the dropdown menu when this item is selected. | #### `DropdownMenuLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the label. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the label. | #### `DropdownMenuRadioGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the radio group. Typically contains DropdownMenuRadioItem components. | | `Class` | `string?` | | Additional CSS classes to apply to the radio group. | | `Value` | `TValue?` | | The currently selected value. | | `ValueChanged` | `EventCallback` | | Event callback invoked when the selected value changes (for two-way binding). | | `OnValueChange` | `EventCallback` | | Event callback invoked when the selection changes. | #### `DropdownMenuRadioItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the radio item. | | `Class` | `string?` | | Additional CSS classes to apply to the radio item. | | `Disabled` | `bool` | `false` | Whether the radio item is disabled. | | `Value` | `TValue?` | | The value associated with this radio item. | | `CloseOnSelect` | `bool` | `true` | Whether to close the dropdown menu when this item is selected. Default is true for radio items. | #### `DropdownMenuSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the separator. | #### `DropdownMenuShortcut` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the shortcut. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the shortcut (e.g., "⌘K", "Ctrl+S"). | #### `DropdownMenuSub` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the submenu. Typically contains DropdownMenuSubTrigger and DropdownMenuSubContent. | | `Open` | `bool?` | | Controls whether the submenu is open (controlled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes (for two-way binding). | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the submenu open state changes. | #### `DropdownMenuSubContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the submenu. | | `Class` | `string?` | | Additional CSS classes to apply to the content container. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the submenu. | | `Offset` | `int` | `-4` | Offset distance from the trigger in pixels. | | `ZIndex` | `int` | `50` | Z-index for the submenu content. | #### `DropdownMenuSubTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger. | | `Class` | `string?` | | Additional CSS classes to apply to the trigger. | | `Disabled` | `bool` | `false` | Whether the trigger is disabled. | | `Inset` | `bool` | `false` | Whether this trigger is an inset item (has additional left padding). | #### `DropdownMenuTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger button. | | `Class` | `string?` | | Additional CSS classes to apply to the wrapper. | | `AsChild` | `bool` | `false` | When true, the trigger does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the trigger. | | `Disabled` | `bool` | `false` | Whether the trigger is disabled. | | `OnClick` | `EventCallback` | | Custom click handler. | | `CustomClickHandling` | `bool` | `false` | Whether to use custom click handling only. | **Basic Usage:** ```razor My Account Profile Settings Logout ``` --- ### Empty **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Empty state displays with customizable icons and messages. Shows when there's no data or content to display. **Components & Parameters:** #### `Empty` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the empty state. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the empty state. | #### `EmptyActions` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `EmptyDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `EmptyIcon` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `EmptyTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | **Basic Usage:** ```razor @* Simple empty state *@ @* Custom empty state *@ No messages You don't have any messages yet. ``` --- ### Field **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Combine labels, controls, help text, and validation messages for accessible forms. Complete form field wrapper with proper ARIA attributes. **Components & Parameters:** #### `Field` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Orientation` | `FieldOrientation` | `FieldOrientation.Vertical` | Gets or sets the orientation of the field layout. Controls the layout direction and behavior: - Vertical: Stacks label above control (default, mobile-first) - Horizontal: Places label beside control with aligned items - Responsive: Automatically switches from vertical to horizontal at medium breakpoint Default value is . | | `IsInvalid` | `bool` | | Gets or sets whether the field is in an invalid/error state. When true, applies error styling via the data-invalid attribute. This enables conditional styling for validation errors. Default value is false. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the field. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the field. Typically contains FieldLabel, FieldContent, FieldDescription, and FieldError components for a complete form field. | #### `FieldContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the field content container. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the field content container. Typically contains an input control, followed by optional FieldDescription and FieldError components. | #### `FieldDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Id` | `string?` | | Gets or sets the ID for aria-describedby association. When set, this ID should be referenced by the associated input's aria-describedby attribute for proper accessibility. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the description. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the description. Typically contains helpful text explaining the purpose or format of the associated form field. | #### `FieldError` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Errors` | `IEnumerable?` | | Gets or sets the array of error messages to display. When provided, each error is rendered as a bulleted list item. If both Errors and ChildContent are provided, Errors takes precedence. Component only renders when errors are present or ChildContent is not null. | | `Id` | `string?` | | Gets or sets the ID for aria-describedby association. When set, this ID should be referenced by the associated input's aria-describedby attribute for proper accessibility. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the error container. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets custom error content to be rendered. Used when you need custom error rendering beyond simple text messages. If both Errors and ChildContent are provided, Errors takes precedence. | #### `FieldGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Orientation` | `FieldGroupOrientation` | `FieldGroupOrientation.Vertical` | Gets or sets the orientation of the field group layout. Controls the layout direction: - Vertical: Stacks fields vertically (default) - Horizontal: Places fields horizontally with wrap support - Responsive: Uses container queries to adapt layout based on available space Default value is . | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the field group. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the field group. Typically contains multiple Field components. | #### `FieldLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `For` | `string?` | | Gets or sets the ID of the form control this label is associated with. Should match the ID of the input element for proper accessibility. Enables clicking the label to focus the associated input. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the label. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the label. Typically contains text describing the associated form control. Can also include required indicators, tooltips, etc. | #### `FieldLegend` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Variant` | `FieldLegendVariant` | `FieldLegendVariant.Legend` | Gets or sets the variant of the legend element. Controls the HTML element used: - Legend: Renders a semantic legend element (use with FieldSet) - Label: Renders a div with role="group" (use with FieldGroup) Default value is . | | `AriaLabel` | `string?` | | Gets or sets the ARIA label when using Label variant. Provides an accessible name for the group when variant is Label. Only applicable when Variant is FieldLegendVariant.Label. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the legend. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the legend. Typically contains text describing the grouped form fields. | #### `FieldSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the separator. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to display in the center of the separator. When provided, the content appears centered on top of the separator line with background color to create a visual break in the line. Typically used for text like "Or" or "Or continue with". | #### `FieldSet` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the fieldset. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the fieldset. Typically contains a FieldLegend followed by multiple Field components for grouped form controls. | #### `FieldTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the title. Custom classes are merged with the component's base classes, allowing for style overrides and extensions. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the title. Typically contains text describing the field or group of controls. | **Basic Usage:** ```razor Email We'll never share your email. @* With validation *@ Username @code { private string email = ""; private FormModel model = new(); public class FormModel { [Required] public string Username { get; set; } = ""; } } ``` --- ### FileUpload **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Drag-and-drop file upload with image previews, upload progress indicator, file type/size validation, and EditForm integration. **Components & Parameters:** #### `FileUpload` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Files` | `List?` | | The bound file list. Use `@bind-Files` for two-way binding. | | `FilesChanged` | `EventCallback?>` | | Callback invoked when files change. | | `Multiple` | `bool` | `false` | Allow selecting multiple files. | | `Accept` | `string?` | | Accepted file types (e.g., `"image/*"`, `".pdf,.docx"`). | | `MaxFileSize` | `long` | `10485760` | Maximum file size in bytes (default: 10 MB). | | `MaxFiles` | `int?` | | Maximum number of files. | | `ShowPreview` | `bool` | `true` | Show image thumbnail previews. | | `ShowProgress` | `bool` | `true` | Show upload progress bar. | | `Disabled` | `bool` | `false` | Disable the upload area. | | `Required` | `bool` | `false` | Mark as required. | | `ShowValidationError` | `bool` | `false` | Show validation error from EditContext. | | `Class` | `string?` | | Additional CSS classes. | | `Id` | `string?` | | HTML id attribute. | **Public Methods:** | Method | Description | |--------|-------------| | `ClearFiles()` | Programmatically empties the selected-file list and resets the underlying `` (v3.7.2). | **Basic Usage:** ```razor @code { private List uploadedFiles = new(); } ``` --- ### FilterBuilder **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Inline filter canvas that renders chip-based filter conditions in a toolbar. Supports 8 field types (Text, Number, Date, DateRange, Boolean, Select, MultiSelect, Custom), a preset system for saving named filter sets, and LINQ `.ApplyFilter()` / `.ApplyFilters()` extension methods for filtering any `IEnumerable` or `IQueryable`. **Components & Parameters:** #### `FilterBuilder` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Filters` | `FilterGroup?` | | Two-way bound filter state. Use `@bind-Filters`. | | `FiltersChanged` | `EventCallback` | | Callback invoked on filter change. | | `OnFilterChange` | `EventCallback` | | Fires on every condition change (use for live filtering). | | `FilterFields` | `RenderFragment?` | | Slot for `FilterField` declarations. | | `FilterPresets` | `RenderFragment?` | | Slot for `FilterPreset` declarations. | | `ButtonText` | `string` | `"Filter"` | Label on the add-filter button. | | `PresetsVariant` | `FilterPresetsVariant` | `Dropdown` | Preset display style: `Dropdown` or `Tabs`. | | `ChipSize` | `FilterChipSize` | `Small` | Filter chip size: `Small`, `Medium`, `Large`. | | `Class` | `string?` | | Additional CSS classes. | #### `FilterField` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Field` | `string` | | **Required.** Property name on the data model. | | `Label` | `string` | | **Required.** Display label for the field. | | `Type` | `FilterFieldType` | `Text` | Field type: `Text`, `Number`, `Date`, `DateRange`, `Boolean`, `Select`, `MultiSelect`, `Custom`. | | `EditorType` | `FilterEditorType` | `Auto` | Editor override (e.g., `Currency`, `Slider`, `Custom`). | | `Icon` | `string?` | | Lucide icon name for the filter chip. | | `Operators` | `IEnumerable?` | | Override allowed operators for this field. | | `DefaultOperator` | `FilterOperator?` | | Default operator when adding a condition. | | `Options` | `IEnumerable?` | | Options for Select/MultiSelect fields. | | `Placeholder` | `string?` | | Placeholder text for the filter input. | | `Min` / `Max` / `Step` | `object?` | | Range constraints for Number fields. | | `ChildContent` | `RenderFragment?` | | Custom editor slot (requires `EditorType.Custom`). | #### `FilterPreset` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Name` | `string` | | **Required.** Display name of the preset. | | `Filters` | `FilterGroup` | | **Required.** The preset filter conditions. | | `Icon` | `string?` | | Lucide icon name. | | `Description` | `string?` | | Tooltip/description for the preset. | **LINQ extension methods** (from `FilterExtensions`): ```csharp // Works on IEnumerable and IQueryable filteredList = allItems.ApplyFilter(activeFilters); filteredList = allItems.ApplyFilters(activeFilters); ``` **Basic Usage:** ```razor @code { private FilterGroup activeFilters = new(); private List filteredProducts = new(); private readonly List categoryOptions = [ new("Electronics", "Electronics"), new("Clothing", "Clothing"), new("Books", "Books"), ]; private void HandleFilterChange(FilterGroup filters) { filteredProducts = allProducts.ApplyFilters(filters).ToList(); } } ``` --- ### DataGrid **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @* DataGrid is in the root NeoUI.Blazor namespace — no extra @using needed *@ ``` **Description:** High-performance AG Grid wrapper for Blazor. Supports client-side, server-side (`BlazorServerSide`), infinite-scroll, and virtualized row models. Features include column sorting/filtering/resizing/reordering/pinning, multi-row selection, inline cell editing, custom cell templates, and deep theming. `BlazorServerSide` row model delivers full server-side paging, sorting, and filtering without an AG Grid Enterprise license. > **See also:** [`datagrid.txt`](datagrid.txt), [`grid-quick-reference.txt`](../blazor-shadcn-ui/llms/grid-quick-reference.txt) for advanced theming and configuration details. **Components & Parameters:** #### `DataGrid` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ActionHost` | `object?` | | Gets or sets the host component that contains grid action methods. Set this to 'this' to enable auto-discovery of methods marked with [DataGridAction]. | | `Items` | `IEnumerable` | `Array.Empty()` | Gets or sets the collection of items to display in the grid. | | `SelectionMode` | `DataGridSelectionMode` | `DataGridSelectionMode.None` | Gets or sets the selection mode for the grid. | | `PagingMode` | `DataGridPagingMode` | `DataGridPagingMode.None` | Gets or sets the paging mode for the grid. | | `PageSize` | `int` | `25` | Gets or sets the number of items per page. Must be greater than 0. Default is 25. | | `IdField` | `string` | `"Id"` | Gets or sets the property name to use as the unique row identifier. Required for `BlazorServerSide` row model. Default is "Id". | | `VirtualizationMode` | `DataGridVirtualizationMode` | `DataGridVirtualizationMode.Auto` | Gets or sets the virtualization mode for the grid. | | `Theme` | `DataGridTheme` | `DataGridTheme.Shadcn` | Gets or sets the AG DataGrid theme to use (Shadcn, Alpine, Balham, Material, Quartz). | | `VisualStyle` | `DataGridStyle` | `DataGridStyle.Default` | Gets or sets the visual style modifiers (Default, Striped, Bordered, Minimal). | | `Density` | `DataGridDensity` | `DataGridDensity.Compact` | Gets or sets the spacing density. Values: `Compact`, `Medium`, `Spacious`. `DataGridDensity.Comfortable` is an `[Obsolete]` alias for `Medium`. | | `SuppressHeaderMenus` | `bool` | `false` | Gets or sets whether to suppress the header menus (filter/column menu). | | `State` | `DataGridState?` | | Gets or sets the current state of the grid. Supports `@bind-State`. | | `StateChanged` | `EventCallback` | | Gets or sets the callback invoked when the grid state changes. | | `IsLoading` | `bool` | | Gets or sets whether the grid is in a loading state. | | `Columns` | `RenderFragment?` | | Gets or sets the child content containing DataGridColumn definitions. | | `LoadingTemplate` | `RenderFragment?` | | Gets or sets the template to display while the grid is loading. | | `InitializingTemplate` | `RenderFragment?` | | Shown during first-time grid initialization (distinct from `IsLoading`). | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the grid container. | | `Height` | `string?` | | Gets or sets the height of the grid (e.g., "500px", "100%"). Defaults to "300px". | | `Width` | `string?` | | Gets or sets the width of the grid. Defaults to "100%". | | `FillWidth` | `bool` | `false` | When true, columns without an explicit Width receive `flex:1` and fill all available horizontal space. | | `AutoSizeColumns` | `bool` | `false` | Automatically sizes all columns to fit their content after data loads. | | `InlineStyle` | `string?` | | Gets or sets inline styles to apply to the grid container. | | `LocalizationKeyPrefix` | `string?` | | Gets or sets the localization key prefix for grid text resources. | | `OnStateChanged` | `EventCallback` | | Gets or sets the callback invoked when the grid state changes. | | `RowModelType` | `DataGridRowModelType` | `DataGridRowModelType.ClientSide` | Gets or sets the row model type. Use `BlazorServerSide` for license-free server-side data. | | `OnServerDataRequest` | `Func, Task>>?` | | Callback for server-side data. Required when RowModelType is `ServerSide`, `Infinite`, or `BlazorServerSide`. | | `ServerDataProvider` | `IDataGridServerDataProvider?` | | External provider for `BlazorServerSide` row model. Takes priority over `OnServerDataRequest`. | | `TotalServerRowCount` | `int` | `0` | Two-way bindable total row count. Auto-updated after each `BlazorServerSide` fetch. Use `@bind-TotalServerRowCount`. | | `TotalServerRowCountChanged` | `EventCallback` | | Raised when `TotalServerRowCount` changes. Supports `@bind-TotalServerRowCount`. | | `OnDataRequest` | `EventCallback>` | | Legacy EventCallback version of server data request. Prefer `OnServerDataRequest` for new code. | | `OnSelectionChanged` | `EventCallback>` | | Gets or sets the callback invoked when the selection changes. | | `OnGridReady` | `Action?` | | Callback fired once when the AG Grid instance is fully initialized. | | `SelectedItems` | `IReadOnlyCollection` | `Array.Empty()` | Gets or sets the selected items in the grid. | | `SelectedItemsChanged` | `EventCallback>` | | Gets or sets the callback invoked when the selected items change (for two-way binding). | #### `DataGridRowModelType` enum | Value | Description | |---|---| | `ClientSide` | All data loaded client-side (default). | | `ServerSide` | AG Grid Enterprise ServerSide row model. | | `Infinite` | Infinite scroll with server requests per block. | | `BlazorServerSide` | **License-free** Blazor-native server-side model. Paging/sorting/filtering orchestrated from C#. No Enterprise license required. Requires `IdField`. | #### Server-side data providers ```csharp // Implement for any async data source public interface IDataGridServerDataProvider { Task> GetDataAsync(DataGridDataRequest request, CancellationToken ct = default); } // Abstract base for HTTP endpoints public abstract class HttpDataGridProvider : IDataGridServerDataProvider { } ``` #### Public API methods | Method | Description | |---|---| | `AutoSizeColumnsAsync()` | Programmatically trigger column auto-sizing after load. | | `OnFetchServerDataAsync(DataGridDataRequest)` | Virtual — override in a subclass to provide data (code-behind pattern). | #### `DataGridColumn` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Id` | `string?` | | Gets or sets the unique identifier for this column. If not specified, it will be generated from Field or Header. | | `Field` | `string?` | | Gets or sets the field name for data binding (e.g., "CustomerName"). This is a string field name, NOT a lambda expression. | | `Sortable` | `bool` | | Gets or sets whether the column is sortable. | | `Filterable` | `bool` | | Gets or sets whether the column is filterable. | | `Width` | `string?` | | Gets or sets the column width (e.g., "100px", "20%"). | | `MinWidth` | `string?` | | Gets or sets the minimum column width. | | `MaxWidth` | `string?` | | Gets or sets the maximum column width. | | `Pinned` | `DataDataGridColumnPinPosition` | `DataDataGridColumnPinPosition.None` | Gets or sets the column pinning position. | | `AllowResize` | `bool` | `true` | Gets or sets whether the column can be resized. | | `AllowReorder` | `bool` | `true` | Gets or sets whether the column can be reordered. | | `IsVisible` | `bool` | `true` | Gets or sets whether the column is visible. | | `CellTemplate` | `RenderFragment?` | | Gets or sets the cell template for rendering cell content. | | `HeaderTemplate` | `RenderFragment?` | | Gets or sets the header template for custom header rendering. | | `FilterTemplate` | `RenderFragment?` | | Gets or sets the filter template for custom filter UI. | | `CellEditTemplate` | `RenderFragment?` | | Gets or sets the cell edit template for inline editing. | | `ValueSelector` | `Func?` | | Gets or sets the value selector function for extracting cell values. | | `CellClass` | `string?` | | Gets or sets the CSS class to apply to cells in this column. | | `HeaderClass` | `string?` | | Gets or sets the CSS class to apply to the column header. | | `DataFormatString` | `string?` | | Gets or sets the format string for displaying cell values. Supports standard .NET format strings (e.g., "C" for currency, "N2" for numbers with 2 decimals, "d" for dates). Can also use composite format strings (e.g., "{0:C}", "{0:N2}"). This is a simpler alternative to CellTemplate for basic formatting scenarios. <DataGridColumn Field="Price" Header="Price" DataFormatString="C" /> // $1,234.56 <DataGridColumn Field="Quantity" Header="Quantity" DataFormatString="N0" /> // 1,234 <DataGridColumn Field="Date" Header="Date" DataFormatString="d" /> // 12/31/2024 <DataGridColumn Field="Percentage" Header="%" DataFormatString="P2" /> // 45.67% | #### `DataGridImportMap` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | *(No parameters)* | | | | #### `DataDataGridThemeParameters` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Spacing` | `int?` | | Base spacing unit (px). Default by density: Compact=3, Medium=4, Spacious=6. | | `RowHeight` | `int?` | | Row height (px). Default by density: Compact=28, Medium=42, Spacious=56. | | `HeaderHeight` | `int?` | | Header height (px). Default by density: Compact=32, Medium=48, Spacious=64. | | `IconSize` | `int?` | | Icon size (px). Default by density: Compact=14, Medium=16, Spacious=20. | | `InputHeight` | `int?` | | Input element height (px). Default by density: Compact=28, Medium=32, Spacious=40. | | `FontSize` | `int?` | | Base font size (px). Default by density: Compact=12, Medium=14, Spacious=16. | **Basic Usage:** ```razor @* Client-side DataGrid *@ @* BlazorServerSide (license-free server-side paging/sorting/filtering) *@ ``` --- ### HeightAnimation **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Smooth height transition animation component. Animates content height changes for expand/collapse effects. **Components & Parameters:** #### `HeightAnimation` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to be rendered inside the animated container. | | `Config` | `HeightAnimationConfig?` | | Configuration for the height animation behavior. | | `Class` | `string?` | | Additional CSS classes to apply to the container element. | | `Style` | `string?` | | Additional inline styles to apply to the container element. | | `Enabled` | `bool` | `true` | Whether the animation is currently enabled. When false, no animation setup will occur. | **Basic Usage:** ```razor @if (isExpanded) {

This content animates when shown/hidden.

Height transitions smoothly.

} @code { private bool isExpanded = false; } ``` --- ### HoverCard **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Rich hover previews with delay support. Displays detailed information on hover with smooth transitions. **Components & Parameters:** #### `HoverCard` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the hover card. Should include HoverCardTrigger and HoverCardContent components. | | `Open` | `bool?` | | Controls whether the hover card is open (controlled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. | | `DefaultOpen` | `bool` | `false` | Default open state when in uncontrolled mode. | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the hover card open state changes. | | `OpenDelay` | `int` | `700` | Delay in milliseconds before opening the hover card. Default is 700ms. | | `CloseDelay` | `int` | `300` | Delay in milliseconds before closing the hover card. Default is 300ms. | #### `HoverCardContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render inside the hover card. | | `Side` | `PopoverSide` | `PopoverSide.Bottom` | Preferred side for positioning. | | `Align` | `PopoverAlign` | `PopoverAlign.Center` | Alignment relative to trigger. | | `Offset` | `int` | `4` | Offset distance from trigger in pixels. | | `Class` | `string?` | | Additional CSS classes to apply to the content. | #### `HoverCardTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the trigger. | | `AsChild` | `bool` | `false` | When true, the trigger does not render its own div element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component to act as the trigger. | | `Class` | `string?` | | Additional CSS classes to apply to the trigger. | **Basic Usage:** ```razor

John Doe

Full stack developer

Joined March 2024
``` --- ### Input **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Text input with multiple types (text, email, password, number, etc.) and validation support. Full-featured form input component. **Components & Parameters:** #### `Input` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Type` | `InputType` | `InputType.Text` | Gets or sets the type of input. Determines the HTML input type attribute. Default value is . | | `Value` | `string?` | | Gets or sets the current value of the input. Supports two-way binding via @bind-Value syntax. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the input value changes. This event is fired on every keystroke (oninput event). Use with Value parameter for two-way binding. | | `Placeholder` | `string?` | | Gets or sets the placeholder text displayed when the input is empty. Provides a hint to the user about what to enter. Should not be used as a replacement for a label. | | `Disabled` | `bool` | | Gets or sets whether the input is disabled. When disabled: - Input cannot be focused or edited - Cursor is set to not-allowed - Opacity is reduced for visual feedback | | `Required` | `bool` | | Gets or sets whether the input is required. When true, the HTML5 required attribute is set. Works with form validation and :invalid CSS pseudo-class. | | `Name` | `string?` | | Gets or sets the name of the input for form submission. This is critical for form submission. The name/value pair is submitted to the server. Should be unique within the form. | | `Autocomplete` | `string?` | | Gets or sets the autocomplete hint for the browser. Examples: "email", "username", "current-password", "new-password", "name", "tel", "off". Helps browsers provide appropriate autofill suggestions. | | `Readonly` | `bool` | | Gets or sets whether the input is read-only. When true, the user cannot modify the value, but it's still focusable and submitted with forms. Different from Disabled - readonly inputs are still submitted with forms. | | `MaxLength` | `int?` | | Gets or sets the maximum number of characters allowed. When set, the browser will prevent users from entering more characters. Applies to text, email, password, tel, url, and search types. | | `MinLength` | `int?` | | Gets or sets the minimum number of characters required. Works with form validation. Applies to text, email, password, tel, url, and search types. | | `Min` | `string?` | | Gets or sets the minimum value for number, date, or time inputs. Applies to number, date, time inputs. Works with form validation and :invalid pseudo-class. | | `Max` | `string?` | | Gets or sets the maximum value for number, date, or time inputs. Applies to number, date, time inputs. Works with form validation and :invalid pseudo-class. | | `Step` | `string?` | | Gets or sets the step interval for number inputs. Defines the granularity of values (e.g., "0.01" for currency, "1" for integers). Applies to number, date, time inputs. | | `Pattern` | `string?` | | Gets or sets the regex pattern for validation. Validates input against the specified regular expression. Works with form validation and :invalid pseudo-class. | | `InputMode` | `string?` | | Gets or sets the input mode hint for mobile keyboards. Examples: "none", "text", "decimal", "numeric", "tel", "search", "email", "url". Helps mobile devices show the appropriate keyboard. | | `Autofocus` | `bool` | | Gets or sets whether the input should be auto-focused when the page loads. Only one element per page should have autofocus. Improves accessibility when used appropriately. | | `Spellcheck` | `bool?` | | Gets or sets whether spell checking is enabled. Can be true, false, or null (browser default). Useful for controlling spell checking on email addresses, usernames, etc. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the input. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `Id` | `string?` | | Gets or sets the HTML id attribute for the input element. Used to associate the input with a label element via the label's 'for' attribute. This is essential for accessibility and allows clicking the label to focus the input. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the input. Provides an accessible name for screen readers. Use when there is no visible label element. | | `AriaDescribedBy` | `string?` | | Gets or sets the ID of the element that describes the input. References the id of an element containing help text or error messages. Improves screen reader experience by associating descriptive text. | | `AriaInvalid` | `bool?` | | Gets or sets whether the input value is invalid. When true, aria-invalid="true" is set. Should be set based on validation state. | **Basic Usage:** ```razor @* Text input *@ @* Email input *@ @* Password input *@ @* Disabled input *@ @code { private string name = ""; private string email = ""; private string password = ""; } ``` --- ### InputGroup **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Enhanced inputs with icons, buttons, and addons. Combines input with prefix/suffix elements. **Components & Parameters:** #### `InputGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the child content to be rendered inside the input group. Typically contains InputGroupInput/InputGroupTextarea and InputGroupAddon components. The order of child components affects the visual layout and keyboard navigation. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the input group container. Custom classes are merged with the component's base classes using TailwindMerge, allowing for intelligent conflict resolution. | #### `InputGroupAddon` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Align` | `InputGroupAlign` | `InputGroupAlign.InlineStart` | Gets or sets the alignment position of the addon. Determines where the addon content appears relative to the input: - InlineStart: Left side (or right in RTL) - InlineEnd: Right side (or left in RTL) - BlockStart: Above the input - BlockEnd: Below the input | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content to be rendered inside the addon. Can contain icons, buttons, text, or any other content. The component automatically adjusts padding based on content type. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the addon container. | #### `InputGroupButton` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Type` | `ButtonType` | `ButtonType.Button` | Gets or sets the button type (submit, button, reset). | | `Variant` | `ButtonVariant` | `ButtonVariant.Default` | Gets or sets the button visual variant. | | `Size` | `ButtonSize` | `ButtonSize.Small` | Gets or sets the button size. Default is Small for better proportions within input groups. | | `Disabled` | `bool` | | Gets or sets whether the button is disabled. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for accessibility. | | `OnClick` | `EventCallback` | | Gets or sets the click event handler. | | `Icon` | `RenderFragment?` | | Gets or sets the icon to display in the button. | | `IconPosition` | `IconPosition` | `IconPosition.Start` | Gets or sets the position of the icon relative to button text. | | `ChildContent` | `RenderFragment?` | | Gets or sets the child content (button text). | | `Class` | `string?` | | Gets or sets additional CSS classes. | #### `InputGroupInput` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Type` | `InputType` | `InputType.Text` | Gets or sets the type of input. | | `Value` | `string?` | | Gets or sets the current value of the input. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the input value changes. | | `Placeholder` | `string?` | | Gets or sets the placeholder text. | | `Disabled` | `bool` | | Gets or sets whether the input is disabled. | | `Required` | `bool` | | Gets or sets whether the input is required. | | `Class` | `string?` | | Gets or sets additional CSS classes. | | `Id` | `string?` | | Gets or sets the HTML id attribute. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label. | | `AriaDescribedBy` | `string?` | | Gets or sets the ARIA described-by attribute. | | `AriaInvalid` | `bool?` | | Gets or sets whether the input value is invalid. | #### `InputGroupText` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Gets or sets the child content (text or icons). | | `Class` | `string?` | | Gets or sets additional CSS classes. | #### `InputGroupTextarea` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | Gets or sets the current value of the textarea. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the textarea value changes. | | `Rows` | `int` | `3` | Gets or sets the number of visible text rows. Default is 3 rows. The textarea can grow beyond this if resize is enabled. | | `Placeholder` | `string?` | | Gets or sets the placeholder text. | | `Disabled` | `bool` | | Gets or sets whether the textarea is disabled. | | `Required` | `bool` | | Gets or sets whether the textarea is required. | | `Class` | `string?` | | Gets or sets additional CSS classes. | | `Id` | `string?` | | Gets or sets the HTML id attribute. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label. | | `AriaDescribedBy` | `string?` | | Gets or sets the ARIA described-by attribute. | | `AriaInvalid` | `bool?` | | Gets or sets whether the textarea value is invalid. | **Basic Usage:** ```razor @* With prefix icon *@ @* With suffix button *@ @code { private string searchTerm = ""; private string email = ""; } ``` --- ### InputOtp **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** One-time password input with individual character slots. Specialized input for OTP/PIN entry with auto-focus. **Components & Parameters:** #### `InputOtp` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the OTP input. Typically includes InputOtpSlot components or InputOtpGroup with slots. | | `Class` | `string?` | | Additional CSS classes to apply to the container. | | `Length` | `int` | `6` | The number of OTP slots. Default is 6. | | `Value` | `string?` | | Controls the OTP value (controlled mode). | | `ValueChanged` | `EventCallback` | | Event callback invoked when the OTP value changes. Use with @bind-Value for two-way binding. | | `DefaultValue` | `string` | `""` | Default value when in uncontrolled mode. | | `OnValueChange` | `EventCallback` | | Event callback invoked when the OTP value changes. | | `OnComplete` | `EventCallback` | | Event callback invoked when the OTP is complete. | | `Pattern` | `string` | `"[0-9]"` | Pattern for input validation (e.g., "[0-9]" for digits only). Default is digits only. | | `Disabled` | `bool` | `false` | Whether the OTP input is disabled. | | `AriaLabel` | `string` | `"One-time password"` | ARIA label for the OTP input group. | | `AriaInvalid` | `bool` | `false` | Whether the OTP input is in an invalid/error state. When true, aria-invalid="true" is set on the slots, applying error styling. | #### `InputOtpGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content, typically InputOtpSlot components. | | `Class` | `string?` | | Additional CSS classes to apply to the group. | #### `InputOtpSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Optional custom content for the separator. If not provided, displays a minus/dash icon. | | `Class` | `string?` | | Additional CSS classes to apply to the separator. | #### `InputOtpSlot` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Index` | `int` | | The index of this slot (0-based). | | `Class` | `string?` | | Additional CSS classes to apply to the slot. | **Basic Usage:** ```razor @* With custom pattern *@ @code { private string otpCode = ""; } ``` --- ### Item **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Flexible list items with media, content, and action slots. Reusable component for building lists and menus. **Components & Parameters:** #### `Item` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Variant` | `ItemVariant` | `ItemVariant.Default` | Gets or sets the visual style variant of the item. | | `Size` | `ItemSize` | `ItemSize.Default` | Gets or sets the size of the item. | | `AsChild` | `string?` | | Gets or sets the element type to render as (e.g., "a", "button"). When set, the component renders as that element instead of a div. | | `Href` | `string?` | | Gets or sets the href attribute when rendering as an anchor. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the item. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the item. | | `DataSlot` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | | `DataSlot` | `string?` | | | | `href` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | | `DataSlot` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `ItemActions` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the actions container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the actions container. | #### `ItemContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the content container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the container. | #### `ItemDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the description. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered as the description. | #### `ItemFooter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the footer. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered in the footer. | #### `ItemGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the group. | #### `ItemHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the header. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered in the header. | #### `ItemMedia` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Variant` | `ItemMediaVariant` | `ItemMediaVariant.Default` | Gets or sets the visual style variant of the media. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the media container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the media container. | #### `ItemSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the separator. | #### `ItemTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the title. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered as the title. | **Basic Usage:** ```razor JD John Doe john@example.com ``` --- ### Kbd **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Keyboard shortcut badges for displaying key combinations. Shows keyboard shortcuts in styled format. **Components & Parameters:** #### `Kbd` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the kbd element. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the kbd element. Typically contains a single key name (e.g., "Ctrl", "Shift", "Enter") or a key symbol (e.g., "⌘", "⌥", "⇧"). | **Basic Usage:** ```razor @* Single key *@ Ctrl @* Key combination *@
Ctrl + C
@* In text *@

Press Enter to submit

``` --- ### Label **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Accessible form labels with proper for/id association. Connects labels to form controls for accessibility. **Components & Parameters:** #### `Label` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `For` | `string?` | | Gets or sets the ID of the form element this label is associated with. A string containing the ID of the target form control, or null. This parameter maps to the HTML for attribute (htmlFor in JSX). When set, clicking the label will focus or activate the associated form control. Best practices: Always provide a For value for explicit label-control association Ensure the For value matches the Id of the target form control Use meaningful IDs that describe the field's purpose | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the label element. A string containing one or more CSS class names, or null. Use this parameter to customize the label's appearance beyond default styling. Common Tailwind utilities include: Text size: text-lg, text-sm Font weight: font-bold, font-normal Color: text-muted-foreground, text-destructive Spacing: mb-2, mr-2 | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the label element. A containing the label's content, or null. Typically contains the label text, but can include additional elements such as: Required field indicators (asterisks, badges) Help text or tooltips Icons or visual indicators Nested spans for styling portions of text | **Basic Usage:** ```razor @code { private string email = ""; } ``` --- ### MarkdownEditor **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Rich text editor with toolbar formatting and live preview. Full-featured markdown editing with syntax highlighting. **Components & Parameters:** #### `MarkdownEditor` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | Gets or sets the markdown content value. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the value changes. | | `Placeholder` | `string?` | | Gets or sets the placeholder text displayed when the editor is empty. | | `Disabled` | `bool` | | Gets or sets whether the editor is disabled. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the editor container. | | `Id` | `string?` | | Gets or sets the HTML id attribute for the textarea element. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the textarea. | | `AriaDescribedBy` | `string?` | | Gets or sets the ID of the element that describes the textarea. | | `AriaInvalid` | `bool?` | | Gets or sets whether the textarea value is invalid. | **Basic Usage:** ```razor @* With preview *@ @code { private string markdownContent = "# Hello World"; } ``` --- ### MaskedInput **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Text input with real-time pattern masking. Auto-skips literal characters, manages cursor position, supports paste with auto-formatting, and provides common built-in masks via `MaskedInput.Masks`. **Mask pattern characters:** `0` = digit, `9` = digit or space, `A` = uppercase letter, `a` = letter or space, `*` = alphanumeric. All other characters are treated as literals. **Components & Parameters:** #### `MaskedInput` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | The unmasked input value. Use `@bind-Value` for two-way binding. | | `ValueChanged` | `EventCallback` | | Callback invoked when the value changes. | | `Mask` | `string` | `""` | The mask pattern (e.g., `"(000) 000-0000"`). | | `MaskChar` | `char` | `'_'` | Placeholder character for unfilled mask positions. | | `ShowMask` | `bool` | `true` | Show the mask template when input is empty. | | `Placeholder` | `string?` | | HTML placeholder text. | | `Disabled` | `bool` | `false` | Disable the input. | | `Required` | `bool` | `false` | Mark as required. | | `Name` | `string?` | | Input name for form submission. | | `Readonly` | `bool` | `false` | Make input read-only. | | `InputMode` | `string?` | `"text"` | Mobile keyboard hint (e.g., `"numeric"`, `"tel"`). | | `Class` | `string?` | | Additional CSS classes. | | `Id` | `string?` | | HTML id attribute. | | `UpdateOn` | `InputUpdateMode` | `Change` | `Input` (every keystroke) or `Change` (on blur). | **Built-in mask constants:** - `MaskedInput.Masks.Phone` — `"(000) 000-0000"` - `MaskedInput.Masks.SSN` — `"000-00-0000"` - `MaskedInput.Masks.CreditCard` — `"0000 0000 0000 0000"` - `MaskedInput.Masks.ZipCode` — `"00000"` - `MaskedInput.Masks.Date` — `"00/00/0000"` **Basic Usage:** ```razor ``` --- ### Menubar **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Desktop application-style horizontal menu bar with dropdown menus. Top-level navigation with nested submenus. **Components & Parameters:** #### `Menubar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the menubar. Typically includes MenubarMenu components. | | `Class` | `string?` | | Additional CSS classes to apply to the menubar. | | `ActiveIndex` | `int?` | | Controls which menu is active/open (controlled mode). When null, the menubar manages its own state. | | `ActiveIndexChanged` | `EventCallback` | | Event callback invoked when the active index changes. Use with @bind-ActiveIndex for two-way binding. | | `DefaultActiveIndex` | `int` | `-1` | Default active index when in uncontrolled mode. | | `OnActiveIndexChange` | `EventCallback` | | Event callback invoked when the active menu changes. | | `Loop` | `bool` | `true` | Whether keyboard loop navigation is enabled. Default is true. | #### `MenubarCheckboxItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the checkbox item. | | `Class` | `string?` | | Additional CSS classes to apply to the checkbox item. | | `Disabled` | `bool` | `false` | Whether the checkbox item is disabled. | | `Checked` | `bool` | `false` | Whether the checkbox is checked. | | `CheckedChanged` | `EventCallback` | | Event callback invoked when the checked state changes (for two-way binding). | | `OnCheckedChange` | `EventCallback` | | Event callback invoked when the checkbox state changes. | | `CloseOnSelect` | `bool` | `false` | Whether to close the menu when this item is selected. Default is false for checkbox items. | #### `MenubarContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the menu. | | `Class` | `string?` | | Additional CSS classes to apply to the content container. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the menu. | | `CloseOnClickOutside` | `bool` | `true` | Whether clicking outside should close the menu. | | `Side` | `PopoverSide` | `PopoverSide.Bottom` | Preferred side for positioning. | | `Align` | `PopoverAlign` | `PopoverAlign.Start` | Alignment relative to trigger. | | `Offset` | `int` | `4` | Offset distance from the trigger in pixels. | | `Loop` | `bool` | `true` | Whether to enable keyboard loop navigation. | | `ZIndex` | `int` | `50` | Z-index for the menu content. | #### `MenubarGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the group. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the group. | #### `MenubarItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the menu item. | | `Class` | `string?` | | Additional CSS classes to apply to the menu item. | | `Disabled` | `bool` | `false` | Whether the menu item is disabled. | | `OnClick` | `EventCallback` | | Custom click handler. | | `CloseOnSelect` | `bool` | `true` | Whether to close the menu when this item is selected. | | `Inset` | `bool` | `false` | Whether this menu item represents an inset item (has additional left padding). | #### `MenubarLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the label. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the label. | | `Inset` | `bool` | `false` | Whether to show the label with inset padding to align with items that have icons. | #### `MenubarMenu` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content, typically MenubarTrigger and MenubarContent. | #### `MenubarRadioGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the radio group. Typically contains MenubarRadioItem components. | | `Class` | `string?` | | Additional CSS classes to apply to the radio group. | | `Value` | `TValue?` | | The currently selected value. | | `ValueChanged` | `EventCallback` | | Event callback invoked when the selected value changes (for two-way binding). | | `OnValueChange` | `EventCallback` | | Event callback invoked when the selection changes. | #### `MenubarRadioItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the radio item. | | `Class` | `string?` | | Additional CSS classes to apply to the radio item. | | `Disabled` | `bool` | `false` | Whether the radio item is disabled. | | `Value` | `TValue?` | | The value associated with this radio item. | | `CloseOnSelect` | `bool` | `true` | Whether to close the menu when this item is selected. Default is true for radio items. | #### `MenubarSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes to apply to the separator. | #### `MenubarShortcut` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes to apply to the shortcut. | | `ChildContent` | `RenderFragment?` | | The content to be rendered inside the shortcut (e.g., "⌘K", "Ctrl+S"). | #### `MenubarSub` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the submenu. Typically contains MenubarSubTrigger and MenubarSubContent. | | `Open` | `bool?` | | Controls whether the submenu is open (controlled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes (for two-way binding). | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the submenu open state changes. | #### `MenubarSubContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the submenu. | | `Class` | `string?` | | Additional CSS classes to apply to the content container. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the submenu. | | `Offset` | `int` | `-4` | Offset distance from the trigger in pixels. | | `ZIndex` | `int` | `50` | Z-index for the submenu content. | #### `MenubarSubTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger. | | `Class` | `string?` | | Additional CSS classes to apply to the trigger. | | `Disabled` | `bool` | `false` | Whether the trigger is disabled. | | `Inset` | `bool` | `false` | Whether this trigger is an inset item (has additional left padding). | #### `MenubarTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger button. | | `Class` | `string?` | | Additional CSS classes to apply to the trigger. | | `Disabled` | `bool` | `false` | Whether the trigger is disabled. | **Basic Usage:** ```razor File New File Open Save Edit Cut Copy Paste ``` --- ### Motion **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Declarative animation system powered by Motion.dev with 20+ presets including fade, scale, slide, shake, bounce, pulse, spring physics, scroll-triggered animations, and staggered list/grid animations. **Components & Parameters:** #### `BounceOnce` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Height` | `string` | `"-30px"` | Bounce height (pixels or percentage). Default: "-30px" | | `Duration` | `double` | `0.6` | Duration in seconds. Default: 0.6 | #### `ExpandOnScroll` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `0.8` | Starting scale (0-1). Default: 0.8 | | `To` | `double` | `1` | Ending scale (0-1+). Default: 1 | | `Duration` | `double` | `0.6` | Duration in seconds. Default: 0.6 | #### `FadeIn` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `0` | Starting opacity (0-1). Default: 0 | | `To` | `double` | `1` | Ending opacity (0-1). Default: 1 | | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `FadeInOnScroll` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `0` | Starting opacity (0-1). Default: 0 | | `To` | `double` | `1` | Ending opacity (0-1). Default: 1 | | `Duration` | `double` | `0.6` | Duration in seconds. Default: 0.6 | #### `FadeOut` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `1` | Starting opacity (0-1). Default: 1 | | `To` | `double` | `0` | Ending opacity (0-1). Default: 0 | | `Duration` | `double` | `0.2` | Duration in seconds. Default: 0.2 | #### `GridItemEnter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Duration` | `double` | `0.4` | Duration in seconds. Default: 0.4 | #### `ListItemEnter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `ListItemExit` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Duration` | `double` | `0.2` | Duration in seconds. Default: 0.2 | #### `Motion` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render and animate. | | `Presets` | `RenderFragment?` | | Preset animations to apply (FadeIn, ScaleIn, Spring, etc.). | | `Trigger` | `MotionTrigger` | `MotionTrigger.OnAppear` | When the animation should trigger. | | `Class` | `string?` | | Additional CSS classes to apply. | | `Style` | `string?` | | Additional inline styles to apply. | | `InViewOptions` | `InViewOptions?` | | Options for IntersectionObserver when Trigger is OnInView. | | `StaggerChildren` | `double?` | | Stagger delay for child animations in seconds. | | `RespectReducedMotion` | `bool` | `true` | Whether to respect user's reduced motion preference. Default: true | | `Keyframes` | `List?` | | Custom keyframes to animate (alternative to using presets). | | `Options` | `MotionOptions?` | | Animation options (duration, delay, easing, etc.). | | `Spring` | `SpringOptions?` | | Spring physics options (overrides standard easing). | #### `Presets` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Preset components to apply (FadeIn, ScaleIn, Spring, etc.). | #### `Pulse` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Scale` | `double` | `1.05` | Scale amplitude. Default: 1.05 | | `Duration` | `double` | `0.6` | Duration in seconds. Default: 0.6 | | `Repeat` | `double` | `-1` | Number of pulses. Default: infinite | #### `ScaleIn` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `0.8` | Starting scale (0-1+). Default: 0.8 | | `To` | `double` | `1` | Ending scale (0-1+). Default: 1 | | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `ScaleOut` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `1` | Starting scale (0-1+). Default: 1 | | `To` | `double` | `0.8` | Ending scale (0-1+). Default: 0.8 | | `Duration` | `double` | `0.2` | Duration in seconds. Default: 0.2 | #### `ShakeX` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Intensity` | `int` | `10` | Shake intensity (pixels). Default: 10 | | `Duration` | `double` | `0.4` | Duration in seconds. Default: 0.4 | #### `ShakeY` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Intensity` | `int` | `10` | Shake intensity (pixels). Default: 10 | | `Duration` | `double` | `0.4` | Duration in seconds. Default: 0.4 | #### `SlideInFromBottom` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `100` | Distance to slide from in pixels. Default: 100 | | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `SlideInFromLeft` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `-100` | Distance to slide from in pixels (negative value). Default: -100 | | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `SlideInFromRight` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `100` | Distance to slide from in pixels. Default: 100 | | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `SlideInFromTop` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `-100` | Distance to slide from in pixels (negative value). Default: -100 | | `Duration` | `double` | `0.3` | Duration in seconds. Default: 0.3 | #### `SlideInOnScroll` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `From` | `double` | `50` | Starting Y position in pixels. Default: 50 | | `Duration` | `double` | `0.6` | Duration in seconds. Default: 0.6 | #### `Spring` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Mass` | `double` | `1.0` | Mass of the spring. Higher = slower. Default: 1.0 | | `Stiffness` | `double` | `100` | Stiffness of the spring. Higher = snappier. Default: 100 | | `Damping` | `double` | `10` | Damping ratio. Higher = less oscillation. Default: 10 | | `Velocity` | `double` | `0` | Initial velocity. Default: 0 | | `Bounce` | `double?` | | Bounce amount (0-1). Alternative to stiffness/damping. | **Basic Usage:** ```razor @* Fade in animation *@
This content fades in
 @* Slide up animation *@ Slides up on mount @* Stagger children *@
Item 1
Item 2
Item 3
 ``` --- ### MultiSelect **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Searchable multi-selection with tags and checkboxes. Select multiple options from a dropdown list. **Components & Parameters:** #### `MultiSelect` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Values` | `IEnumerable?` | | Gets or sets the currently selected values. | | `ValuesChanged` | `EventCallback?>` | | Gets or sets the callback that is invoked when the selected values change. | | `Placeholder` | `string` | `"Select items..."` | Gets or sets the placeholder text shown when no items are selected. | | `SearchPlaceholder` | `string` | `"Search..."` | Gets or sets the placeholder text shown in the search input. | | `EmptyMessage` | `string` | `"No results found."` | Gets or sets the message displayed when no items match the search. | | `SelectAllLabel` | `string` | `"Select All"` | Gets or sets the label for the Select All option. | | `ShowSelectAll` | `bool` | `true` | Gets or sets whether to show the Select All option. | | `ClearLabel` | `string` | `"Clear"` | Gets or sets the label for the Clear button. | | `CloseLabel` | `string` | `"Close"` | Gets or sets the label for the Close button. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the multiselect container. | | `Disabled` | `bool` | | Gets or sets whether the multiselect is disabled. | | `MaxDisplayTags` | `int` | `3` | Gets or sets the maximum number of tags to display before showing "+N more". | | `PopoverWidth` | `string` | `"w-[300px]"` | Gets or sets the width of the popover content. | | `ValuesExpression` | `Expression?>>?` | | Gets or sets an expression that identifies the bound values. Used for form validation integration. | | `MatchTriggerWidth` | `bool` | `false` | When true, the dropdown popover matches the width of the trigger button. | | `AutoClose` | `bool` | `true` | When false, the popover stays open after selecting an item (useful for multi-step selection). | | `OnLoadMore` | `EventCallback` | | Fires when the user scrolls near the bottom of the list. Use for infinite-scroll / async pagination (v3.7.2). | | `IsLoading` | `bool` | `false` | Shows a loading indicator at the bottom of the list while fetching more items (v3.7.2). | | `EndOfListMessage` | `string?` | | Message shown when there are no more items to load (v3.7.2). | | `SearchQueryChanged` | `EventCallback` | | Fires on every keystroke in the search input. Use for server-side async filtering (v3.7.2). | **Basic Usage:** ```razor Option 1 Option 2 Option 3 @code { private HashSet selectedItems = new(); } ``` --- ### NativeSelect **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Styled native HTML select dropdown. Enhanced styling for standard select element. **Components & Parameters:** #### `NativeSelect` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | Gets or sets the selected value. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback that is invoked when the value changes. | | `Id` | `string?` | | Gets or sets the id attribute for the select element. | | `Name` | `string?` | | Gets or sets the name attribute for the select element. | | `Placeholder` | `string?` | | Gets or sets the placeholder text when no option is selected. | | `Disabled` | `bool` | | Gets or sets whether the select is disabled. | | `Required` | `bool` | | Gets or sets whether the select is required. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the select. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the select (options). | #### `NativeSelectOption` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | | | `Disabled` | `bool` | | | | `ChildContent` | `RenderFragment?` | | | **Basic Usage:** ```razor @code { private string selectedValue = ""; } ``` --- ### NavigationMenu **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Horizontal navigation with dropdown panels. Main site navigation with mega menu support. **Components & Parameters:** #### `NavigationMenu` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the navigation menu. | | `Value` | `string?` | | Controls which item is active/open. | | `ValueChanged` | `EventCallback` | | Event callback invoked when the active item changes. | | `Orientation` | `NavigationMenuOrientation` | `NavigationMenuOrientation.Horizontal` | The orientation of the navigation menu. | | `AriaLabel` | `string` | `"Main"` | The accessible label for the navigation. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `NavigationMenuContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the content panel. | | `ForceMount` | `bool` | `true` | When true, the content is always mounted in the DOM (for animations). Default is true for proper animation support. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `NavigationMenuIndicator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes to apply. | #### `NavigationMenuItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string` | `string.Empty` | The unique value for this item. | | `ChildContent` | `RenderFragment?` | | The child content to render within the item. | #### `NavigationMenuLink` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Href` | `string` | `"#"` | The href for the link. | | `Active` | `bool?` | | Whether the link is currently active. If not set, active state will be auto-detected based on the current URL when AutoActive is true. | | `AutoActive` | `bool` | `false` | Whether to automatically detect active state based on the current URL. Similar to NavLink behavior. Default is false. | | `Match` | `NavLinkMatch` | `NavLinkMatch.Prefix` | How to match the URL when AutoActive is true. NavLinkMatch.All requires an exact match, NavLinkMatch.Prefix requires the URL to start with Href. Default is NavLinkMatch.Prefix. | | `ChildContent` | `RenderFragment?` | | The child content to render within the link. | | `OnClick` | `EventCallback` | | Event callback invoked when the link is clicked. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `NavigationMenuList` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the list. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `NavigationMenuTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the trigger. | | `Class` | `string?` | | Additional CSS classes to apply. | #### `NavigationMenuViewport` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the viewport. | | `Class` | `string?` | | Additional CSS classes to apply. | **Basic Usage:** ```razor Products All Products New Arrivals About ``` --- ### NumericInput **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Numeric input with generic type support (`int`, `decimal`, `double`, `float`), min/max/step enforcement, mobile keyboard hints, and EditForm validation integration. **Components & Parameters:** #### `NumericInput` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `TValue?` | | The numeric value. Use `@bind-Value` for two-way binding. | | `ValueChanged` | `EventCallback` | | Callback invoked when the value changes. | | `Placeholder` | `string?` | | Placeholder text. | | `Disabled` | `bool` | `false` | Disable the input. | | `Required` | `bool` | `false` | Mark as required. | | `Name` | `string?` | | Input name for form submission. | | `Readonly` | `bool` | `false` | Make input read-only. | | `Min` | `string?` | | Minimum value (e.g., `"0"`, `"-100"`). | | `Max` | `string?` | | Maximum value (e.g., `"1000"`). | | `Step` | `string?` | | Step increment (e.g., `"0.01"` for currency, `"1"` for integers). | | `MaxLength` | `int?` | | Maximum number of characters allowed. | | `Class` | `string?` | | Additional CSS classes. | | `Id` | `string?` | | HTML id attribute. | | `UpdateOn` | `InputUpdateMode` | `Change` | `Input` (every keystroke) or `Change` (on blur). | | `DebounceDelay` | `int` | `0` | Debounce delay in milliseconds (used with `UpdateOn=Input`). | **Basic Usage:** ```razor @code { private int quantity; private decimal price; private double percentage; } ``` --- ### Pagination **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Page navigation with Previous/Next/Ellipsis support. Navigate through paginated content. **Components & Parameters:** #### `Pagination` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `AriaLabel` | `string` | `"pagination"` | Gets or sets the aria-label for the pagination navigation. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the pagination. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the pagination. | #### `PaginationContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `PaginationEllipsis` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | #### `PaginationItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `PaginationLink` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Href` | `string?` | | | | `IsActive` | `bool` | | | | `Class` | `string?` | | | | `ChildContent` | `RenderFragment?` | | | #### `PaginationNext` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Href` | `string?` | | | | `Class` | `string?` | | | #### `PaginationPrevious` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Href` | `string?` | | | | `Class` | `string?` | | | **Basic Usage:** ```razor @code { private int currentPage = 1; private void HandlePageChange(int page) { currentPage = page; } } ``` --- ### PageTransition **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Wraps page content with smooth fade (and optional slide-from-bottom) animations on navigation. Respects SSR/prerender — no animations during initial server-side render or hydration. Requires `RenderStateProvider` as an ancestor to detect interactive state. **Components & Parameters:** #### `PageTransition` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The page content to wrap with transitions. | | `DisableAnimation` | `bool` | `false` | Disable all transition animations. | | `Duration` | `double` | `0.25` | Transition duration in seconds. | | `FromOpacity` | `double` | `0` | Starting opacity for the fade-in animation. | | `ToOpacity` | `double` | `1` | Ending opacity for the fade-in animation. | | `EnableSlide` | `bool` | `false` | Add a slide-from-bottom animation in addition to fade. | | `SlideDistance` | `int` | `10` | Slide distance in pixels when `EnableSlide` is true. | | `Class` | `string?` | | Additional CSS classes for the transition container. | **Basic Usage:** ```razor @* In MainLayout.razor — wrap @Body with RenderStateProvider + PageTransition *@ @Body @* With slide animation *@ @Body ``` --- ### Popover **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Floating content containers triggered by user interaction. Displays rich content in an overlay. **Components & Parameters:** #### `Popover` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the popover. Should include PopoverTrigger and PopoverContent. | | `Open` | `bool?` | | Controls whether the popover is open (controlled mode). When null, the popover manages its own state (uncontrolled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. Use with @bind-Open for two-way binding. | | `DefaultOpen` | `bool` | `false` | Default open state when in uncontrolled mode. | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the popover open state changes. | | `Modal` | `bool` | `true` | Whether the popover can be dismissed by clicking outside or pressing Escape. Default is true. | #### `PopoverContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | | | `CloseOnEscape` | `bool` | `true` | | | `CloseOnClickOutside` | `bool` | `true` | | | `Side` | `PopoverSide` | `PopoverSide.Bottom` | | | `Align` | `PopoverAlign` | `PopoverAlign.Center` | | | `Offset` | `int` | `4` | | | `OnEscapeKeyDown` | `EventCallback` | | | | `OnClickOutside` | `EventCallback` | | | | `Class` | `string?` | | | #### `PopoverTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | | | `AsChild` | `bool` | `false` | When true, the trigger does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the trigger. | | `OnClick` | `EventCallback` | | | | `CustomClickHandling` | `bool` | `false` | | **Basic Usage:** ```razor

Dimensions

Set the dimensions for the layer.

 ``` --- ### Progress **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Progress bars with animations and indeterminate state. Visual indicator for task completion. **Components & Parameters:** #### `Progress` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `double` | | Gets or sets the current progress value. | | `Max` | `double` | `100` | Gets or sets the maximum value for the progress bar. Default value is 100. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the progress bar. | **Basic Usage:** ```razor @* Determinate progress *@ @* Indeterminate progress *@ @* With custom color *@ @code { private int progressValue = 60; } ``` --- ### RadioGroup **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Radio button groups with keyboard navigation. Mutually exclusive selection from multiple options. **Components & Parameters:** #### `RadioGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `TValue` | | Gets or sets the currently selected value. This property supports two-way binding using the @bind-Value directive. Changes to this property trigger the ValueChanged event callback. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the selected value changes. This event callback enables two-way binding with @bind-Value. It is invoked whenever a radio button is selected. | | `Disabled` | `bool` | | Gets or sets whether the entire radio group is disabled. When disabled, all radio items in the group cannot be selected. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the radio group container. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the radio group. Provides accessible text for screen readers to describe the purpose of the radio group. | | `Name` | `string?` | | Gets or sets the name for all radio items in this group. This name is shared by all radio items in the group, making them mutually exclusive. Critical for form submission - the selected value will be submitted with this name. | | `Required` | `bool` | | Gets or sets whether a selection is required in this radio group. When true, the user must select one of the radio items for form submission. Works with form validation. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the radio group. Should contain RadioGroupItem components. | | `ValueExpression` | `Expression>?` | | Gets or sets an expression that identifies the bound value. Used for form validation integration. When provided, the radio group registers with the EditContext and participates in form validation. | #### `RadioGroupItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Disabled` | `bool` | | Gets or sets whether this individual radio item is disabled. When disabled, the item cannot be selected and appears with reduced opacity. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the radio item. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the radio item. Provides accessible text for screen readers when the radio item doesn't have an associated label element. | | `Id` | `string?` | | Gets or sets the ID attribute for the radio item element. Used for associating the radio item with label elements via htmlFor attribute. | **Basic Usage:** ```razor
@code { private string selectedOption = "option1"; } ``` --- ### RangeSlider **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Dual-handle range slider for selecting a minimum and maximum value. Supports keyboard navigation (arrow keys, Page Up/Down, Home/End), touch, optional tick marks, value tooltips on handles, and EditForm validation. **Components & Parameters:** #### `RangeSlider` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `MinValue` | `double` | `0` | The lower bound of the selected range. Use `@bind-MinValue`. | | `MinValueChanged` | `EventCallback` | | Callback invoked when the minimum value changes. | | `MaxValue` | `double` | `100` | The upper bound of the selected range. Use `@bind-MaxValue`. | | `MaxValueChanged` | `EventCallback` | | Callback invoked when the maximum value changes. | | `Min` | `double` | `0` | Minimum allowed value. | | `Max` | `double` | `100` | Maximum allowed value. | | `Step` | `double` | `1` | Step increment. | | `ShowLabels` | `bool` | `true` | Show min/max value labels. | | `ShowTooltips` | `bool` | `true` | Show value tooltips on drag handles. | | `Disabled` | `bool` | `false` | Disable the slider. | | `Class` | `string?` | | Additional CSS classes. | **Basic Usage:** ```razor @code { private double minPrice = 0; private double maxPrice = 500; } ``` --- ### Rating **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Star/heart/circle rating input with optional half-star support, read-only mode, multiple sizes, and EditForm validation integration. **Components & Parameters:** #### `Rating` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `double` | | The current rating value. Use `@bind-Value`. | | `ValueChanged` | `EventCallback` | | Callback invoked when the value changes. | | `MaxRating` | `int` | `5` | Maximum rating value (number of icons). | | `AllowHalf` | `bool` | `false` | Enable half-star selection. | | `AllowClear` | `bool` | `true` | Allow clicking the same value to clear the rating. | | `Disabled` | `bool` | `false` | Disable the rating. | | `ReadOnly` | `bool` | `false` | Show rating without interaction. | | `Size` | `RatingSize` | `RatingSize.Medium` | Icon size: `Small`, `Medium`, `Large`. | | `IconType` | `RatingIconType` | `RatingIconType.Star` | Icon style: `Star`, `Heart`, `Circle`. | | `ShowValidationError` | `bool` | `false` | Show validation error from EditContext. | | `Class` | `string?` | | Additional CSS classes. | | `Id` | `string?` | | HTML id attribute. | | `Name` | `string?` | | Input name for form submission. | **Basic Usage:** ```razor @code { private double rating; private double sentiment; } ``` --- ### Resizable **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Split layouts with draggable handles. Create resizable split panes. **Components & Parameters:** #### `ResizableHandle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Index` | `int` | | The index of the handle (zero-based, between panels). | | `WithHandle` | `bool` | `false` | Whether to show a visual grip handle. Default is false. | | `Class` | `string?` | | Additional CSS classes to apply to the handle. | #### `ResizablePanel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render within the panel. | | `DefaultSize` | `double?` | | The default size of the panel as a percentage. | | `MinSize` | `double?` | | The minimum size of the panel as a percentage. | | `MaxSize` | `double?` | | The maximum size of the panel as a percentage. | | `Collapsible` | `bool` | `false` | Whether the panel is collapsible. | | `Class` | `string?` | | Additional CSS classes to apply to the panel. | #### `ResizablePanelGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render within the panel group. Should contain ResizablePanel and ResizableHandle components. | | `Direction` | `ResizableDirection` | `ResizableDirection.Horizontal` | The direction of the panel layout. Default is Horizontal. | | `DefaultSizes` | `double[]?` | | The initial sizes of the panels as percentages (must sum to 100). If not provided, panels will be sized equally. | | `OnLayoutChange` | `EventCallback` | | Event callback invoked when panel sizes change. | | `Class` | `string?` | | Additional CSS classes to apply to the container. | **Basic Usage:** ```razor
Left Panel
Right Panel
 ``` --- ### RichTextEditor **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** WYSIWYG editor with formatting toolbar and HTML output. Full-featured rich text editing. **Components & Parameters:** #### `RichTextEditor` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | Gets or sets the HTML content value. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the value changes. | | `Placeholder` | `string?` | | Gets or sets the placeholder text displayed when the editor is empty. | | `Disabled` | `bool` | | Gets or sets whether the editor is disabled. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the editor container. | | `Id` | `string?` | | Gets or sets the HTML id attribute for the contenteditable element. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the editor. | | `AriaDescribedBy` | `string?` | | Gets or sets the ID of the element that describes the editor. | | `AriaInvalid` | `bool?` | | Gets or sets whether the editor value is invalid. | | `MinHeight` | `string` | `"150px"` | Gets or sets the minimum height of the editor content area. | | `MaxHeight` | `string?` | | Gets or sets the maximum height of the editor content area. When content exceeds this height, a scrollbar appears. | | `Height` | `string?` | | Gets or sets a fixed height for the editor content area. When set, the editor will not auto-expand and will show scrollbar when content overflows. Takes precedence over MinHeight/MaxHeight when set. | **Basic Usage:** ```razor @* With custom toolbar *@ Bold Italic @code { private string htmlContent = "

Hello World

"; } ``` --- ### RenderStateProvider **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Provides application render lifecycle state to child components via a cascading `AppRenderContext`. Detects when the app becomes interactive (post-hydration), the hydration phase, and whether navigation is enhanced (client-side SPA). Required ancestor for `PageTransition`. Wrap your layout body or the root app component with this provider. **Components & Parameters:** #### `RenderStateProvider` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to wrap with the render state context. | **Cascaded `AppRenderContext` properties:** | Property | Type | Description | |----------|------|-------------| | `IsInteractive` | `bool` | `true` after hydration completes (JS/DOM is safe to use). | | `IsHydrating` | `bool` | `true` during the first interactive frame after SSR. | | `IsEnhancedNavigation` | `bool` | `true` after the first client-side navigation occurs. | **Basic Usage:** ```razor @* In MainLayout.razor *@ @Body @* Consuming AppRenderContext in a child component *@ @code { [CascadingParameter] public AppRenderContext? RenderContext { get; set; } private bool CanAnimate => RenderContext?.IsInteractive == true && RenderContext?.IsHydrating == false; } ``` --- ### ResponsiveNav **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Responsive navigation system that renders desktop navigation inline and slides mobile navigation in from a side sheet. Three cooperating sub-components share state via a cascaded context. The mobile sheet auto-closes on navigation. **Components & Parameters:** #### `ResponsiveNavProvider` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Content including trigger, desktop nav, and mobile content. | #### `ResponsiveNavTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Custom trigger content. Defaults to a hamburger (☰) icon. | | `Class` | `string?` | | Additional CSS classes. | | `OnClick` | `EventCallback` | | Optional additional click handler. | #### `ResponsiveNavContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Navigation links rendered inside the mobile sheet. | | `Header` | `RenderFragment?` | | Optional header above the navigation links. | | `Footer` | `RenderFragment?` | | Optional footer below the navigation links. | | `ShowClose` | `bool` | `true` | Show the close button in the mobile sheet. | | `ContentClass` | `string?` | | Additional CSS classes for the sheet content area. | **Basic Usage:** ```razor @* Desktop nav — hidden on mobile *@ @* Mobile hamburger trigger *@ @* Mobile slide-in sheet *@ ``` --- ### ScrollArea **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Custom scrollbars for styled scroll regions. Enhanced scrolling with custom styled scrollbars. **Components & Parameters:** #### `ScrollArea` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render within the scrollable area. | | `Type` | `ScrollAreaType` | `ScrollAreaType.Auto` | The type of scrollbar to show. Default is Auto (scrollbars visible when content overflows). | | `ScrollHideDelay` | `int` | `600` | Controls the visibility delay of scrollbars in milliseconds. Only applies when Type is Scroll or Hover. Default is 600ms. | | `ShowVerticalScrollbar` | `bool` | `true` | Whether to show the vertical scrollbar. Default is true. | | `ShowHorizontalScrollbar` | `bool` | `false` | Whether to show the horizontal scrollbar. Default is false. | | `EnableScrollShadows` | `bool` | `false` | Whether to enable scroll shadows that indicate more content is available. Default is false. | | `Class` | `string?` | | Additional CSS classes to apply to the root element. | #### `ScrollBar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Orientation` | `Orientation` | `Orientation.Vertical` | The orientation of the scrollbar. Default is Vertical. | | `Class` | `string?` | | Additional CSS classes to apply to the scrollbar. | **Basic Usage:** ```razor
    @for (int i = 1; i <= 50; i++) {
  • Item @i
    • }
@* Horizontal scroll *@
    @for (int i = 1; i <= 20; i++) {
  • Item @i
    • }
``` --- ### Select **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Dropdown select with search and keyboard navigation. Enhanced select component with filtering. **Components & Parameters:** #### `Select` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `TValue?` | | Gets or sets the currently selected value. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the selected value changes. | | `DisplayTextSelector` | `Func?` | | Custom function that converts the selected value to a display string shown in the trigger. Use when the default `ToString()` output isn't suitable. | | `Disabled` | `bool` | | Gets or sets whether the select is disabled. | | `Open` | `bool?` | | Gets or sets whether the dropdown is open (controlled mode). | | `OpenChanged` | `EventCallback` | | Gets or sets the callback invoked when the open state changes. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the select container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the select component. Should contain SelectTrigger and SelectContent components. | #### `SelectContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the content container. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the dropdown. | | `OnLoadMore` | `EventCallback` | | Fires when the user scrolls near the bottom. Use for infinite-scroll / async pagination (v3.7.2). | | `IsLoading` | `bool` | `false` | Shows a loading indicator at the bottom of the list while fetching more items (v3.7.2). | | `EndOfListMessage` | `string?` | | Message shown when there are no more items to load (v3.7.2). | #### `SelectGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the group. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the group. | #### `SelectItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Text` | `string?` | | Gets or sets the display text for this item. If not provided, will use ChildContent text or Value.ToString(). | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the item. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered as the item's display text. | | `Disabled` | `bool` | | Gets or sets whether this item is disabled. | #### `SelectLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the label. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the label. | #### `SelectTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the trigger button. | | `ChildContent` | `RenderFragment?` | | Gets or sets the content to be rendered inside the trigger button. | #### `SelectValue` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Placeholder` | `string?` | | Gets or sets the placeholder text to display when no value is selected. | **Basic Usage:** ```razor @code { private string? selectedValue; } ``` --- ### Separator **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Visual dividers for separating content. Horizontal or vertical line separator. **Components & Parameters:** #### `Separator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Orientation` | `SeparatorOrientation` | `SeparatorOrientation.Horizontal` | Gets or sets the orientation of the separator. Determines whether the separator is displayed horizontally or vertically. Default value is . | | `Decorative` | `bool` | `true` | Gets or sets whether the separator is purely decorative. When true (default), the separator is treated as decorative (role="none") and hidden from assistive technologies. When false, the separator is semantic (role="separator") and will be announced to screen readers, with the orientation specified via aria-orientation. Set to false when the separator provides meaningful structural information about content hierarchy. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the separator. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | **Basic Usage:** ```razor @* Horizontal separator *@
Content above
Content below
@* Vertical separator *@
Left Right
``` --- ### Sheet **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Slide-out panels from any edge (top, right, bottom, left). Drawer component for mobile and desktop. **Components & Parameters:** #### `Sheet` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the sheet. | | `Open` | `bool?` | | Controls whether the sheet is open (controlled mode). When null, the sheet manages its own state (uncontrolled mode). | | `OpenChanged` | `EventCallback` | | Event callback invoked when the open state changes. Use with @bind-Open for two-way binding. | | `DefaultOpen` | `bool` | `false` | Default open state when in uncontrolled mode. | | `OnOpenChange` | `EventCallback` | | Event callback invoked when the sheet open state changes. | | `Side` | `SheetSide` | `SheetSide.Right` | The side from which the sheet slides in. Default is Right. | | `Modal` | `bool` | `true` | Whether the sheet can be dismissed by clicking the overlay or pressing Escape. Default is true. | #### `SheetClose` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the close button. | | `AsChild` | `bool` | `false` | When true, the close does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the close button. | | `OnClick` | `EventCallback` | | Custom click handler. Called after the sheet is closed. | | `PreventClose` | `bool` | `false` | Whether to prevent the default close behavior. When true, only the OnClick handler is invoked. Default is false (sheet closes on click). | #### `SheetContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the sheet. | | `Class` | `string?` | | Additional CSS classes to apply to the sheet content. | | `Side` | `SheetSide?` | | The side from which the sheet slides in. When null, uses the side from the parent Sheet component. | | `ShowClose` | `bool` | `true` | Whether to show the close button (X icon). Default is true. | | `CloseOnEscape` | `bool` | `true` | Whether pressing Escape should close the sheet. Default is true. | | `TrapFocus` | `bool` | `true` | Whether to trap focus within the sheet. Default is true for modal sheets. | | `LockScroll` | `bool` | `true` | Whether to lock body scroll when sheet is open. Default is true for modal sheets. | | `OnEscapeKeyDown` | `EventCallback` | | Event callback invoked when Escape key is pressed. | #### `SheetDescription` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The description text or content. | | `Class` | `string?` | | Additional CSS classes to apply to the description. | #### `SheetFooter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display in the sheet footer (typically action buttons). | | `Class` | `string?` | | Additional CSS classes to apply to the footer container. | #### `SheetHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display in the sheet header (typically SheetTitle and SheetDescription). | | `Class` | `string?` | | Additional CSS classes to apply to the header container. | #### `SheetTitle` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The title text or content. | | `Class` | `string?` | | Additional CSS classes to apply to the title. | #### `SheetTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to display inside the trigger button. | | `AsChild` | `bool` | `false` | When true, the trigger does not render its own button element. Instead, it passes trigger behavior via TriggerContext to child components. Use this when you want a custom component (like Button) to act as the trigger. | **Basic Usage:** ```razor Sheet Title Sheet description goes here.

Sheet content

 @* From different sides *@ ... ... ``` --- ### Sidebar **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Responsive sidebar with collapsible icon mode, multiple variants (default, floating, inset), and mobile sheet integration. **Components & Parameters:** #### `Sidebar` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the sidebar. | | `Class` | `string?` | | Additional CSS classes to apply to the sidebar. | | `Collapsible` | `bool` | `true` | Collapsible behavior: icon-only when collapsed, full width when expanded. Default is true. | | `AutoDetectActive` | `bool` | `false` | Whether menu items should automatically detect their active state based on current URL. When enabled, all SidebarMenuButton and SidebarMenuSubButton components will automatically highlight based on whether their Href matches the current route. Default is false. | #### `SidebarContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarFooter` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render in the footer. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarGroup` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The group content (typically SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarGroupAction` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The button content (typically an icon). | | `Tooltip` | `string?` | | Tooltip text for the action. | | `AsChild` | `SidebarMenuButtonElement` | `SidebarMenuButtonElement.Button` | The element tag to render (button or a). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarGroupContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The group content. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarGroupLabel` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The label content. | | `AsChild` | `SidebarGroupLabelElement` | `SidebarGroupLabelElement.Div` | The element tag to render (div or button for collapsible). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarHeader` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render in the header. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarHeaderContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render (typically SidebarHeaderIcon and SidebarHeaderInfo). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarHeaderInfo` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The text content to render (typically title and subtitle spans). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarInset` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The main content to render. | | `Class` | `string?` | | Additional CSS classes to apply to the inset. | #### `SidebarMenu` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The menu items to render. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuAction` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The button content (typically an icon). | | `Tooltip` | `string?` | | Tooltip text for the action. | | `ShowOnHover` | `bool` | | Whether to show the action only on hover. | | `AsChild` | `SidebarMenuButtonElement` | `SidebarMenuButtonElement.Button` | The element tag to render (button or a). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuBadge` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The badge content (typically a number or text). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuButton` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The button content. | | `Tooltip` | `string?` | | Tooltip text to show when sidebar is collapsed (icon-only mode). | | `Size` | `SidebarMenuButtonSize` | `SidebarMenuButtonSize.Default` | Size variant for the button. | | `Variant` | `SidebarMenuButtonVariant` | `SidebarMenuButtonVariant.Default` | Style variant for the button. | | `IsActive` | `bool?` | | Whether this menu item is active/selected. If not set, active state will be auto-detected based on Href and Match if the Sidebar has AutoDetectActive enabled. | | `AsChild` | `SidebarMenuButtonElement` | `SidebarMenuButtonElement.Button` | The element type to render. Defaults to Button, but automatically switches to Anchor if Href is provided. | | `Href` | `string?` | | The URL to navigate to. When provided, the button automatically renders as a NavLink (unless AsChild is explicitly set to Button). | | `Match` | `NavLinkMatch` | `NavLinkMatch.Prefix` | How the link should match the current URL. Default is NavLinkMatch.Prefix. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuChevron` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The chevron icon content (typically a LucideIcon). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The menu item content (typically SidebarMenuButton). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuSkeleton` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ShowIcon` | `bool` | | Whether to show an icon skeleton. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuSub` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The submenu items to render. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuSubButton` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The button content. | | `AsChild` | `SidebarMenuButtonElement` | `SidebarMenuButtonElement.Button` | The element tag to render. Defaults to Button, but automatically switches to Anchor if Href is provided. | | `Href` | `string?` | | The URL to navigate to. When provided, the button automatically renders as a NavLink (unless AsChild is explicitly set to Button). | | `Match` | `NavLinkMatch` | `NavLinkMatch.Prefix` | How the link should match the current URL. Default is NavLinkMatch.Prefix. | | `IsActive` | `bool?` | | Whether this submenu item is active/selected. If not set, active state will be auto-detected based on Href and Match if the Sidebar has AutoDetectActive enabled. | | `Size` | `SidebarMenuSubButtonSize` | `SidebarMenuSubButtonSize.Medium` | Button size variant. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarMenuSubItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The submenu item content (typically SidebarMenuSubButton). | #### `SidebarProvider` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The content to render inside the sidebar provider. Should typically contain SidebarLayout with Sidebar and SidebarInset. | | `DefaultOpen` | `bool` | `true` | Default open state for the sidebar on desktop. | | `Variant` | `SidebarVariant` | `SidebarVariant.Sidebar` | The sidebar variant/style. | | `Side` | `SidebarSide` | `SidebarSide.Left` | Which side the sidebar appears on. | | `CookieKey` | `string?` | `"sidebar:state"` | Cookie key for persisting sidebar state. Set to null to disable persistence. | | `HeightClass` | `string` | `"min-h-screen"` | CSS class for controlling the container height. Defaults to "min-h-screen" to fill viewport and grow with content. Can be set to "h-screen" for fixed viewport height or "h-full" for contained layouts. | | `StaticRendering` | `bool` | `false` | Enable static rendering mode for SSR/prerendering scenarios. When true, JS will set up click delegation to call C# toggle via interop. Set to true when using rendermode="InteractiveServer" or "InteractiveAuto" in MainLayout. | #### `SidebarRail` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `OnClick` | `EventCallback` | | Click handler for custom behavior. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarSeparator` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes. | #### `SidebarTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Custom content for the trigger button. If not provided, defaults to a panel-left icon. | | `Icon` | `RenderFragment?` | | Replaces the default panel-left icon with a custom icon (v3.7.0). | | `OnClick` | `EventCallback` | | Click handler for custom behavior.4 | | `Class` | `string?` | | Additional CSS classes. | **Basic Usage:** ```razor

App Name

 Navigation Home Settings User Menu
@Body
 ``` --- ### SidebarPillNav **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Version:** 3.7.0+ **Description:** Pill-style collapsed sidebar navigation. Set `CollapsedMode="SidebarCollapsedMode.Pill"` on `` to activate. `SidebarPillNav` renders a floating pill container when collapsed and a normal nav list when expanded. Wraps items in a built-in `TooltipProvider` — no manual wrapping required. **Components & Parameters:** #### `SidebarPillNav` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Navigation items (`SidebarPillNavItem`, `SidebarPillFade`, `SidebarPillSpacer`). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarPillNavItem` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Href` | `string` | (required) | Navigation URL. Renders as a `NavLink`. | | `Icon` | `string?` | | Lucide icon name shown when the sidebar is collapsed. | | `Title` | `string?` | | Tooltip when collapsed; visible label when expanded (v3.7.1). | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarPillFade` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes. | Gradient fade overlay placed at the scroll boundary of `SidebarPillNav`. #### `SidebarPillInset` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | Main page content area when using pill-mode layout. | | `Class` | `string?` | | Additional CSS classes. | #### `SidebarPillSpacer` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Class` | `string?` | | Additional CSS classes. | Vertical spacer for use inside `SidebarPillNav`. **Basic Usage:** ```razor @Body ``` --- ### Skeleton **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Loading placeholders with shimmer animation. Shows content structure while loading. **Components & Parameters:** #### `Skeleton` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Shape` | `SkeletonShape` | `SkeletonShape.Rectangular` | Gets or sets the shape variant of the skeleton. A value. Default is . : Default rectangular shape with rounded corners : Circular shape, ideal for avatar placeholders | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the skeleton element. A string containing one or more CSS class names, or null. Use this parameter to customize the skeleton's dimensions and spacing. Common Tailwind utilities include: Height: h-4, h-12, h-[200px] Width: w-full, w-[250px], w-1/2 Margin: mb-2, mt-4 | **Basic Usage:** ```razor @* Simple skeleton *@ @* Card skeleton *@ ``` --- ### Slider **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Range input for numeric value selection with single or multiple handles. Interactive slider for selecting values. **Components & Parameters:** #### `Slider` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `double` | | Gets or sets the current value of the slider. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback that is invoked when the value changes. | | `Min` | `double` | `0` | Gets or sets the minimum value. | | `Max` | `double` | `100` | Gets or sets the maximum value. | | `Step` | `double` | `1` | Gets or sets the step increment. | | `Disabled` | `bool` | | Gets or sets whether the slider is disabled. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the slider. | **Basic Usage:** ```razor @* Single value slider *@

Value: @sliderValue

@* Range slider *@ @code { private double sliderValue = 50; private double[] rangeValues = new[] { 25.0, 75.0 }; } ``` --- ### Spinner **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Loading indicators with multiple sizes. Animated spinner for loading states. **Components & Parameters:** #### `Spinner` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Size` | `SpinnerSize` | `SpinnerSize.Medium` | Gets or sets the size of the spinner. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the spinner. | **Basic Usage:** ```razor @* Default spinner *@ @* Different sizes *@ @* With text *@
Loading...
``` --- ### Switch **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Toggle switch component for boolean settings. Alternative to checkbox with toggle UI. **Components & Parameters:** #### `Switch` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Checked` | `bool` | | Gets or sets whether the switch is checked (on). This property supports two-way binding using the @bind-Checked directive. Changes to this property trigger the CheckedChanged event callback. | | `CheckedChanged` | `EventCallback` | | Gets or sets the callback invoked when the checked state changes. This event callback enables two-way binding with @bind-Checked. It is invoked whenever the user toggles the switch state. | | `Disabled` | `bool` | | Gets or sets whether the switch is disabled. When disabled: - Switch cannot be clicked or focused - Opacity is reduced - Pointer events are disabled - aria-disabled attribute is set to true | | `Size` | `SwitchSize` | `SwitchSize.Medium` | Gets or sets the size variant of the switch. Available sizes: - Small: Compact switch for dense layouts - Medium: Default size (recommended) - Large: Prominent switch for primary actions | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the switch. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the switch. Provides accessible text for screen readers when the switch doesn't have associated label text. | | `Id` | `string?` | | Gets or sets the ID attribute for the switch element. Used for associating the switch with label elements via htmlFor attribute. | | `Name` | `string?` | | Gets or sets the name of the switch for form submission. This is critical for form submission. The name/value pair is submitted to the server. If not specified, falls back to the Id value. | | `Required` | `bool` | | Gets or sets whether the switch is required. When true, the switch must be checked for form submission. Works with form validation. | | `CheckedExpression` | `Expression>?` | | Gets or sets an expression that identifies the bound value. Used for form validation integration. When provided, the switch registers with the EditContext and participates in form validation. | **Basic Usage:** ```razor @* Simple switch *@ @* With label *@
@* Disabled *@ @code { private bool isEnabled = false; private bool airplaneMode = false; } ``` --- ### Tabs **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Tabbed interfaces with controlled/uncontrolled modes. Organize content into switchable tabs. **Components & Parameters:** #### `Tabs` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the tabs. Should include TabsList and TabsContent components. | | `Value` | `string?` | | Controls which tab is active (controlled mode). When null, the tabs manage their own state (uncontrolled mode). | | `ValueChanged` | `EventCallback` | | Event callback invoked when the active tab changes. Use with @bind-Value for two-way binding. | | `DefaultValue` | `string?` | | Default active tab value when in uncontrolled mode. | | `OnValueChange` | `EventCallback` | | Event callback invoked when the active tab changes. | | `Orientation` | `TabsOrientation` | `TabsOrientation.Horizontal` | Orientation of the tabs (horizontal or vertical). Default is horizontal. | | `ActivationMode` | `TabsActivationMode` | `TabsActivationMode.Automatic` | Activation mode for tabs (automatic on focus or manual on click). Default is automatic. | #### `TabsContent` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ForceMount` | `bool` | `false` | Whether to force mount the content even when inactive. | | `ChildContent` | `RenderFragment?` | | The child content to render when this tab is active. | | `Class` | `string?` | | Additional CSS classes to apply to the tab content. | #### `TabsList` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `ChildContent` | `RenderFragment?` | | The child content to render within the tabs list. Should contain TabsTrigger components. | | `Class` | `string?` | | Additional CSS classes to apply to the tabs list. | #### `TabsTrigger` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Disabled` | `bool` | | Whether this tab trigger is disabled. | | `ChildContent` | `RenderFragment?` | | The child content to render within the tab trigger. | | `Class` | `string?` | | Additional CSS classes to apply to the tab trigger. | **Basic Usage:** ```razor Account Password Account Account settings content Password Password settings content ``` --- ### Textarea **Package:** `NeoUI.Blazor` **Namespace:** `NeoUI.Blazor` **Installation:** ```bash dotnet add package NeoUI.Blazor --version 3.6.3 ``` **Import:** ```razor @using NeoUI.Blazor ``` **Description:** Multi-line text input with automatic content sizing. Resizable textarea for long text input. **Components & Parameters:** #### `Textarea` | Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `Value` | `string?` | | Gets or sets the current value of the textarea. Supports two-way binding via @bind-Value syntax. | | `ValueChanged` | `EventCallback` | | Gets or sets the callback invoked when the textarea value changes. This event is fired on every keystroke (oninput event). Use with Value parameter for two-way binding. | | `Placeholder` | `string?` | | Gets or sets the placeholder text displayed when the textarea is empty. Provides a hint to the user about what to enter. Should not be used as a replacement for a label. | | `Disabled` | `bool` | | Gets or sets whether the textarea is disabled. When disabled: - Textarea cannot be focused or edited - Cursor is set to not-allowed - Opacity is reduced for visual feedback | | `Required` | `bool` | | Gets or sets whether the textarea is required. When true, the HTML5 required attribute is set. Works with form validation and :invalid CSS pseudo-class. | | `MaxLength` | `int?` | | Gets or sets the maximum number of characters allowed in the textarea. When set, the HTML5 maxlength attribute is applied. Browser will prevent users from entering more than this many characters. | | `MinLength` | `int?` | | Gets or sets the minimum number of characters required. Works with form validation. Browser validates that at least this many characters are present. | | `Name` | `string?` | | Gets or sets the name of the textarea for form submission. This is critical for form submission. The name/value pair is submitted to the server. Should be unique within the form. | | `Autocomplete` | `string?` | | Gets or sets the autocomplete hint for the browser. Examples: "on", "off", "name", "street-address". Helps browsers provide appropriate autofill suggestions. | | `Readonly` | `bool` | | Gets or sets whether the textarea is read-only. When true, the user cannot modify the value, but it's still focusable and submitted with forms. Different from Disabled - readonly textareas are still submitted with forms. | | `Rows` | `int?` | | Gets or sets the visible number of text rows. Specifies the height of the textarea in rows of text. If not specified, the component uses field-sizing-content for automatic sizing. | | `Cols` | `int?` | | Gets or sets the visible width in characters. Specifies the width of the textarea in average character widths. Usually controlled by CSS width instead. | | `Wrap` | `string?` | | Gets or sets how text wraps when submitted in a form. Values: "soft" (default - newlines not submitted), "hard" (newlines submitted), "off" (no wrapping). When "hard", the cols attribute must be specified. | | `InputMode` | `string?` | | Gets or sets the input mode hint for mobile keyboards. Examples: "none", "text", "decimal", "numeric", "tel", "search", "email", "url". Helps mobile devices show the appropriate keyboard. | | `Autofocus` | `bool` | | Gets or sets whether the textarea should be auto-focused when the page loads. Only one element per page should have autofocus. Improves accessibility when used appropriately. | | `Spellcheck` | `bool?` | | Gets or sets whether spell checking is enabled. Can be true, false, or null (browser default). Useful for controlling spell checking on technical content, code, etc. | | `Class` | `string?` | | Gets or sets additional CSS classes to apply to the textarea. Custom classes are appended after the component's base classes, allowing for style overrides and extensions. | | `Id` | `string?` | | Gets or sets the HTML id attribute for the textarea element. Used to associate the textarea with a label element via the label's 'for' attribute. This is essential for accessibility and allows clicking the label to focus the textarea. | | `AriaLabel` | `string?` | | Gets or sets the ARIA label for the textarea. Provides an accessible name for screen readers. Use when there is no visible label element. | | `AriaDescribedBy` | `string?` | | Gets or sets the ID of the element that describes the textarea. References the id of an element containing help text or error messages. Improves screen reader experience by associating descriptive text. | | `AriaInvalid` | `bool?` | | Gets or sets whether the textarea value is invalid. When true, aria-invalid="true" is set. Should be set based on validation state. Triggers destructive color styling for error states. | **Basic Usage:** ```razor @* Simple textarea *@