Blazorise BreakpointObserver component

Render different content at runtime based on the current responsive breakpoint.

<BreakpointObserver> listens to the shared responsive breakpoint service and re-renders its child content whenever the current breakpoint changes. Use it when the markup or behavior needs to change at runtime, not just the CSS classes.

If you only need styling changes, prefer regular responsive utility classes. Use <BreakpointObserver> when you need to switch layouts, controls, or content based on the active breakpoint.

Examples

Conditional Content

This example shows the current breakpoint and swaps the message based on whether the screen is below the desktop breakpoint or not.
Resolving...
<BreakpointObserver Context="breakpoint">
    <Card>
        <CardBody>
            <Field>
                <FieldLabel>
                    Current breakpoint
                </FieldLabel>
                <FieldBody>
                    <Badge Color="Color.Primary">@GetBreakpointLabel( breakpoint )</Badge>
                </FieldBody>
            </Field>

            @if ( breakpoint != Breakpoint.None && breakpoint.IsBelow( Breakpoint.Desktop ) )
            {
                <Alert Visible Color="Color.Info" Margin="Margin.Is3.FromTop">
                    Showing compact content for mobile and tablet screens.
                </Alert>
            }
            else if ( breakpoint != Breakpoint.None )
            {
                <Alert Visible Color="Color.Success" Margin="Margin.Is3.FromTop">
                    Showing expanded content for desktop and larger screens.
                </Alert>
            }
        </CardBody>
    </Card>
</BreakpointObserver>

@code {
    private static string GetBreakpointLabel( Breakpoint breakpoint )
    {
        return breakpoint == Breakpoint.None
            ? "Resolving..."
            : breakpoint.ToString();
    }
}

Conditional Layout

Here the same information is rendered in two different layouts. Small screens get a stacked layout, while desktop and larger screens get a split two-column layout.
Sidebar content
Main content 
<BreakpointObserver Context="breakpoint">
    @if ( breakpoint != Breakpoint.None && breakpoint.IsBelow( Breakpoint.Desktop ) )
    {
        <Div Padding="Padding.Is3"
             Background="Background.Light"
             Border="Border.Is1.Secondary.Subtle">
            <Div Padding="Padding.Is3"
                 Margin="Margin.Is3.FromBottom"
                 Background="Background.Primary.Subtle"
                 Border="Border.Is1.Primary.Subtle">
                Sidebar content
            </Div>
            <Div Padding="Padding.Is3"
                 Background="Background.Info.Subtle"
                 Border="Border.Is1.Info.Subtle">
                Main content
            </Div>
        </Div>
    }
    else
    {
        <Row>
            <Column ColumnSize="ColumnSize.Is4">
                <Div Padding="Padding.Is3"
                     Background="Background.Primary.Subtle"
                     Border="Border.Is1.Primary.Subtle">
                    Sidebar content
                </Div>
            </Column>
            <Column ColumnSize="ColumnSize.Is8">
                <Div Padding="Padding.Is3"
                     Background="Background.Info.Subtle"
                     Border="Border.Is1.Info.Subtle">
                    Main content
                </Div>
            </Column>
        </Row>
    }
</BreakpointObserver>

Conditional Actions

Runtime breakpoint detection is useful when the available actions should change, not only their styling. This example shows a single primary action on smaller screens and a fuller action set on larger screens.

Actions can also change with the active breakpoint. 

<BreakpointObserver Context="breakpoint">
    <Card>
        <CardBody>
            <Paragraph Margin="Margin.Is3.FromBottom">
                Actions can also change with the active breakpoint.
            </Paragraph>

            @if ( breakpoint != Breakpoint.None && breakpoint.IsBelow( Breakpoint.Desktop ) )
            {
                <Button Color="Color.Primary" Block>
                    Continue
                </Button>
            }
            else if ( breakpoint != Breakpoint.None )
            {
                <Buttons>
                    <Button Color="Color.Light">
                        Cancel
                    </Button>
                    <Button Color="Color.Secondary">
                        Save Draft
                    </Button>
                    <Button Color="Color.Primary">
                        Publish
                    </Button>
                </Buttons>
            }
        </CardBody>
    </Card>
</BreakpointObserver>

When to use it

Use <BreakpointObserver> when you want inline declarative rendering in markup. If you need to react in code-behind instead, inject IBreakpointService directly and use its Current, IsResolved, IsBelow, and IsAtLeast members.

API

Parameters

Parameter Description TypeDefault
ChildContent

Content rendered with the current breakpoint as the template context.

 RenderFragment<Breakpoint>null

Events

Event Description Type
BreakpointChanged

Raised whenever the observed responsive breakpoint changes.

 EventCallback<Breakpoint>
On this page