A list provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management.
A list provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management.
<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>
<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>