OsirionResponsiveShowcaseSection

OsirionResponsiveShowcaseSection shows content inside a browser-like frame with buttons that switch the frame between desktop, tablet and mobile widths, and an optional code sample under it. It is a tool for component demos and design reviews, not for a production page.

Usage

The component is in its own namespace, and switching widths needs an interactive render mode on the page:

@page "/demo/cards"
@rendermode InteractiveServer
@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Components.Sections

<OsirionResponsiveShowcaseSection Title="Feature card">
    <OsirionFeatureCard Title="Static SSR" Description="Every component renders on the server." />
</OsirionResponsiveShowcaseSection>

Start in the mobile width and offer the markup under the preview:

<OsirionResponsiveShowcaseSection Title="Hero"
                                  InitialViewport="OsirionResponsiveShowcaseSection.ViewportMode.Mobile"
                                  CodeSnippet="@heroMarkup">
    <HeroSection Title="Release notes" Subtitle="What changed in each version" />
</OsirionResponsiveShowcaseSection>

@code {
    private const string heroMarkup =
        "<HeroSection Title=\"Release notes\" Subtitle=\"What changed in each version\" />";
}

Parameters

ViewportMode is nested in the component: write OsirionResponsiveShowcaseSection.ViewportMode.Mobile. The component also declares Class, ShowBrowserChrome and unmatched attributes, but 4.0 does not apply them: the frame always has its browser bar, and the root element takes no extra classes or attributes.

Behavior

• The frame widths are 1200px (desktop), 768px (tablet) and 375px (mobile), each capped at 100% of the available width.
• The frame is a <div>, not an <iframe>. Layouts that depend on the width of their container (wrapping flex rows, auto-fit grids, container queries) change with the frame; CSS media queries still follow the browser window.
• Switching widths and showing the code are Blazor event handlers. Under static SSR the component renders in its InitialViewport with the code hidden, and the buttons do nothing. Because ChildContent cannot cross a render mode boundary, make the whole page interactive rather than setting @rendermode on this component.
• The width buttons report their state with aria-pressed, but in 4.0 they contain only icons hidden from assistive technology and have no accessible name.

Styling

The root is osirion-responsive-showcase, with showcase-header, showcase-title, viewport-controls and viewport-btn (active on the current width) for the header, and showcase-body, viewport-container (viewport-desktop, viewport-tablet or viewport-mobile), viewport-chrome, component-wrapper, dimensions-info and code-section for the rest.

Related

• Core section components
• Feature card
• Hero section