Skip to content
daisyBlazor

DetailLayout

A detail-page scaffold: back button, title with a status slot, main content with an optional sidebar, and a related area. DetailCard and DetailRow fill it with label and value tables.
Layout
Cover · <DetailLayout>
Northwind Traders

Owner

Ana Silva

Region

EU West

Customer since

March 2021

Plan

Enterprise

Seats

120

Examples

Detail page

The full scaffold; BackRoute is where the back button navigates.

All invoices

Invoice INV-4821

Issued on 12 October to Northwind Traders

Paid

Pro plan, 12 seats

Billed monthly, 1 to 31 October

Total

348,00 €

Payment reference: ACME-8841-2273

website/Examples/Layout/DetailLayoutPageExample.razor Source

Detail cards

DetailCard is a titled, dense table of DetailRow; ValueContent renders anything in place of a plain Value.

Customer

Name

Ana Silva

Email

ana.silva@northwind.example

Customer since

2019

Subscription

Plan

Pro

Status

Trial

Renews

1 November

website/Examples/Layout/DetailLayoutCardExample.razor Source

API

<DetailLayout>

DaisyBlazor.Layout

Standard detail-page scaffold: back link, title, optional status slot, main content, optional sidebar, optional related-content area.

Parameters

  • BackLabel string
    = null

    Label of the back button. Defaults to "Back"; pass a localized string to override.

  • BackRoute string
    = required

    Route the back link points to.

  • Subtitle string
    = null

    Optional secondary line beneath the title.

  • Title string
    = required

    Page title.

  • Class string
    = null

    Optional CSS class forwarded to the root container.

  • Style string
    = null

    Optional inline style forwarded to the root container.

Content

  • MainContent RenderFragment

    Primary content of the detail page.

  • RelatedContent RenderFragment

    Optional full-width section rendered below the main grid.

  • Sidebar RenderFragment

    Optional sidebar (right column on md+ viewports).

  • StatusSlot RenderFragment

    Optional element rendered next to the title (typically a status chip).

<DetailCard>

DaisyBlazor.Layout

Paper-wrapped detail card with an icon+title header and a dense, hoverable daisyUI table body. Pair with DetailRow.

Parameters

  • Dense bool
    = true

    When true, applies dense styling to the inner table. Defaults to true.

  • Elevation int
    = 1

    Paper elevation. Defaults to 1.

  • Icon string
    = null

    Optional icon shown to the left of Title.

  • Title string
    = required

    Card title shown in the header row.

  • Class string
    = null

    Optional CSS class forwarded to the root paper.

  • Style string
    = null

    Optional inline style forwarded to the root paper.

Content

  • ChildContent RenderFragment

    Body content — typically a sequence of DetailRow elements.

<DetailRow>

DaisyBlazor.Layout

Single label/value table row meant to be used inside a DetailCard. Provide either Value for plain text or ValueContent for richer rendering.

Parameters

  • Label string
    = required

    Label shown in the left column (muted text).

  • Value string
    = null

    Plain-text value shown in the right column when ValueContent is null.

  • Class string
    = null

    Optional CSS class forwarded to the row.

  • Style string
    = null

    Optional inline style forwarded to the row.

Content

  • ValueContent RenderFragment

    Richer right-column content (e.g. status chip, multi-element value). Overrides Value.

Something went wrong while running the docs. Reload