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 the root directory of your site project:
wiz install @site/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 the landing page template:
1) Add the wiz-button component in the App.vue file of your project.
<!--./App.vue --><template>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-button id="wiz-button-88bd" :text="$t('wiz_button_0da0')" :height="50" :width="605"></wiz-button>
</wiz-root>
</template>TIP: 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_0da0": "<span><span style=\"color:#ffffff;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:17px;\"><b>My button text</b></span></span>"
}
}
</i18n>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.
• height
To change the button height, set the height in pixels in the attribute value.
<wiz-button :height="100"></wiz-button>
• width
To change the button width, set the width in pixels in the attribute value.
<wiz-button :width="605"></wiz-button>
Properties
The wiz-button component has the following properties:
Property | Type | Default | Description |
| String |
| The component name displayed in eWizard Editor |
| String |
| The button text |
| Number |
| The button width |
| Number |
| The button height |
For more information, see Component properties.