wiz-popup

With the wiz-popup component, you can create pop-ups in eWizard Editor. You can add other components inside the pop-up.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

To add the wiz-popup component to your slide and change its properties, in the ./slides/default/index.vue file:

1. Add the <wiz-popup></wiz-popup> tag to your slide template.

   <!--./slides/default/index.vue -->
   
   <template>
   <wiz-slide class="editable-block">
     <wiz-popup id="wiz-popup-08cb" class="default"></wiz-popup>
   </wiz-slide>
   </template>

   The id and class attributes are required for the correct display of the component styles in eWizard Editor.

2. Add other components inside the pop-up. For example, wiz-image:

   <!--./slides/default/index.vue -->
   
   <template>
   <wiz-slide class="editable-block">
     <wiz-text :text="$t('text')"></wiz-text>
     <wiz-popup id="wiz-popup-08cb" class="default">
       <wiz-image id="wiz-image-3c3e" class="default" src="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-image>
     </wiz-popup>
   </wiz-slide>
   </template>

Attributes

You can change the wiz-popup component appearance and behavior using the following attributes within the <wiz-popup></wiz-popup> tag:

• component-name

  Change the component label displayed on the Properties tab in eWizard Editor.

  <wiz-popup id="wiz-popup-08cb" class="default" component-name="Pop-up"></wiz-popup>

• show-close-button

  To display the pop-up close button in eWizard Editor, set the value to true.

        <wiz-popup id="wiz-popup-08cb" class="default" :show-close-button="true"></wiz-popup>

• close-button-icon

  Add the path to the image of the close button icon.

  <wiz-popup id="wiz-popup-08cb" class="default" close-button-icon="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-popup>

• close-button-position

  Set the position of the close button on the pop-up.

  <wiz-popup id="wiz-popup-08cb" class="default" close-button-position="rightTop"></wiz-popup>

  Use the following attribute values for the close button positioning on the pop-up:

  • rightTop—the upper-right corner of the pop-up

  • rightCenter—the center of the right side of the pop-up

  • rightBottom—the lower-right corner of the pop-up

  • centerTop—the center of the upper side of the pop-up

  • centerCenter—the center of the pop-up

  • centerBottom—the center of the lower side of the pop-up

  • leftTop—the upper-left corner of the pop-up

  • leftCenter—the center of the left side of the pop-up

  • leftBottom—the lower-left corner of the pop-up

• show-on-enter

  To show the pop-up on the slide opening, set the value to true.

  <wiz-popup id="wiz-popup-08cb" class="default" :show-on-enter="true"></wiz-popup>

• close-on-outside-tap

  To close the pop-up when you click outside of it, set the value to true.

  <wiz-popup id="wiz-popup-08cb" class="default" :close-on-outside-tap="true"></wiz-popup>

• show-overlay

  To add a gray background around the pop-up, set the value to true.

  <wiz-popup id="wiz-popup-08cb" class="default" :show-overlay="true"></wiz-popup>

Properties

The following properties are available:

Property	Type	Default value	Description
__id	string	N/A	The automatically generated item ID.
closeButtonIcon	string	defaultIcon	The icon of the close button.
closeButtonPosition	string	rightTop	The position of the close button
closeOnOutsideTap	boolean	true	`true` activates pop-up closing by outside click or tap
componentName	string	Pop-up	The text label displayed in eWizard Editor.
showCloseButton	boolean	true	The close button visibility.
showOnEnter	boolean	false	The pop-up visibility.
showOverlay	boolean	true	`true` grays out the area behind the pop-up.