wiz-container

Use the wiz-container component to add a container to your e-Detailer.

Learn more about components

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

Usage

To use wiz-container, add components within the <wiz-container> tag. For example, you can place the wiz-text, wiz-image, or wiz-button components within the wiz-container component.

To add the wiz-container component to your slide and change its properties:

1. Add the <wiz-container></wiz-container> tag to your slide template in the slide .vue file.

   <!--./slides/default/index.vue -->
   
   <template>
       <wiz-slide class="editable-block">
           <wiz-container id="wiz-container-069d" class="default" :hide-overflowed-components="true">
           </wiz-container>
       </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 within the <wiz-container></wiz-container> tag. For example, wiz-text and wiz-image:

   <!--./slides/default/index.vue -->
   
   <template>
       <wiz-slide class="editable-block">
           <wiz-container id="wiz-container-069d" class="default" :hide-overflowed-components="true">
               <wiz-image id="wiz-image-7be7" class="default" src="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-image>
               <wiz-text id="wiz-text-4615" class="default" :text="$t('wiz_text_80e7')"></wiz-text>
           </wiz-container>
       </wiz-slide>
   </template>

Attributes

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

• component-name

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

  <wiz-container component-name="Container"></wiz-container>

• hide-overflowed-components

  Change the value to true to hide the inner component parts inside container edges. The attribute corresponds to the Crop outside edges checkbox in eWizard Editor.

  <wiz-container :hide-overflowed-components="true"></wiz-container>

Properties

The following properties are available:

Property	Type	Default value	Description
componentName	string	Container	The text label displayed in eWizard Editor.
hideOverflowedComponents	boolean	false	Set the value to true to hide parts of child components that extend beyond the parent.