wiz-menu

wiz-menu is the navigation menu component for e-Detailer slides.

Key features:

Configurable positioning
Customizable active chapter styling
Integrated sitemap and references access

wiz-menu includes:

Visual structure: navigation items, active indicators, sitemap button, references button
Spatial configuration: supports horizontal and vertical layouts with various positioning options
Interactive elements: chapter navigation, sitemap toggle, references toggle

Learn more about components

Usage

You can add wiz-menu to your slide and change its properties.

To add wiz-menu to individual slides, include it in ./slides/default/index.vue of your required slide:

html

<!--./slides/default/index.vue -->

<template>
<wiz-slide>
    <wiz-menu id="wiz-menu-id" class="default" :active-chapter-text-with-styles="$t('wiz_menu_id2')" :inactive-chapter-text-with-styles="$t('wiz_menu_id3')"></wiz-menu>
</wiz-slide>
</template>

To add wiz-menu to all slides, include it in ./App.vue:

html

<!-- ./App.vue -->

<template>
<wiz-root>
    <wiz-viewer>
    <wiz-menu
        id="menu"
        ref="menu"
        :home-button-icon="$theme.images.components.homeIcon"
        :pi-button-icon="$theme.images.components.piIcon"
        :sitemap-button-icon="$theme.images.components.sitemapIcon"
        :refs-button-icon="$theme.images.components.refIcon"
        :pi-button-pdf="piPDF"
        :logo-icon="$theme.images.components.menuLogo"
        :active-arrows-color="activeArrowColor"
        :inactive-arrows-color="'#ffffff'"
        :active-chapter-text-with-styles="{
        light: $t('menuActiveChapterTextWithStylesForLightTheme'),
        dark: $t('menuActiveChapterTextWithStylesForDarkTheme')
        }[currentTheme]"
        :inactive-chapter-text-with-styles="{
        light: $t('menuInactiveChapterTextWithStylesForLightTheme'),
        dark: $t('menuInactiveChapterTextWithStylesForDarkTheme')
        }[currentTheme]"
        :active-chapter-fill="$theme.variables.activeChapterFill"
        :hidden-chapters="hiddenChapters"
        inactive-chapter-fill="transparent"
        component-name="Menu"
        @open-sitemap="openSitemap"
        @open-references="openReferencesPopup"
    ></wiz-menu>
    </wiz-viewer>
</wiz-root>
</template>

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

Attributes

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

Attribute	Description	Example
`component-name`	Component label displayed on the Properties tab in eWizard Editor	`<wiz-menu component-name="Menu"></wiz-menu>`
`positioning`	Menu position on a slide. One of: `hb`: horizontal-bottom `ht`: horizontal-top `vl`: vertical-left `vr`: vertical-right	`<wiz-menu positioning="hb"></wiz-menu>`
`button-paddings`	Menu button padding in pixels	`<wiz-menu :button-paddings="3"></wiz-menu>`
`home-button-icon`	Home button icon. The home button redirects to the starting slide	`<wiz-menu home-button-icon="./media/images/home-button-icon.jpg"></wiz-menu>`
`show-home-button`	Home button visibility, boolean. Default: `true`	`<wiz-menu :show-home-button="false"></wiz-menu>`
`active-chapter-text-with-styles`	Style of the active chapter text¹	`<wiz-menu :active-chapter-text-with-styles="$t('activetext')"></wiz-menu>`
`inactive-chapter-text-with-styles`	Style of inactive chapters text¹	`<wiz-menu :inactive-chapter-text-with-styles="$t('wiz_menu_id')"></wiz-menu>`
`active-chapter-fill`	Background color of the active chapter. Accepted values: 6-digit HEX, 8-digit HEX, RGBA	`<wiz-menu active-chapter-fill="#c95757ff"></wiz-menu>`
`inactive-chapter-fill`	Background color of inactive chapters. Accepted values: 6-digit HEX, 8-digit HEX, RGBA	`<wiz-menu inactive-chapter-fill="#c95757ff"></wiz-menu>`
`active-chapter-side-with-border`	Border visibility for active chapter sides: `all`: all `l`: left `r`: right `t`: top `b`: bottom `lr`: left–right `tb`: top–bottom `tl`: top–left `tr`: top–right `bl`: bottom–left `br`: bottom–right	`<wiz-menu active-chapter-side-with-border="lr"></wiz-menu>`
`inactive-chapter-side-with-border`	Border visibility for inactive chapter sides: `all`: all `l`: left `r`: right `t`: top `b`: bottom `lr`: left–right `tb`: top–bottom `tl`: top–left `tr`: top–right `bl`: bottom–left `br`: bottom–right	`<wiz-menu inactive-chapter-side-with-border="lr"></wiz-menu>`
`active-chapter-border-style`	Style for active chapter borders. One of: `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` `outset` `none`	`<wiz-menu active-chapter-border-style="dashed"></wiz-menu>`
`inactive-chapter-border-style`	Style for inactive chapter borders. One of: `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` `outset` `none`	`<wiz-menu inactive-chapter-border-style="dashed"></wiz-menu>`
`active-chapter-border-width`	Active chapter border width in pixels	`<wiz-menu :active-chapter-border-width="3"></wiz-menu>`
`inactive-chapter-border-width`	Inactive chapter border width in pixels	`<wiz-menu :inactive-chapter-border-width="3"></wiz-menu>`
`active-chapter-border-color`	Active chapter border color. Accepted values: 6-digit HEX, 8-digit HEX, RGBA	`<wiz-menu active-chapter-border-color="#db6c2aff"></wiz-menu>`
`inactive-chapter-border-color`	Inactive chapter border color. Accepted values: 6-digit HEX, 8-digit HEX, RGBA	`<wiz-menu inactive-chapter-border-color="#db6c2aff"></wiz-menu>`
`active-arrows-color`	Active navigation arrow color. Accepted values: 6-digit HEX, 8-digit HEX, RGBA	`<wiz-menu active-arrows-color="#348ab2ff"></wiz-menu>`
`inactive-arrows-color`	Inactive navigation arrow color. Accepted values: 6-digit HEX, 8-digit HEX, RGBA	`<wiz-menu inactive-arrows-color="#348ab2ff"></wiz-menu>`
`show-sitemap-button`	Visibility of the sitemap button, boolean	`<wiz-menu :show-sitemap-button="false"></wiz-menu>`
`sitemap-button-icon`	Path to the sitemap button icon	`<wiz-menu sitemap-button-icon="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-menu>`
`show-refs-button`	The References button visibility, boolean (redirects to the pop-up with references used in the e-Detailer)	`<wiz-menu :show-refs-button="false"></wiz-menu>`
`refs-button-icon`	Path to the References button icon	`<wiz-menu refs-button-icon="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-menu>`
`show-pi-button`	The PI button visibility (opens an uploaded PDF with the prescription information), boolean	`<wiz-menu :show-pi-button="true"></wiz-menu>`
`pi-button-icon`	Path to the PI button icon	`<wiz-menu pi-button-icon="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-menu>`
`logo-icon`	Path to the logo icon	`<wiz-menu logo-icon="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-menu>`
`hidden-chapters`	Define the IDs of the chapters to be hidden	`<wiz-menu :hidden-chapters="['home', 'chapter2', 'chapter4']"></wiz-menu>`

¹As defined in the style attribute of the <span> tag. For example, in the activetext key:

html

<i18n>
{
  "eng": {
    "activetext": "<p style=\"line-height:13px;text-align:center;\"><span style=\"color:#0277BD;font-family:'Open Sans';font-size:13px;\"><b><span style=\"text-transform:uppercase;\">Demo&nbsp;</span></b></span></p>"
  }
}
</i18n>

- `pi-button-pdf`

The path to the PDF opened after you click the **PI** button.

```html
<wiz-menu pi-button-pdf="./media/pdfs/6bb57370-77d0-11ed-89c8-58fd20de9cf4.pdf"></wiz-menu>

Properties

The following properties are available:

Property	Type	Default value	Description
`activeArrowsColor`	string	#546E7A	Active chapter navigation arrows color. Inactive chapter navigation arrows color. Input: RGBA or 6- or 8-digit HEX.
`activeChapterBorderColor`	string	#0277bd	Active chapter border color. Input: RGBA or 6- or 8-digit HEX
`activeChapterBorderStyle`	string	ChapterBorderStyle. NONE	Active chapter border style
`activeChapterBorderWidth`	number	1	Active chapter border width, px.
`activeChapterFill`	string	#EEEEEE	Active chapter background color. Input: RGBA or 6- or 8-digit HEX.
`activeChapterSideWithBorder`	string	ChapterSideWithBorder. BOTTOM	Defines borders of the active chapter's sides
`activeChapterTextWithStyles`	string	<span style=" color: #0277bd; font-size: 13px; line-height: 13px; font-weight: bold; text-align: center; font-family: 'Open Sans'; text-transform: uppercase;"> Demo</span>	Text style of the active chapter
`buttonPaddings`	number	0	The paddings of the button menu, px
`componentName`	string	Menu	The text label displayed in eWizard Editor.
`hiddenChapters`	function	() => []	Chapter names to be hidden in the menu.
`homeButton`	string	../media/images/home-icon.svg	The Home button icon redirecting to the starting slide.
`inactiveArrowsColor`	string	#546E7A	Inactive chapter navigation arrows color. Input: RGBA or 6- or 8-digit HEX.
`inactiveChapterBorderColor`	string	#0277bd	Inactive chapter border color. Input: RGBA or 6- or 8-digit HEX.
`inactiveChapterBorderStyle`	string	ChapterBorderStyle. NONE	Inactive chapter border style.
`inactiveChapterBorderWidth`	number	1	Inactive chapter border width, px.
`inactiveChapterFill`	string	transparent	Inactive chapter background color. Input: RGBA or 6- or 8-digit HEX.
`inactiveChapterSideWithBorder`	string	ChapterSideWithBorder. BOTTOM	Inactive chapter borders display.
`inactiveChapterTextWithStyles`	string	<span style=" color: #546E7A; font-size: 13px; line-height: 13px; font-weight: bold; text-align: center; font-family: 'Open Sans'; text-transform: uppercase;"> Demo</span>	The text style of the inactive chapter.
`logoIcon`	string	../media/images /logo.svg	The path to the logo icon.
`piButtonIcon`	string	../media/images/pi-icon.svg	The path to the PI button icon.
`piButtonPdf`	string	N/A	The path to a PDF file opened on clicking the PI button.
`positioning`	string	Positioning. HORIZONTAL_BOTTOM	Position of the menu component on a slide.
`refsButtonIcon`	string	../media/images/refs-icon.svg	The path to the References button icon.
`showHomeButton`	boolean	true	The home button visibility.
`showPiButton`	boolean	true	The PI button visibility. Use: opens an uploaded PDF.
`showRefsButton`	boolean	true	The References button visibility. The button redirects to the pop-up with references used in the e-Detailer.
`showSitemapButton`	boolean	true	The Sitemap button visibility. The button displays the e-Detailer structure.
`sitemapButtonIcon`	string	../media/images/sitemap-icon.svg	The path to the Sitemap button icon.

wiz-menu ​

Usage ​

Attributes ​

Properties ​

Usage

Attributes

Properties