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.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Core.Components.Sections. Source on GitHub.

This page has no live demo. The width buttons and the code toggle are Blazor event handlers, so the component needs an interactive render mode, and this site renders its pages as static HTML, where the buttons would do nothing.

Usage

The component is in its own namespace, and switching widths needs an interactive render mode on the page. Without one, the frame renders in its InitialViewport and the buttons do nothing:

@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. Class and unmatched attributes are written to the root element. The component does not inherit OsirionComponentBase, so it has no Theme parameter.

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 frame's address bar shows fixed text (example.com - Desktop View, and the same for tablet and mobile), not your page's address.
• The browser bar (dots and address) is shown unless ShowBrowserChrome is false, which leaves it out of the markup and the with-chrome class off the root. On screens 600px wide or narrower the bar is hidden by CSS.
• The width buttons report their state with aria-pressed and are named "Desktop", "Tablet" and "Mobile" with aria-label; their icons are hidden from assistive technology.

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