Use the wiz-text component to add text to your e-Detailer.
Installation
To install the wiz-text component, run the following command in your project root directory:
wiz install @edetailer/wiz-text
For more information, see Install components.
Usage
NOTE: As best practice, use eWizard Editor to add and edit the components.
To add the wiz-text component to your slide and change its properties, in the ./slides/default/index.vue file:
1) Add the <wiz-text></wiz-text> tag to your slide template.
<!--./slides/default/index.vue --><template>
<wiz-slide>
<wiz-text :text="$t('heading')" id="heading"></wiz-text>
</wiz-slide>
</template>NOTE: The id attribute is required for the correct display of the component styles in eWizard Editor.
2) Enter the text in the :text attribute variable in the <i18n></i18n> localization tag.
For example, the heading variable:
<!--./slides/default/index.vue --><i18n>
{
"eng": {
"heading": "<span style='line-height:30px;font-size:30px;'>My slide</span>"
}
}
</i18n>NOTE: For more information, see Localization.
Attributes
You can change the wiz-text component appearance and behavior using the following attributes within the <wiz-text></wiz-text> tag:
• component-name
Edit the value to change the label displayed on the component Properties tab in eWizard Editor.
<wiz-text :text="$t('heading')" component-name="Your text" id="heading"></wiz-text>Properties
The wiz-text component has the following properties:
Property | Type | Default | Description |
| String |
| The text component label displayed on the component Properties tab in eWizard Editor. |
| String |
| The editable text displayed on the slide layout in eWizard Editor. |
For more information, see Component properties.