Overlay

Demos

Custom positioning

Overlays can be positioned with custom styles.

<template>
<article>
  <veui-button
    ref="toggle"
    @click="open = !open"
  >
    Toggle
  </veui-button>
  <veui-overlay
    :open.sync="open"
    overlay-class="centered-overlay"
  >
    <div v-outside:toggle="hide">
      Centered
    </div>
  </veui-overlay>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  directives: { outside },
  data () {
    return {
      open: false
    }
  },
  methods: {
    hide () {
      this.open = false
    }
  }
}
</script>

<style lang="less">
.centered-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
}
</style>

Position relative to an element

Overlays can also be positioned relative to an existing DOM element in the page.

<template>
<article>
  <veui-button
    ref="toggle"
    @click="open = !open"
  >
    Toggle
  </veui-button>
  <veui-overlay
    target="toggle"
    position="top-start"
    :open.sync="open"
    overlay-class="relative-overlay"
  >
    <div v-outside:toggle="hide">
      Relatively Positioned
    </div>
  </veui-overlay>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  directives: { outside },
  data () {
    return {
      open: false
    }
  },
  methods: {
    hide () {
      this.open = false
    }
  }
}
</script>

Stacking order

For sibling overlays with same priority, the ones opened later have a higher stacking order.

<template>
<article>
  <veui-button
    ref="a"
    @click="aOpen = !aOpen"
  >
    Toggle A
  </veui-button>
  <veui-overlay
    target="a"
    position="top-start"
    :open.sync="aOpen"
    overlay-class="relative-overlay"
  >
    A
  </veui-overlay>

  <veui-button
    ref="b"
    @click="bOpen = !bOpen"
  >
    Toggle B
  </veui-button>
  <veui-overlay
    target="b"
    position="top-start"
    :open.sync="bOpen"
    overlay-class="relative-overlay"
  >
    B
  </veui-overlay>

  <veui-button
    ref="c"
    @click="cOpen = !cOpen"
  >
    Toggle C
  </veui-button>
  <veui-overlay
    target="c"
    position="top-start"
    :open.sync="cOpen"
    overlay-class="relative-overlay"
  >
    C
  </veui-overlay>
  <veui-button
    ui="tiny alt"
    @click="aOpen = bOpen = cOpen = false"
  >
    Hide all
  </veui-button>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  data () {
    return {
      aOpen: false,
      bOpen: false,
      cOpen: false
    }
  }
}
</script>

Opened overlays will establish new stacking contexts and overlays opened inside those overlays will have higher stacking order than their parents.

<template>
<article>
  <veui-button
    ref="parent"
    @click="parentOpen = !parentOpen"
  >
    Toggle
  </veui-button>
  <veui-overlay
    target="parent"
    position="top-start"
    :open.sync="parentOpen"
    overlay-class="relative-overlay"
  >
    <veui-button
      ref="child"
      @click="childOpen = !childOpen"
    >
      Toggle
    </veui-button>
    <veui-overlay
      target="child"
      position="top-start"
      :open.sync="childOpen"
      overlay-class="relative-overlay"
    >
      Child Overlay
    </veui-overlay>
  </veui-overlay>
  <veui-button
    ui="tiny alt"
    @click="parentOpen = childOpen = false"
  >
    Hide all
  </veui-button>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  data () {
    return {
      parentOpen: false,
      childOpen: false
    }
  },
  watch: {
    parentOpen (val) {
      if (!val) {
        this.childOpen = false
      }
    }
  }
}
</script>

The stacking order of child overlays a affected by their parent overlays.

<template>
<article>
  <veui-button
    ref="a"
    @click="aOpen = !aOpen"
  >
    Toggle A
  </veui-button>
  <veui-overlay
    target="a"
    position="top-start"
    :open.sync="aOpen"
    overlay-class="relative-overlay"
  >
    A
  </veui-overlay>

  <veui-button
    ref="b"
    @click="bOpen = !bOpen"
  >
    Toggle B
  </veui-button>
  <veui-overlay
    target="b"
    position="top-start"
    :open.sync="bOpen"
    overlay-class="relative-overlay"
  >
    B
    <veui-button
      ref="b-a"
      ui="small"
      @click="bAOpen = !bAOpen"
    >
      Toggle B-A
    </veui-button>
    <veui-overlay
      target="b-a"
      position="top-start"
      :open.sync="bAOpen"
      overlay-class="relative-overlay"
    >
      B-A
    </veui-overlay>
  </veui-overlay>

  <veui-button
    ref="c"
    @click="cOpen = !cOpen"
  >
    Toggle C
  </veui-button>
  <veui-overlay
    target="c"
    position="top-start"
    :open.sync="cOpen"
    overlay-class="relative-overlay"
  >
    C
  </veui-overlay>
  <veui-button
    ui="tiny alt"
    @click="aOpen = bOpen = cOpen = bAOpen = false"
  >
    Hide all
  </veui-button>
</article>
</template>

<script>
import { Overlay, Button } from 'veui'

export default {
  components: {
    'veui-overlay': Overlay,
    'veui-button': Button
  },
  data () {
    return {
      aOpen: false,
      bOpen: false,
      cOpen: false,
      bAOpen: false
    }
  }
}
</script>

API

Props

Name Type Default Description

ui string - Style variants. Not defined by veui-theme-one but can be customized.

open

boolean

false

.sync

Whether the overlay is displayed.

target

string|Vue|Element

Either of a valid ref, a Vue component instance or an HTML Element can be used to specify the target element to be relatively positioned against. The positioning logic is specified by position and options.

Type	Description
`string`	A ref inside current component context's `$refs` object. Uses the root element when matches a component.
`Vue`	When specified as a Vue component instance, use its root element.
`Element`	Specify the HTML element directly.

priority

number

The stacking order priority of current overlay. For all overlays under same parent overlay in the stacking context tree, the overlay with higher priority will be displayed over those with lower priority.

As the root elements of all overlays will be placed as direct children of the <body> element, a custom global stacking context mechanism is implemented in VEUI's overlay manager to better control the stacking order of all overlays. The parent-child relationship between overlay components creates tree hierarchy of the stacking context. Sibling overlays are stacked according to their priority. Those share the same priority value are stacked according to the time when they are instantiated, the ones are instantiated later displays on top of earlier ones.

autofocus boolean - Whether to automatically focus the first focusable element in the overlay.

modal boolean false Whether the overlay will preempt focus and trap focus upon keyboard navigation (will return focus when closed).

overlay-class

string|Array|Object

The class expression applied to the root element of the overlay. Supports all values defined by Vue's class expressions.

As the root element of all overlays are placed as direct children of the <body> element, this prop can be used to specify custom classes for the root element to customize styles.

Slots

Name	Description
`default`	The content of the overlay.

Events

Name	Description
`locate`	Triggered when the overlay updated its location.
`afterclose`	Triggered after the overlay is closed. If leave transition is provided by theme, then `afterclose` will be triggered when the transition finishes.

Global config

Key	Type	Default	Description
`overlay.overlayClass`	`string\|Array\|Object`	`[]`	The class name to be applied to every overlay. Supports all values defined by Vue's `class` expressions.