PF6.Popover

PF6 Popover component

Popovers display rich content (title, body, optional footer) in an overlay triggered by clicking an element. Unlike a tooltip, popovers stay open until explicitly dismissed.

See: https://www.patternfly.org/components/popover

Definition

type Position

Popover position relative to its trigger

Constructor

popover :

{ trigger : Element msg

, isOpen : Bool

, onToggle : Bool -> msg

}

-> Popover msg

Construct a Popover

popover
    { trigger = Button.secondary { label = "More info", onPress = Nothing } |> Button.toMarkup
    , isOpen = model.popoverOpen
    , onToggle = PopoverToggled
    }

Content modifiers

withTitle : String -> Popover msg -> Popover msg

Set the popover title

withBody : Element msg -> Popover msg -> Popover msg

Set the popover body content

withFooter : Element msg -> Popover msg -> Popover msg

Set the popover footer content

Position modifiers

withTop : Popover msg -> Popover msg

Position the popover above the trigger (default)

withBottom : Popover msg -> Popover msg

Position the popover below the trigger

withLeft : Popover msg -> Popover msg

Position the popover to the left

withRight : Popover msg -> Popover msg

Position the popover to the right

Display modifiers

withMaxWidth : Int -> Popover msg -> Popover msg

Set maximum width in pixels (default 300)

withOnClose : msg -> Popover msg -> Popover msg

Set a message sent when the close (×) button is clicked

Rendering

toMarkup : Theme -> Popover msg -> Element msg

Render the Popover as an Element msg

The popover uses elm-ui's Element.above/Element.below/Element.onLeft/Element.onRight attributes on the trigger to position the panel. The trigger element is always rendered; the panel is only shown when isOpen = True.

lenards/elm-ui-patternfly/4.0.1