-
Notifications
You must be signed in to change notification settings - Fork 7
FixedSizeList
Andrew Sutton edited this page Jan 22, 2025
·
1 revision
Because the FixedSizeList component is not in FluentUI's docs, I added most of the properties in this example for reference.
type Country = { Name: string; Id: int }
let countries = [
{ Name = "Afghanistan"; Id = 1 }
{ Name = "Albania"; Id = 2 }
{ Name = "Algeria"; Id = 3 }
{ Name = "Andorra"; Id = 4 }
{ Name = "Angola"; Id = 5 }
{ Name = "Antigua & Deps"; Id = 6 }
{ Name = "Argentina"; Id = 7 }
{ Name = "Armenia"; Id = 8 }
{ Name = "Australia"; Id = 9 }
{ Name = "Austria"; Id = 10 }
{ Name = "Azerbaijan"; Id = 11 }
{ Name = "Bahamas"; Id = 12 }
{ Name = "Bahrain"; Id = 13 }
{ Name = "Bangladesh"; Id = 14 }
{ Name = "Barbados"; Id = 15 }
{ Name = "Belarus"; Id = 16 }
]
[<ReactComponent>]
let ListTest () =
Fui.fixedSizeList [
fixedSizeList.width 400
fixedSizeList.height 100
fixedSizeList.itemData countries
fixedSizeList.itemSize 100
fixedSizeList.itemCount countries.Length
fixedSizeList.layout.horizontal
fixedSizeList.useIsScrolling true
fixedSizeList.itemKey (fun index (data: Country array) ->
let country = data.[index]
country.Id
)
fixedSizeList.onItemsRendered (fun (oir: OnFixedSizeListItemsRendered) ->
printfn "oir %A" (oir.overscanStartIndex, oir.overscanStopIndex, oir.visibleStartIndex, oir.visibleStopIndex)
)
fixedSizeList.onScroll (fun (os: OnFixedSizeListScroll) ->
printfn "os %A" (os.scrollDirection, os.scrollOffset)
)
fixedSizeList.overscanCount 3
fixedSizeList.children (fun (props: FixedSizeListRenderProps<Country>) ->
let country = props.data[props.index]
Fui.listItem [
listItem.style props.style
listItem.ariaSetSize countries.Length
listItem.ariaPosInSet (props.index + 1)
listItem.children [
Fui.text country.Name
]
]
)
]