wiz-navigation

wiz-navigation is a highly configurable component for presenting navigation links within a responsive table layout. It supports dynamic data binding and flexible styling, making it suitable for structured navigation areas such as email headers or footers.

Features:

• Dynamic links: generates navigation links dynamically from the items property.
• Responsive design: adapts to various screen sizes for optimal display.
• Item styling: allows individual styling of items, including lineHeight and textAlign.

Learn more about components

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

Usage

Markup:

<wiz-navigation :items="navigationItems" ></wiz-navigation>

Script:

export default {
	name: 'block1',
	data: function () {
		return {
			navigationItems: [
            			{
            				name: this.$t('navigation_1'),
            				link: "https://www.viseven.com/"
            			},
            			{
            				name: this.$t('navigation_2'),
            				link: "https://www.viseven.com/",
            			},
            			{
            				name: this.$t('navigation_3'),
            				link: "https://www.viseven.com/",
            			},
            			{
            				name: this.$t('navigation_4'),
            				link: "https://www.viseven.com/",
            			}
            	]
		}
	}
}

Localization:

<i18n>
    {
        "en": {
            "navigation_1": "Nav item 1",
            "navigation_2": "Nav item 2",
            "navigation_3": "Nav item 3",
            "navigation_4": "Nav item 4",
        }
    }
</i18n>

Properties

The following properties are available:

Property	Type	Default value	Description
align	string	center	Determines how bar links are aligned on the email layout. One of: "center", "left", "right", "justify".
componentName	string	Link bar	The text label displayed in eWizard Editor.
items	array	[...]	The link array you need to include in your link list. Each item includes the following properties: "name", "lineHeight", "textAlign", "link"

item

The following properties are available:

Property	Type	Default value	Description
lineHeight	number	20	Spacing between lines in pixels.
link	string	N/A	A URL or link target for the bar item.
name	string	Item	The item name with styling.
textAlign	string	center	Item alignment within the component. One of: "left", "right", "center", "justify".