overlays component

Modal

Theme-aware, responsive modal component.

@wrnexus/ui 0.5.08 props1 slots4 events

Usage

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

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

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

Props and attributes

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

Slots

default

Events

open
close
cancel
confirm

Source contract

Installed source: components/Modal.wrn

component Modal {
  props {
    @event open = function
    @event close = function
    @event cancel = function
    @event confirm = function
    size = "default"
    color = "primary"
    title = "Modal"
    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--modal wire-next--placement-{placement} {class}" role="dialog" aria-modal="true" aria-label="{title}">
        <header>
        <strong>{title}</strong>
        <button type="button" aria-label="{closeLabel}">×</button>
        </header>
      {#if description}<p>{description}</p>{/if}
      <slot />
        </div>
    }
}