DashboardLayout

Låt användare bygga sin egen instrumentpanel genom att flytta och ändra storlek på brickor med mus, beröring eller tangentbord.

Varför det hjälper

• Flytta och ändra storlek på brickor
• Tangentbordsstöd
• Eget brickinnehåll

Var det passar

• Instrumentpaneler
• Startsidor
• Övervakning

Exempel

<DashboardLayout Label="Sales dashboard" OnLayoutChanged="Changed">
    <DashboardTile Id="revenue" Title="Revenue" Column="1" Row="1" ColumnSpan="4" RowSpan="2">
        <Statistic Label="This month" Value="48,200" />
    </DashboardTile>
    <DashboardTile Id="trend" Title="Trend" Column="5" Row="1" ColumnSpan="8" RowSpan="3">
        <LineChart Label="Orders" Width="560" Height="200" Categories="@(["Jan", "Feb", "Mar", "Apr"])" Series="@([new ChartSeries("Orders", [12, 18, 15, 24])])" />
    </DashboardTile>
    <DashboardTile Id="share" Title="Status" Column="1" Row="3" ColumnSpan="4" RowSpan="2">
        <Gauge Label="Target" Value="72" Unit="%" />
    </DashboardTile>
</DashboardLayout>

<p>@_message</p>

@code {
    private string _message = "Drag a title to move a tile, drag its corner to resize.";

    private void Changed(IReadOnlyList<DashboardPlacement> placements) =>
        _message = string.Join(", ", placements.Select(p => $"{p.Id}: column {p.Column}, row {p.Row}, {p.ColumnSpan} x {p.RowSpan}"));
}

Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.

Del av RayCraft Complete.

Alla kontroller · Dokumentation