wiz-references component in sites

The wiz-references component is an HTML table with the list of references—citations of the sources used on the site or landing page. Each reference has its ID. Use eWizard Editor to add references to the site template. For more information about using references in eWizard Editor, see References.

For more information about working with references locally in your project, see References.

Installation

To install the wiz-references component, run the following command in the root directory of your site project:

wiz install @site/wiz-references

For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

To use the wiz-references component in your site template:

1) Add the <wiz-references></wiz-references> tag to your site template in the App.vue file.

<!--./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px;" class="editable-block">
<wiz-references :header="$t('wiz_references_10e0')" id="wiz-references-40fc" component-name="My references"></wiz-references>
</wiz-root>
</template>

The id attribute is required for correct display of the component styles in eWizard Editor.

2) Change the component header text in the <i18n></i18n> localization tag.

<!--./App.vue --><i18n>
{
"eng": {
"wiz_references_10e0": "References"
}
}
</i18n>

For more information, see Localization.

Attributes

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

• componentName

Change the component name that appears on the Properties tab in eWizard Editor.

<wiz-references component-name="My references"></wiz-references>

• header

Change the component header (title) that appears on the site layout. Use the $t('') variable to provide the key-value pair for localization of the header text.

<wiz-references :header="$t('wiz_references_10e0')"></wiz-references>

You can add the header text as a '' string without localization:

<wiz-references :header="'My references'"></wiz-references>

Properties

The wiz-references component has the following properties:

Property	Type	Default	Description
`componentName`	String	`References`	The component name that appears on the Properties tab in eWizard Editor.
`header`	String	`References`	The component header (title) that appears on the site layout.

For more information, see Component properties.