wiz-text in e-Detailers | Viseven Help Center

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.

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.

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>

The wiz-text component has the following properties:

Property	Type	Default	Description
`componentName`	String	`Text`	The text component label displayed on the component Properties tab in eWizard Editor.
`text`	String	`<p style="text-align:center;">Double-click to add text</p>`	The editable text displayed on the slide layout in eWizard Editor.

For more information, see Component properties.