Component basics
Every view implements IComponent with a Render() method. Composition is just C# method calls.
using static Tesserae.UI;
public class TicketView : IComponent
{
private readonly string _title;
public TicketView(string title) => _title = title;
public dom.HTMLElement Render() =>
VStack().Children(
TextBlock(_title).Size(20).SemiBold(),
HStack().Children(
Button("Assign").OnClick(() => AssignTicket()),
Button("Close").OnClick(() => CloseTicket())
)
).Render();
}
Layout primitives:
| Component | What it is |
|---|---|
VStack() |
Vertical flexbox |
HStack() |
Horizontal flexbox |
Grid() |
CSS grid |
Defer(async () => ...) |
Async content — renders a spinner, then the result |
Common components: TextBlock, Button, SearchBox, TextBox, Dropdown, Card, Modal, Pivot, ProgressBar, Badge, Avatar, Toast