overlays component

Popover

Theme-aware, responsive popover component.

@wrnexus/ui 0.5.08 props1 slots2 events

Usage

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

<Popover
  size="default"
  color="primary"
  title="Popover"
  description="description"
  open="false"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`size`	`string`	Optional	`"default"`
`color`	`string`	Optional	`"primary"`
`title`	`string`	Optional	`"Popover"`
`description`	`string`	Optional	`""`
`open`	`boolean`	Optional	`false`
`placement`	`string`	Optional	`"bottom"`
`closeLabel`	`string`	Optional	`"Close"`
`class`	`string`	Optional	`""`

Slots

default

Events

open
close

Source contract

Installed source: components/Popover.wrn

component Popover {
  props {
    @event open = function
    @event close = function
    size = "default"
    color = "primary"
    title = "Popover"
    description = ""
    open = false
    placement = "bottom"
    closeLabel = "Close"
    class = ""
  }
  view {
        <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--popover wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
        <header>
        <strong>{title}</strong>
        <button type="button" aria-label="{closeLabel}">×</button>
        </header>
      {#if description}<p>{description}</p>{/if}
      <slot />
        </div>
    }
}