The wiz-button component is a clickable HTML button with a link. For more information, see Button.
Installation
To install the wiz-button component, run the following command in your email project root directory:
wiz install @email/wiz-button
For more information, see Install components.
Usage
NOTE: As best practice, use eWizard Editor to add and edit the components.
To add the wiz-button component to your email and change its properties, in the App.vue file:
1) Add the wiz-button component to your email template.
<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-button :text="$t('wiz_button_8f1e')" id="wiz-button-6cbe" align="center" :line-height="20" :text-align="'left'" :full-width="true" :link="'https://viseven.com/'"></wiz-button>
</wiz-root>
</div>
</template>NOTE: The id attribute is required for correct display of the component styles in eWizard Editor.
2) Change the button text in the <i18n></i18n> localization tag.
<!--./App.vue --><i18n>
{
"eng": {
"wiz_button_8f1e": "<span><span style=\"color:#ffffff;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:17px;\"><b>My button text</b></span></span>"
}
}
</i18n>NOTE: For more information, see Localization.
Attributes
You can change the wiz-button component appearance and behavior using the following attributes within the <wiz-button></wiz-button> tag.
• line-height
To change the button text height, set the height in pixels in the attribute value.
<wiz-button :line-height="30"></wiz-button>
• full-width
To make a full width button on the page, set the attribute value to true. Use the text-align property in this mode.
<wiz-button :text-align="'center'" :full-width="true"></wiz-button>
• text-align
To change the alignment of the button text, set the attribute value to left, center, right, or justify. Set the full-width attribute to true to see the button text alignment.
<wiz-button :text-align="'left'" :full-width="true"></wiz-button>
• link
Add the button link to the attribute value.
<wiz-button :link="'https://viseven.com/'"></wiz-button>
• align
To change the button alignment on the page, set the attribute value to left, center, or right. Use this attribute only if the full-width attribute value is false.
<wiz-button align="center" :full-width="false"></wiz-button>
Properties
The wiz-button component has the following properties:
Property | Type | Default | Description |
| String |
| The text on the button. |
| Number |
| The button text line height. |
| String |
| Align the button text in the full width mode. The property includes an array of the following options: |
| String |
| The link that opens when you click the button. |
| Boolean |
| Make the button full width of the page. |
| String |
| Align the button on the page. The property includes an array of the following options: |
For more information, see Component properties.