eQuantic.UI

eQuantic.UI Documentation

Core Architecture

Component Architecture

Build modular and reusable interfaces using pure C# composition. eQuantic.UI provides a robust type system to define the behavior and appearance of your elements.

HtmlNode

The base unit of everything. All HTML elements (Div, Span, Button) inherit from HtmlNode. They are lightweight and optimized for fast rendering on both server and client.

public class BaseComponent : StatefulComponent
{
    [Parameter] public string Title { get; set; }
    
    // Lifecycle: OnInitialized -> OnParametersSet -> OnAfterRender
    protected override async Task OnInitializedAsync()
    {
        // Initialization logic (e.g., load data)
    }

    public override HtmlNode Build() =>
        new Div("card") {
            Children = {
                new H3(Title),
                Content // Render component children
            }
        };
}

Stateless

Pure Components

Fast and predictable rendering without internal state or complex lifecycle.

Stateful

Reactive Components

Manage browser events and internal state with a robust lifecycle.

Component Catalog

Structure & Layout

Grid, FlexBox, Container and Section. Modern layout patterns using CSS Flex/Grid.

Forms & Inputs

Buttons, controlled Inputs, Checkboxes and Selects with integrated validation.

Display & Surfaces

Cards, Badges, Modals and Tooltips for structured information display.

Compound Components

Use compound components to create intuitive APIs. The Card example demonstrates how to structure sub-elements declaratively.

new Card {
    Header = new CardHeader("Title"),
    Content = new CardContent {
        new Text("Card content...")
    },
    Footer = new CardFooter {
        new Button("Action")
    }
};

Optimized Rendering

The eQuantic.UI compiler analyzes the component tree and automatically extracts static CSS classes at build-time, reducing JS sent to the client by up to 60% compared to traditional frameworks.