wiz-layout component in emails | Viseven Help Center

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.

Installation

To install the wiz-layout component, run the following command in the root directory of your email project:

wiz install @email/wiz-layout

For more information, see Install components.

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>

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

Property	Type	Default	Description
`type`	String	`vertical`	The table layout type. Two types are available: `horizontal` and `vertical`.
`align`	String	`center`	The element alignment in the table data cell: `left`, `center`, or `right`.
`contentAlign`	String	`center`	The element alignment in the table header cell: `left`, `center`, or `right`.
`width`	String	`100%`	The element width in the table data cell in percents. The width must be from 0 to 100%.
`grid`	[String, Array]	`[]`	Use the custom function to set the table data cell width and padding.
`css`	Object	`{}`	Add the CSS style to the table data cell element using an object.
`cellclass`	String	`wiz-layout-cell`	Set the table data cell class.

For more information, see Component properties.