WtPopup

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
shown		boolean	true	can be used to force popup visibility state even if it is controlled by activator slot
size		ComponentSize	ComponentSize.MD
overflow		boolean	false	if true, popup contents will overflow popup container, without scrolling useful for small popups with select components, which have not enough space to show its dropdown content without scrolling the popup
disabled		boolean	false	disable popup visibility even if shown prop is "true"
closable		boolean	true
closeDisabled		boolean	false

Events

Name	Params	Description
close		popup header "close" button clicked
popup:opened
popup:closed

Slots

Name	Scope	Description
header
title
main
actions
activator

Example Popup Using Shown Prop

Ok

Code

<script setup>
import { ref } from 'vue';

import { WtPopup } from '@webitel/ui-sdk/components';

const isPopup = ref(false);
</script>

<template>
  <wt-button @click="isPopup = !isPopup"> Toggle popup </wt-button>
  <wt-popup
    :shown="isPopup"
    @close="isPopup = false"
  >
    <template #header>
      <h2>Popup header</h2>
    </template>
    <template #main>
      <p style="text-align: justify">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
        autem consequatur consequuntur earum, eius, exercitationem, expedita
        fugiat mollitia nam nesciunt omnis placeat provident quos sed tempore
        ullam voluptate. Est, molestias.
      </p>
    </template>
    <template #actions>
      <wt-button
        color="primary"
        @click="isPopup = false"
      >
        Ok
      </wt-button>
      <wt-button
        color="secondary"
        @click="isPopup = false"
      >
        Not Ok
      </wt-button>
    </template>
  </wt-popup>
</template>

<style scoped lang="scss"></style>

Example Popup using v-if

Deprecated, not recommended

Code

<script setup>
import { ref } from 'vue';

import { WtPopup } from '@webitel/ui-sdk/components';

const isPopup = ref(false);
</script>

<template>
  <wt-button @click="isPopup = !isPopup"> Toggle v-if popup </wt-button>
  <wt-popup
    v-if="isPopup"
    @close="isPopup = false"
  >
    <template #header>
      <h2>Popup header</h2>
    </template>
    <template #main>
      <p style="text-align: justify">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
        autem consequatur consequuntur earum, eius, exercitationem, expedita
        fugiat mollitia nam nesciunt omnis placeat provident quos sed tempore
        ullam voluptate. Est, molestias.
      </p>
    </template>
    <template #actions>
      <wt-button
        color="primary"
        @click="isPopup = false"
      >
        Ok
      </wt-button>
      <wt-button
        color="secondary"
        @click="isPopup = false"
      >
        Not Ok
      </wt-button>
    </template>
  </wt-popup>
</template>

<style scoped lang="scss"></style>