List

Overview

A list provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management.

Usage

Basic Vertical List with selection
<Stack Style="height:500px;">
    <div style="height:20px;">
        @DebugText
    </div>

    <Dropdown ItemsSource=@selectionModeOptions
              @bind-SelectedOption=SelectedModeOption
              Style="max-width:300px;">
    </Dropdown>

    <PrimaryButton Text="Add 10 items" OnClick="@ClickHandler" />
    <PrimaryButton Text="Add 5000 items" OnClick="@ClickHandler2" />

    <Label>Virtualized List with selection modes</Label>

    <div data-is-scrollable="true" style="overflow-y:auto;height:400px;">

        <SelectionZone SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), SelectedModeOption.Key!))
       DisableRenderOnSelectionChanged="true"
       Selection=@selection
       TItem="DataItem"
       @ref="selectionZone">
            <FocusZone>
<BlazorFluentUI.Lists.List ItemsSource=@data
           TItem="DataItem"
           ClassName="TestClass">
    <ItemTemplate>

        <div style="display:flex; flex-direction:row;"
             data-selection-index=@context.Index
             class=@($"ms-List-cell-default{(selection.IsKeySelected(context.Item?.Key!) ? " is-selected":"")}")
             data-is-focusable="true"
             @onclick=@(()=> {

            //selectionZone.HandleClick(context);
            DebugText = context.Item?.Key + " clicked";
        })>
            <img height="25" width="25" src=@DataItem.ImgUrl />
            <em>This is item #@context.Item?.Key</em>
            <span style="margin-left:10px;">@context.Item?.DisplayName</span>
        </div>
    </ItemTemplate>
</BlazorFluentUI.Lists.List>

            </FocusZone>
        </SelectionZone>
    </div>
</Stack>
            
            
Basic Grid List with selection
<Stack Style="height:500px;">
    <div style="height:20px;">
        @DebugText
    </div>

    <Dropdown ItemsSource=@selectionModeOptions
              @bind-SelectedOption=SelectedModeOption
              Style="max-width:300px;">
    </Dropdown>

    <PrimaryButton Text="Add 10 items" OnClick="@ClickHandler" />
    <PrimaryButton Text="Add 5000 items" OnClick="@ClickHandler2" />

    <Label>Virtualized List with selection modes</Label>

    <div data-is-scrollable="true" style="overflow-y:auto;height:400px;">

        <SelectionZone SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), SelectedModeOption.Key!))
       DisableRenderOnSelectionChanged="true"
       Selection=@selection
       TItem="DataItem"
       @ref="selectionZone">
            <FocusZone>
<BlazorFluentUI.Lists.List ItemsSource=@data
           UseGridFlexLayout="true"
           ItemWidth="120"
           TItem="DataItem">
    <ItemTemplate>

        <div style="display:flex; flex-direction:column; height:114px;width:114px;margin:3px;background-color:lightblue;overflow:hidden;"
             data-selection-index=@context.Index
             class=@($"{(selection.IsKeySelected(context.Item!.Key!) ? " is-selected":"")}")
             data-is-focusable="true"
             @onclick=@(()=> {
            //selectionZone.HandleClick(context);
            DebugText = context.Item.Key + " clicked";
        })>
            <img height="25" width="25" src=@DataItem.ImgUrl />
            <em>This is item #@context.Item!.Key</em>
            <span style="margin-left:10px;">@context.Item.DisplayName</span>
        </div>
    </ItemTemplate>
</BlazorFluentUI.Lists.List>

            </FocusZone>
        </SelectionZone>
    </div>
</Stack>