Skip to content

useFocusableGroup

Andrew Sutton edited this page Jan 26, 2024 · 4 revisions

image

open FS.FluentUI.V8toV9 

[<ReactComponent>]
let UseFocusableGroupTest ()=
    let attributes = Fui.useFocusableGroup [
        useFocusableGroupOptions.tabBehavior.limitedTrapFocus
        useFocusableGroupOptions.ignoreDefaultKeydown [
            ignoreKeyDown.enter true
        ]
    ]

    Fui.stack [
        stack.horizontal false
        stack.children [
            Html.div [
                prop.tabIndex 0
                attributes
                prop.style [ style.width 500 ]
                prop.children [
                    Fui.text "Hello world!"
                    Html.div [
                        prop.style [ style.display.flex; style.width 300 ]
                        prop.children [
                            Fui.button [
                                button.ariaLabel "Copy"
                                button.icon (
                                    Fui.icon.copyRegular []
                                )
                                button.size.small
                            ]
                            Fui.button [
                                button.ariaLabel "Delete"
                                button.icon (
                                    Fui.icon.deleteRegular []
                                )
                                button.size.small
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]
Clone this wiki locally