wiz-layout

The wiz-layout component is an HTML flexbox container that allows you to place content within a row or a column—but not both at once.

You can add other components within the wiz-layout component: wiz-text, wiz-image, or wiz-button. The wiz-layout component doesn't have properties to select in eWizard Editor.

Learn more about components

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

Usage

To add the wiz-layout component to your site and change its properties, in the App.vue file:

1. Add the wiz-layout component to your site template.

   <!--./App.vue -->
   
   <template>
   <wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
       <wiz-layout></wiz-layout>
   </wiz-root>
   </template>

2. Add other components within the <wiz-layout></wiz-layout> tag.

   <!--./App.vue -->
   
   <template>
   <wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
       <wiz-layout align="center" type="horizontal" width="200px">
           <wiz-image id="wiz-image-6140" src="./common/media/images/e95272c0-0bba-11ec-8a48-06c02543afe7.png"></wiz-image>
           <wiz-text :text="$t('wiz_text')"></wiz-text>
       </wiz-layout>
   </wiz-root>
   </template>

Attributes

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

• type

  Select the horizontal layout type for rows and vertical for columns.

  <wiz-layout type="horizontal"></wiz-layout>

• align

  Change the flex item alignment to left, center, or right:

  <wiz-layout align="left"></wiz-layout>

• width

  Set the attribute value of the flexbox container width in pixels:

  <wiz-layout width="200px"></wiz-layout>

Properties

The following properties are available:

Property	Type	Default value	Description
align	string	N/A	The site layout alignment. One of: "center", "left", "right".
type	string	horizontal	The flexbox layout type. One of: "horizontal" for rows, "vertical" for columns.
width	number	N/A	The flexbox container width in pixels.