Skip to content

FixedSizeList

Andrew Sutton edited this page Jan 22, 2025 · 1 revision

image

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
                ]
            ]
        )
    ]

Clone this wiki locally