Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

CodeExample

A live example with its source under it.

An interactive page: C# runs over a Blazor Server connection.

A live example with its source: the preview (the content) in a frame, and the code under it in a Code block, colored on the server, with a copy button. Works with JavaScript off.

Usage

razor
<CodeExample Code="@source">
    <Button>Save</Button>
</CodeExample>

Preview and source

Use Code to show an example's source under its live preview, colored and with a copy button.

Preview

razor
<Button StartIcon="Lucide.Save">Save</Button>
<Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Cancel</Button>

Code

Source.razor 
<CodeExample Code="@Markup" Grow>
    <Row Gap="2" Wrap>
        <Button StartIcon="Lucide.Save">Save</Button>
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Cancel</Button>
    </Row>
</CodeExample>

Several files

Use CodeExampleFile parts to show each file of an example as a tab over its source.

Preview

SaveButton.razor

razor
<Button StartIcon="Lucide.Save" OnClick="Save">Save</Button>

SaveButton.razor.cs

csharp
public partial class SaveButton(DraftStore store)
{
    private Task Save() => store.SaveAsync();
}

Code

Files.razor 
@* Each CodeExampleFile is a tab over the source; the tabs switch with no script. *@
<CodeExample Center Grow>
    <Button StartIcon="Lucide.Save">Save</Button>
    <CodeExampleFile Title="SaveButton.razor" Code="@Markup" />
    <CodeExampleFile Title="SaveButton.razor.cs" Language="csharp" Code="@CodeBehind" HighlightLines="3" />
</CodeExample>

Hidden source

Use Collapsible to hide the source behind a "Show code" toggle.

Preview

Show code Hide code
razor
<Button Accent="Accent.Danger" StartIcon="Lucide.Trash">Delete project</Button>

Code

ShowCode.razor 
<CodeExample Code="@Markup" Center Collapsible Grow>
    <Button Accent="Accent.Danger" StartIcon="Lucide.Trash">Delete project</Button>
</CodeExample>

Details

Several files: CodeExampleFile parts among the content, shown as tabs over the source (the radio-button Tabs, so switching needs no script). Collapsible hides the source behind a "Show code" toggle (a <details>).

Parts

Written inside CodeExample. The API page lists their parameters.

  • CodeExampleFile: one source file of a CodeExample, shown as a tab over its source.

Mode support

What works in each mode, CodeExample
FeatureOffStaticLive
EverythingPartlyYesYes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto). With JavaScript off, the source has no copy button.

Accessibility

  • The source is a Code block: a tab stop that scrolls from the keyboard, with a copy button named "Copy code".
  • Several files are Tabs named "Source files" (FilesLabel): radio buttons with JavaScript off, ARIA tabs with it.
  • Collapsible uses a native details, so the toggle works with Enter and Space and no script; it reads "Show code" or "Hide code" (ShowCodeText, HideCodeText).
  • Headings in the preview stay headings to screen readers, though they're left out of the page's OnThisPage.

Parameters

CodeExample parameters
PropTypeDefault
ChildContentThe live example.RenderFragment?
CodeThe example's source.string?
LanguageThe language of the source, for colors.string"razor"
TitleA file name for the source, such as "SignIn.razor", in a header row (or on its tab).string?
HighlightLinesLines of the source to highlight, such as "3-5,9".string?
LineNumbersNumbers the source's lines.boolfalse
MaxHeightThe tallest the source gets before it scrolls, such as Length.Rem(20).Length?
CollapsibleHides the source behind a "Show code" toggle, which works with JavaScript off.boolfalse
SourceOpenWith Collapsible, starts with the source shown.boolfalse
CenterCenters the preview's content both ways.boolfalse
ShowCodeTextThe toggle's text while the source is hidden.string?"Show code"
HideCodeTextThe toggle's text while the source is shown.string?"Hide code"
FilesLabelThe source tabs' name for screen readers.string?"Source files"

Plus 16 item props and 4 common props.

Full API

See also

  • Code: inline code or a block, highlighted on the server.
  • Tabs: panels that switch with no script, or links to pages.
  • Collapsible: one "show more" section.