Skip to content
IzzyBlazor Demos · latest

Enter all results ↑ ↓ move Esc close

Install guide

A setup page: numbered steps, a command with its own copy button, and files named in their header with the lines to change highlighted.

Install guide
Preview width
InstallGuide.razor
@* A setup guide: numbered steps, a command with its own copy button, and files with the lines
   to change highlighted. *@
<Stack Gap="8" MaxWidth="Length.Prose" Grow>
    <Stack Gap="2">
        <Heading Level="1" Size="TextSize.Xl3">Add IzzyBlazor to your app</Heading>
        <TextBlock Size="TextSize.Lg" Color="Color.Muted" Wrap="TextWrap.Pretty">
            Four steps in a Blazor Web App on .NET 10. No script tag to add: Blazor loads IzzyBlazor's script by itself.
        </TextBlock>
    </Stack>

    <Stack Gap="3">
        <Heading Level="2" Size="TextSize.Xl">1. Install the package</Heading>
        <Row Gap="2" Align="Align.Center" Wrap>
            <Code>dotnet add package IzzyBlazor --prerelease</Code>
            <CopyButton Text="dotnet add package IzzyBlazor --prerelease" Label="Copy the command" Size="ControlSize.Sm" />
        </Row>
    </Stack>

    <Stack Gap="3">
        <Heading Level="2" Size="TextSize.Xl">2. Add the stylesheet and the theme</Heading>
        <TextBlock>Link the stylesheet before your own, and put <Code>IzzyTheme</Code> in the <Code>head</Code>:</TextBlock>
        <Code Block Language="razor" Title="Components/App.razor" HighlightLines="3,6">@AppHead</Code>
    </Stack>

    <Stack Gap="3">
        <Heading Level="2" Size="TextSize.Xl">3. Import the components</Heading>
        <Code Block Language="razor" Title="Components/_Imports.razor">@Imports</Code>
    </Stack>

    <Stack Gap="3">
        <Heading Level="2" Size="TextSize.Xl">4. Register the services</Heading>
        <Code Block Language="csharp" Title="Program.cs" LineNumbers HighlightLines="2,9">@Startup</Code>
        <TextBlock Color="Color.Muted">
            Run it with <Code>dotnet watch</Code>, then read the
            <Anchor Href="docs/get-started/blazor-web-app">full guide</Anchor> for toasts, dialogs and a first page.
        </TextBlock>
    </Stack>
</Stack>

Off: The copy buttons don't appear; the command and the code are still there to select.