Skip to content

TeachingPopover

Andrew Sutton edited this page Apr 24, 2024 · 4 revisions

image

let teachingPopoverTest =
    Fui.teachingPopover [
        teachingPopover.withArrow true
        teachingPopover.positioning [
            positioning.offset [
                offset.crossAxis 200
            ]
        ]
        teachingPopover.openOnHover true
        teachingPopover.children [
            Fui.teachingPopoverTrigger (
                Fui.button [
                    button.text "Teaching Popover Trigger"
                ]
            )
            Fui.teachingPopoverSurface [
                Fui.teachingPopoverHeader "Tips"
                Fui.teachingPopoverCarousel [
                    teachingPopoverCarousel.defaultValue "test-0"
                    teachingPopoverCarousel.children [
                        Fui.teachingPopoverCarouselCard [
                            teachingPopoverCarouselCard.value "test-0"
                            teachingPopoverCarouselCard.children [
                                Fui.teachingPopoverBody [
                                    teachingPopoverBody.media (
                                        Fui.image [
                                            image.fit.cover
                                            image.src "https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2023/06/Untitled-design-88.jpg?fit=1200%2C675&ssl=1"
                                        ]
                                    )
                                    teachingPopoverBody.children [
                                        Fui.teachingPopoverTitle "Teaching Bubble Title"
                                        Fui.text "This is page 1"
                                    ]
                                ]
                            ]
                        ]
                        Fui.teachingPopoverCarouselCard [
                            teachingPopoverCarouselCard.value "test-1"
                            teachingPopoverCarouselCard.children [
                                Fui.teachingPopoverBody [
                                    teachingPopoverBody.media (
                                        Fui.image [
                                            image.fit.cover
                                            image.src "https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2023/06/Untitled-design-88.jpg?fit=1200%2C675&ssl=1"
                                        ]
                                    )
                                    teachingPopoverBody.children [
                                        Fui.teachingPopoverTitle "Teaching Bubble Title"
                                        Fui.text "This is page 2"
                                    ]
                                ]
                            ]
                        ]
                        Fui.teachingPopoverCarouselCard [
                            teachingPopoverCarouselCard.value "test-2"
                            teachingPopoverCarouselCard.children [
                                Fui.teachingPopoverBody [
                                    teachingPopoverBody.media (
                                        Fui.image [
                                            image.fit.cover
                                            image.src "https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2023/06/Untitled-design-88.jpg?fit=1200%2C675&ssl=1"
                                        ]
                                    )
                                    teachingPopoverBody.children [
                                        Fui.teachingPopoverTitle "Teaching Bubble Title"
                                        Fui.text "This is page 3"
                                    ]
                                ]
                            ]
                        ]
                        Fui.teachingPopoverCarouselFooter [
                            teachingPopoverCarouselFooter.next "Next"
                            teachingPopoverCarouselFooter.previous "Previous"
                            teachingPopoverCarouselFooter.initialStepText "Close"
                            teachingPopoverCarouselFooter.finalStepText "Finish"
                            teachingPopoverCarouselFooter.children [
                                Fui.teachingPopoverCarouselNav [
                                    teachingPopoverCarouselNav.children (fun _ ->
                                        Fui.teachingPopoverCarouselNavButton []
                                    )
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]
Clone this wiki locally