wiz-layout

The wiz-layout component is an HTML wrapper that allows you to place content within a webpage <tr> <td> table. Table data elements are the data containers of the table. They can contain HTML elements: text, images, lists, or other tables.

The wiz-layout component doesn't have properties to select in eWizard Editor. The wiz-layout component is part of other components, for example, wiz-agenda, wiz-card. You can use wiz-layout in the same way as the wiz-placeholder component.

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 email and change its properties, in the App.vue file:

1. Add the component to your email template.

   <!--./App.vue -->
   
   <template>
       <wiz-root align="center" style="background: #ffffff; width: 700px">
         <wiz-layout
           type="horizontal"
           align="left"
           :grid="customGrid"
           width="auto"
           :css="{ minHeight: '0px' }"
         >
         </wiz-layout>
       </wiz-root>
   </template>
       ```

2. Insert the custom function into the script.

   <!--./App.vue -->
   
   <script>
   export default {
     components: {},
     name: "wiz-app",
     data: function () {
       return {
         customGrid: [
           {
             classesName: 'class-name',
             width: "135px", paddingRight: '100px'
           },
           { width: "105px", paddingRight: '300px' },
           { width: "165px", paddingRight: '80px' }
         ]
       }
     }
   
   };
   </script>

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 table layout type: horizontal or vertical.

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

• align

  Change the element alignment in the table data cell to left, center, or right:

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

• content-align

  Change the element alignment in the table header cell to left, center, or right:

  <wiz-layout content-align="center"></wiz-layout>

• width

  To change the element width in the table data cell, set the attribute value in percents:

  <wiz-layout width="20"></wiz-layout>

  The element width must be from 0 to 100%.

• grid

  To change the table data cell width and padding using the custom function, set the function name as attribute:

  <wiz-layout :grid="customGrid"></wiz-layout>

• css

  Add the CSS style to the table data cell element using an object as the attribute value:

  <wiz-layout :css="{ minHeight: '0px' }"></wiz-layout>

• cellclass

  To change the table data cell class, set the attribute value:

  <wiz-layout :cellclass="wiz-layout-cell"></wiz-layout>

Properties

The following properties are available:

Property	Type	Default value	Description
align	string	center	The email layout alignment. One of: "center", "left", "right".
cellclass	string	wiz-layout-cell	Defines the cell class applied to the table data.
contentAlign	string	center	The text alignment in the table header cells. One of: "center", "left", "right".
css	object	{}	Adds the CSS object to the table data cell.
grid	array	[]	Allows adding a custom function to set the table data cell width and padding.
type	string	vertical	The table layout type. One of: "horizontal", "vertical".
width	number	N/A	The width of the component.