wiz-title

Use the wiz-title component to add localizable titles with preset styles to your slide. For more information about the component in eWizard Editor, see Title.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

To add the wiz-title component to your slide and change its properties, in the ./slides/[SLIDE_ID]/index.vue file:

1. Add the <wiz-title></wiz-title> tag to your slide template.

   <!-- ./slides/[SLIDE_ID]/index.vue -->
   
   <template>
     <wiz-slide>
       <wiz-title
       id="wiz-title-695a"
       class="default"
       :text="$t('wiz_title')"
       data-asset-id="yha78cxmqi"
       data-element-type="Headline"
       ></wiz-title>
     </wiz-slide>
   </template>

   The id and class attributes are required for the correct display of the component styles in eWizard Editor.

   The data-asset-id attribute is required for the Veeva Vault modules in the assets.json file. For more information, see Assets settings.

   The data-element-type attribute is required for component classification in the Veeva Vault modules.

2. Enter the text in the :text attribute variable in the <i18n></i18n> localization tag.

   For example, the wiz_title variable:

   <!--./slides/default/index.vue -->
   
   <i18n>
   {
     "eng": {
       "wiz_title": "<p><b>My title</b></p>"
     }
   }
   </i18n>

   For more information, see Localization

Attributes

You can change the wiz-title component appearance and behavior using the following attributes within the <wiz-title></wiz-title> tag:

• component-name

  Change the label displayed on the component Properties tab in eWizard Editor.

  <wiz-title :text="$t('wiz_title')" component-name="Your text" id="heading"></wiz-title>

• type

  Change the heading style of the title.

  <wiz-title type="h3"></wiz-title>

  The attribute has the following values:

  Value in eWizard.js	Value in eWizard Editor
  h1	Heading 1
  h2	Heading 2
  h3	Heading 3
  h4	Heading 4
  h5	Heading 5
  h6	Heading 6

• text

  Add the title text within the <wiz-title></wiz-title> tag.

  <wiz-title :text="$t('wiz_title')"></wiz-title>

  Use this attribute to define the key for the key-value pair in the i18n tag.

  Here, for example, the wiz_title is the key.

  You can use the :text attribute value as a string without the localization key. For example:

  <wiz-title :text="'My title'"></wiz-title>

  When you archive and upload the e-Detailer project to eWizard Editor, you can edit the text. After you modify the text, eWizard Editor adds the text with a localization key:

  <template>
    <wiz-slide align="center" style="background: #ffffff; width: 700px;">
      <wiz-title :text="$t('wiz_title')"></wiz-title>
    </wiz-slide>
  </template>

  Find the original text in the wiz_title key of the i18n tag:

  <i18n>
  {
    "eng": {
      "wiz_title": "<p>My title</p>"
    }
  }
  </i18n>

Properties

The following properties are available:

Property	Type	Default value	Description
componentName	string	Title	The text label displayed in eWizard Editor.
text	string	Double-click to add text	The editable text displayed on the content item layout in eWizard Editor.
type	string	Type.H1	The header level. One of: "Type.H1", "Type.H2", "Type.H3", "Type.H4", "Type.H5", "Type.H6".