Skip to content
IzzyBlazor Demos · latest

Enter all results ↑ ↓ move Esc close

Scrolling like a desktop app

A mail client. ScrollMode.Main makes the shell fill the window and scrolls only the message list, so the header, the folders and the footer never move.

Inbox
Preview width
Inbox.razor
@inject NavigationManager Navigation

@* A mail client that behaves like a desktop app: ScrollMode.Main fills the window and scrolls only
   the message list, so the header, the folders and the footer never move. *@
<AppShell ScrollMode="ShellScroll.Main">
    <AppHeader>
        <SidebarToggle />
        <AppBrand Href="@To(null)" Icon="Lucide.Mail" Label="Acme Mail" />
        <Box Grow />
        <Button StartIcon="Lucide.Send" Size="ControlSize.Sm">Compose</Button>
        <Avatar Name="Ada Lovelace" />
    </AppHeader>

    <AppSidebar Width="Length.Rem(14)">
        <NavMenu>
            <NavItem Href="@To(null)" Icon="Lucide.Inbox" Badge="4" BadgeAccent="Accent.Primary">Inbox</NavItem>
            <NavItem Href='@To("starred")' Icon="Lucide.Star">Starred</NavItem>
            <NavItem Href='@To("sent")' Icon="Lucide.Send">Sent</NavItem>
            <NavItem Href='@To("archive")' Icon="Lucide.Archive">Archive</NavItem>
            <NavItem Href='@To("trash")' Icon="Lucide.Trash">Trash</NavItem>
        </NavMenu>
    </AppSidebar>

    <AppMain>
        <Stack Gap="0">
            @foreach (var (sender, subject, time, unread) in Messages)
            {
                <Row Gap="3" Align="Align.Center" PaddingX="5" PaddingY="3" BorderBottom="1">
                    <Avatar Name="@sender" Size="AvatarSize.Sm" />
                    <Stack Gap="0" Grow MinWidth="Length.Px(0)">
                        <TextBlock Size="TextSize.Sm" Weight="@(unread ? FontWeight.Semibold : FontWeight.Normal)">@sender</TextBlock>
                        <TextBlock Size="TextSize.Sm" Color="Color.Muted" Truncate>@subject</TextBlock>
                    </Stack>
                    <TextBlock Size="TextSize.Xs" Color="Color.Muted">@time</TextBlock>
                </Row>
            }
        </Stack>
    </AppMain>

    <AppFooter>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">3.2 GB of 15 GB used · Synced 2 minutes ago</TextBlock>
    </AppFooter>
</AppShell>

@code {
    // Links within this example: ?view= in its own address, so they stay here.
    private string To(string? page) => Navigation.GetUriWithQueryParameter("view", page);
}