popover

Basecoat documentation: https://basecoatui.com/components/popover/

Popover helpers for rich floating content.

A popover typically has a trigger control and a floating content panel.

Note: This component requires JavaScript from Basecoat.

Anatomy

trigger: the control that opens the popover
content: the floating panel

Recipe

import glaze/basecoat/popover
import lustre/element/html

fn my_popover() {
  popover.popover("my-popover", [
    popover.trigger([button.outline()], [html.text("Open")]),
    popover.content([], [
      html.p([], [html.text("Popover content here.")]),
    ]),
  ])
}

References

MDN Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
MDN popovertarget: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget

Values

align

</>

pub fn align(a: String) -> attribute.Attribute(msg)

align_center

</>

pub fn align_center() -> attribute.Attribute(msg)

align_end

</>

pub fn align_end() -> attribute.Attribute(msg)

align_start

</>

pub fn align_start() -> attribute.Attribute(msg)

content

</>

pub fn content(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

content_with_id

</>

pub fn content_with_id(
  popover_id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

</>

pub fn popover(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

side

</>

pub fn side(s: String) -> attribute.Attribute(msg)

side_bottom

</>

pub fn side_bottom() -> attribute.Attribute(msg)

side_left

</>

pub fn side_left() -> attribute.Attribute(msg)

side_right

</>

pub fn side_right() -> attribute.Attribute(msg)

side_top

</>

pub fn side_top() -> attribute.Attribute(msg)

trigger

</>

pub fn trigger(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

trigger_with_id

</>

pub fn trigger_with_id(
  popover_id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)