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.
Installation
To install the wiz-layout component, run the following command in the root directory of your site project.
wiz install @site/wiz-layout
For more information, see Install components.
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 wiz-layout component has the following properties:
Property | Type | Default | Description |
| String |
| The flexbox layout type. Two types are available: |
| String | N/A | The flex item alignment: |
| String | N/A | The flexbox container width in pixels. |
For more information, see Component properties.