CanDoItAll.Components.BaseLib 0.1.15

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package CanDoItAll.Components.BaseLib --version 0.1.15
                    


                    

                
NuGet\Install-Package CanDoItAll.Components.BaseLib -Version 0.1.15
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="CanDoItAll.Components.BaseLib" Version="0.1.15" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="CanDoItAll.Components.BaseLib" Version="0.1.15" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="CanDoItAll.Components.BaseLib" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add CanDoItAll.Components.BaseLib --version 0.1.15
                    


                    

                
#r "nuget: CanDoItAll.Components.BaseLib, 0.1.15"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package CanDoItAll.Components.BaseLib@0.1.15
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=CanDoItAll.Components.BaseLib&version=0.1.15
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=CanDoItAll.Components.BaseLib&version=0.1.15
                    


                            Install as a Cake Tool

CanDoItAll.Components.BaseLib

Purpose

BaseLib is the everyday UI toolkit in CanDoItAll.Components: ready-made, Tailwind-styled Razor components for product pages, forms, navigation, feedback, layout, dialogs, and application chrome. Use it to establish a consistent Blazor UI quickly while keeping your page state and business behavior in the application.

Get started

Add the namespace, register BaseLib services once, and include the shared stylesheet in the host document:

// Program.cs
builder.Services.AddCanDoItAllBaseLib();

@* App.razor <head> *@
<link rel="stylesheet" href="_content/CanDoItAll.Components.BaseLib/css/output.css" />

@using CanDoItAll.Components.BaseLib

<SectionCard Title="Release review" Description="A composed surface using shared spacing and Tailwind styling.">
    <Stack GapScale="LayoutGap.Medium">
        <StatusBadge Text="Ready" Tone="success" />
        <Button Text="Open review" />
    </Stack>
</SectionCard>

Use BaseLib for ordinary, document-style product UI. Choose OverlayLib for bounded floating tools, CanvasLib for stateful workbenches, and the focused packages for charts, Mermaid, QR, or WebGL.

What is included

The catalog is grouped by the way developers assemble pages: visual status and actions; cards and metric panels; forms and data display; layout and navigation; dialog, tooltip, and notification feedback; and supporting typography. Compatibility components remain listed so existing consumers can migrate intentionally.

Compact, task-first composition

Compact UI means spending the first viewport on the user's primary task, not removing useful whitespace. Start with PageHeader Compact="true", keep page and section gaps at LayoutGap.Medium, and let one list, table, canvas, or form own the available space.

Need Prefer Avoid
Supporting counts beside a working surface CompactStatStrip with CompactStat A row of tall summary cards
Sparse metric-first dashboard SummaryTiles or MetricCard Tiny badges floating in an otherwise empty page
Add or edit an item from a list Dense SelectionListItem rows plus a dialog opened on demand A permanent editor stacked below the list
Related secondary views SecondaryTabs Dense="true" Several always-visible cards with equal prominence
Visual collection card Structured Card slots: Media, Header, Tags, content, then Actions Ad hoc image and action alignment in every consumer

Choose input and overlay sizes from expected content:

  • TextAreaSize.Compact is three rows for short explanations, Standard is five rows for ordinary notes, and Extended is ten rows for long-form content. Set Rows only when the domain has a more precise requirement.
  • ModalSize.Compact fits a focused form or confirmation, Medium fits a multi-section form, Wide fits a dense editor or simple two-pane comparison, and Full is reserved for workspace-like flows. DenseChrome="true" reduces dialog chrome without shrinking the working content.
  • Load dialog-only data when the dialog opens; keep loading and error state explicit inside it.
  • CardGrid uses container-aware tracks, so a short collection fills its surface without reserving empty fixed columns.
  • Give SelectionListItem an OnSelect callback only when its content is actionable. Without it, the item body is passive; Disabled applies to row selection only, and slotted actions must receive their own disabled state.
  • Compound fields such as SecretField wrap from their actual container width. Validate them inside realistic narrow grid, card, and dialog columns even when the browser viewport itself is wide.

Card remains compatible with child-only content. Use its structured slots for collection items so media is centered, content stretches consistently, tags stay grouped, and actions align at the bottom:

<Card>
    <Media><Avatar Name="Ada Lovelace" /></Media>
    <Header><TextBlock TextStyle="TextStyle.Subtitle1" Value="Analysis record" /></Header>
    <Tags><StatusBadge Text="Ready" Tone="success" /></Tags>
    <ChildContent><SmallText Text="Updated today" /></ChildContent>
    <Actions><Button Text="Edit" Variant="Variant.Outlined" /></Actions>
</Card>

Component Catalog

BaseLib currently exposes 163 Razor components. Links point to the component source file.

Badges, Chips, And Status

Buttons And Commands

Cards, Panels, And Metrics

Data Display And Timelines

Data Visualization

Feedback, Help, And Overlays

Forms And Inputs

Identity And Icons

Layout And Shells

Lists And Selection

Modals And Dialogs

Storage

Typography

Project Type

  • SDK: Microsoft.NET.Sdk.Razor
  • Target framework(s): net10.0
  • Validation command:
dotnet build src/CanDoItAll.Components.BaseLib/CanDoItAll.Components.BaseLib.csproj

References

Project references:

  • ../CanDoItAll.Components.Common/CanDoItAll.Components.Common.csproj

Framework references:

  • None

Direct package references:

  • Microsoft.AspNetCore.Components.Web (10.0.4)

Architecture Notes

Keep shared UI reusable and typed. Use BaseLib for ordinary product UI, CanvasLib for graph/canvas surfaces, OverlayLib for floating windows, WebGlLib for WebGL concepts, and sandbox projects only for demos or proof.

Side Menu

SideMenu accepts typed items through Items, MoreItems, and BottomItems, and it also supports declarative SideMenuItem tags in the matching Razor regions. Both sources are composed into the same selection and overflow model:

<SideMenu MenuId="workspace"
          Title="Workspace"
          Items="@PinnedItems"
          @bind-Expanded="menuExpanded"
          ItemSelected="HandleSelection">
    <MenuItems>
        <SideMenuItem Id="timeline" Text="Timeline" Icon="timeline" />
        <SideMenuItem Id="audit"
                      Text="Audit archive"
                      Icon="inventory"
                      OverflowBehavior="SideMenuOverflowBehavior.AlwaysInMore" />
    </MenuItems>
    <MoreContent>
        @* Optional custom content below the typed More items. *@
    </MoreContent>
    <BottomMenuItems>
        <SideMenuItem Id="settings" Text="Settings" Icon="settings">
            <PanelContent>@* Optional BaseLib subcard or menu. *@</PanelContent>
        </SideMenuItem>
    </BottomMenuItems>
</SideMenu>

Use the scoped SideMenuService when a tab or another application feature needs to drive the menu without a component reference. SetItems temporarily replaces the declared primary items, ResetItems restores them, and external selection follows the same callback pipeline as pointer selection:

@inject SideMenuService SideMenus
@implements IDisposable

@code {
    private IDisposable? subscription;

    protected override void OnInitialized()
        => subscription = SideMenus.Subscribe(
            "workspace",
            selection => HandleSelectionAsync(selection));

    private void ShowProjectMenu(IReadOnlyList<ISideMenuItem> items)
        => SideMenus.SetItems("workspace", items);

    private Task<bool> SelectTimelineAsync()
        => SideMenus.SelectAsync("workspace", "timeline");

    public void Dispose() => subscription?.Dispose();
}

SetExpanded and ToggleExpanded provide external state control. The component also exposes two-way Expanded binding and, by default, remembers each MenuId under localStorage; set PersistExpandedState="false" when persistence belongs to application settings instead. Desktop item capacity is measured from the real available height, while the small breakpoint changes the rail into a top menu that opens downward.

Overlay Services

BaseLib provides scoped services for app-level overlays:

  • DialogService opens service-driven dialogs through a mounted <DialogHost />.
  • TooltipService opens pointer-positioned tooltips through a mounted <Tooltip />.
  • NotificationService owns toast messages rendered by a mounted <Notification />.

Register the services once:

builder.Services.AddCanDoItAllBaseLib();

Mount the hosts once in the interactive layout:

<DialogHost />
<Tooltip />
<Notification />

DialogService.OpenAsync(...) returns the object supplied to DialogReference.CloseAsync(result). Existing direct <Dialog IsOpen="..."> usage remains supported for controlled component flows.

Notifications can be positioned per message with NotificationMessage.Position or the Notify(..., position: ...) overload. Supported positions cover top, center, and bottom stacks on the left, center, and right edges, with TopRight as the default.

Tooltips can be positioned with TooltipOptions.Position or TooltipTarget Position. The enum supports the standard Top, Bottom, Left, and Right placements plus corner and edge alignments such as TopLeft, BottomRight, LeftTop, and RightBottom.

Overlay Positioning Guidance

Notification placement should protect the current workflow first. Use TopRight for ordinary desktop toasts, BottomCenter when top navigation or mobile reach would make top stacks awkward, and side positions such as BottomLeft, CenterLeft, or CenterRight when the message belongs near a side rail, list pane, or action region. Reserve TopCenter for global high-importance messages that still do not require a decision. If the user must choose, confirm, or resolve something before continuing, use DialogService or an inline Alert instead of a notification.

Notification alerts intentionally use only the compact X close control so the message width stays available for useful summary and detail text. Keep copy short, set Duration deliberately, and use per-message Position when one notification needs to appear somewhere other than the host default.

Tooltip placement should keep the bubble visible and away from the next likely action. Use Top or Right when there is room, Bottom for triggers near the top edge, Top for triggers near lower toolbars or footers, and Left or Right for dense inline controls. Use corner or edge placements such as TopLeft, BottomRight, LeftTop, or RightBottom near viewport, card, toolbar, or panel corners so the tooltip does not cover neighboring controls.

For agent-driven changes, query the Components MCP metadata for Notification, Tooltip, or TooltipTarget before choosing non-default positions, then validate unusual placements in the sandbox with Playwright at the viewport sizes used by the target page.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (4)

Showing the top 4 NuGet packages that depend on CanDoItAll.Components.BaseLib:

Package Downloads
CanDoItAll.Components.OverlayLib

Shared overlay window components, runtime helpers, and assets for CanDoItAll workbench surfaces.
CanDoItAll.Components.CanvasLib

Canonical shared canvas runtime for active CanDoItAll workbench surfaces.
CanDoItAll.Components.QRCode

Shared QR code generation, display, and scanner shell components for CanDoItAll Blazor applications.
CanDoItAll.Components.Gantt

Reusable controlled Gantt contracts and scheduling for Blazor canvas surfaces.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.1.15 81 7/24/2026