Popover

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Popover
  title="title"
  description="description"
  open="false"
  closeLabel="Close"
/>

Legacy mount name: data-component="Popover".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Popover.wrn

component Popover {
  props {
    title = ""
    description = ""
    open = false
    closeLabel = "Close"
    class = ""
  }
  view {
        <div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
        <section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
        <header>
        <h2 data-show="title" class="wire-dialog__title">{title}</h2>
        <p data-show="description" class="wire-dialog__description">{description}</p>
        </header>
        <slot />
        <button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
        </section>
        </div>
    }
}