wiz-popup | Viseven Help Center

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

Installation

To install the wiz-popup component, run:

wiz install @edetailer/wiz-popup

For more information, see Install components.

Usage

NOTE: As best practice, use eWizard Editor to add and edit the components.

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 wiz-popup component has the following properties:

Property	Type	Default	Description
`componentName`	String	`Pop-up`	The component label displayed on the component Properties tab in eWizard Editor
`showCloseButton`	Boolean	`true`	Set to `true` to show the close button on the pop-up
`closeButtonIcon`	String	`defaultIcon`	The icon of the close button
`closeButtonPosition`	String	`rightTop`	The position of the close button
`closeOnOutsideTap`	Boolean	`true`	Set to `true` to close the pop-up when you click outside of it
`showOnEnter`	Boolean	`false`	Set to `true` to show the pop-up on the slide opening
`showOverlay`	Boolean	`true`	Set to `true` to gray out the area around the pop-up