MockupBrowser: Blazor mockup browser component

Examples

Basic

Url fills the address bar; child content sits in the window.

Welcome to Acme Cloud

Deploy your first app in five minutes.

website/Examples/Mockup/MockupBrowserBasicExample.razor Source

Border colour

BorderColor tints the frame with a semantic colour.

BorderColor.Primary

BorderColor.Secondary

website/Examples/Mockup/MockupBrowserBorderExample.razor Source

Playground

Deploy your first app in five minutes.

ChildContent

Url

BorderColor Color

<MockupBrowser
               Url="https://acme.cloud"
               BorderColor="Color.Primary"
               Class="w-full max-w-md border-2">
    Deploy your first app in five minutes.
</MockupBrowser>

API

<MockupBrowser>

DaisyBlazor

Parameters

BorderColor Color
= Color.Default
Optional border color token applied as border-{token}; defaults to border-base-300. A 1px border is always drawn.
Url string
= null
Optional URL string shown in the address bar input; ignored when Toolbar is set.
Class string
= null
Extra CSS classes added to the mockup-browser element.
Style string
= null
Inline styles applied to the mockup-browser element.

Name	Type	Default	Description
BorderColor	Color	Color.Default	Optional border color token applied as border-{token}; defaults to border-base-300. A 1px border is always drawn.
Url	string	null	Optional URL string shown in the address bar input; ignored when Toolbar is set.
Class	string	null	Extra CSS classes added to the mockup-browser element.
Style	string	null	Inline styles applied to the mockup-browser element.

Content

ChildContent RenderFragment
Content rendered inside the browser display area.
Toolbar RenderFragment
Optional custom toolbar content; rendered inside the toolbar bar instead of the default URL input.

Name	Type	Description
ChildContent	RenderFragment	Content rendered inside the browser display area.
Toolbar	RenderFragment	Optional custom toolbar content; rendered inside the toolbar bar instead of the default URL input.

MockupBrowser