ComponentPreview

ComponentPreview is a preview written as a tag instead of a fence. The target component goes in Component, every other attribute is forwarded to it, and the Code tab shows the tag you would write in Razor.

Basic use

<Callout Title="Hello" Variant="info">Body text written on the tag.</Callout>

<ComponentPreview Component="Callout" Variant="info" Title="Hello">Body text written on the tag.</ComponentPreview>

Fence or tag

Forwarded attributes

Attributes other than Component and Layout are forwarded to the target, converted to each parameter's type the same way a fence converts them. A value that can't be converted is skipped with a logged warning and the component still renders.

<Card Description="Title and Description went straight to Card." Title="Forwarded" />

Child content

The body is parsed as Razor, like a fence body, so nested tags stay where you put them and nothing is wrapped in a paragraph. Direct child tags that match one of the target's RenderFragment parameters go into that slot.

Generic components

Close a generic target with a type-parameter attribute, as in Razor:

<ComponentPreview Component="DataGrid" TItem="Product" />

See razor:preview for the accepted type spellings.

Layout

Layout="stretch" lets a block-level target fill the frame. Layout="scroll" lets a wide one scroll on small screens. See PreviewFrame.

Unknown component

When Component doesn't match a registered type, the frame shows an error panel naming the tag. Register the assembly:

builder.Services.AddShellDocs(o =>
{
    o.RegisterComponentsFromAssembly<MyMarker>();
});

Code tabs

<CodeTab> children replace the generated tag in the Code panel. They are taken out of the body first, so the target component never receives them as child content. SyncKey and Caption work as on DemoPreview. See Code tabs on previews.

Props

See also