wiz-tab-group

Use the wiz-tab-group component to add a tab group to your e-Detailer.

You can register the wiz-tab-group only globally in the components.js file. For more information, see Import and register components.

The wiz-tab-group component consists of the following:

wiz-tab-group—the component displayed in eWizard Editor.
wiz-tab-group-header—the tab group header.
wiz-tab-group-body—the container for tabs.
wiz-tab-group-button—the tab group button with the icon and label.
wiz-tab-group-item—the tab container with other components.

Learn more about components

Usage

To use the wiz-tab-group component on your slide template:

Add the <wiz-tab-group>, <wiz-tab-group-header>, and <wiz-tab-group-button> tags to your slide template in the slide .vue file.

html

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

<template>
  <wiz-slide>
    <wiz-tab-group>
      <wiz-tab-group-header nested>
      </wiz-tab-group-header>
    </wiz-tab-group>
  </wiz-slide>
</template>

Define the tab header content in the <wiz-tab-group-button>. You can only add the <wiz-image> and <wiz-text> components to the button.

wiz-image and wiz-text must appear in the same order as in eWizard Editor. The sealed and nested properties must be applied to the components.

html

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

<template>
  <wiz-tab-group>
    <wiz-tab-group-header nested>
      <wiz-tab-group-button>
        <wiz-image
          sealed="position rotation delete duplicate"
          src="node_modules/@edetailer/wiz-tab-group/components/wiz-tab-group-button/media/images/tab-icon.svg"
        ></wiz-image>
        <wiz-text
          sealed="position rotation width height delete duplicate"
          :text="$t('wiz_tab_group_tab_1')"
        ></wiz-text>
      </wiz-tab-group-button>
      <wiz-tab-group-button>
        <wiz-image
          sealed="position rotation delete duplicate"
          src="node_modules/@edetailer/wiz-tab-group/components/wiz-tab-group-button/media/images/tab-icon.svg"
        ></wiz-image>
        <wiz-text
          sealed="position rotation width height delete duplicate"
          :text="$t('wiz_tab_group_tab_2')"
        ></wiz-text>
      </wiz-tab-group-button>
      <wiz-tab-group-button>
        <wiz-image
          sealed="position rotation delete duplicate"
          src="node_modules/@edetailer/wiz-tab-group/components/wiz-tab-group-button/media/images/tab-icon.svg"
        ></wiz-image>
        <wiz-text
          sealed="position rotation width height delete duplicate"
          :text="$t('wiz_tab_group_tab_3')"
        ></wiz-text>
      </wiz-tab-group-button>
    </wiz-tab-group-header>

    <wiz-tab-group-body nested>
      <wiz-tab-group-item></wiz-tab-group-item>
      <wiz-tab-group-item></wiz-tab-group-item>
      <wiz-tab-group-item></wiz-tab-group-item>
    </wiz-tab-group-body>
  </wiz-tab-group>
</template>

Use the sealed property to hide and restrict properties.

Add other components within the <wiz-tab-group-item> tag to change the tab content. For example, wiz-text and wiz-image:

html

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

<i18n>
{
  "eng": {
    "wiz_tab_group_tab_1": "Tab 1",
    "wiz_tab_group_tab_2": "Tab 2",
    "wiz_tab_group_tab_3": "Tab 3",
    "wiz_tab_group_item_text": "Item text",
  }
}
</i18n>

<template>
  <wiz-tab-group>
    <wiz-tab-group-header nested>
      <wiz-tab-group-button>
        <wiz-image
          sealed="position rotation delete duplicate"
          src="node_modules/@edetailer/wiz-tab-group/components/wiz-tab-group-button/media/images/tab-icon.svg"
        ></wiz-image>
        <wiz-text
          sealed="position rotation width height delete duplicate"
          :text="$t('wiz_tab_group_tab_1')"
        ></wiz-text>
      </wiz-tab-group-button>
      <wiz-tab-group-button>
        <wiz-image
          sealed="position rotation delete duplicate"
          src="node_modules/@edetailer/wiz-tab-group/components/wiz-tab-group-button/media/images/tab-icon.svg"
        ></wiz-image>
        <wiz-text
          sealed="position rotation width height delete duplicate"
          :text="$t('wiz_tab_group_tab_2')"
        ></wiz-text>
      </wiz-tab-group-button>
      <wiz-tab-group-button>
        <wiz-image
          sealed="position rotation delete duplicate"
          src="node_modules/@edetailer/wiz-tab-group/components/wiz-tab-group-button/media/images/tab-icon.svg"
        ></wiz-image>
        <wiz-text
          sealed="position rotation width height delete duplicate"
          :text="$t('wiz_tab_group_tab_3')"
        ></wiz-text>
      </wiz-tab-group-button>
    </wiz-tab-group-header>

    <wiz-tab-group-body nested>
      <wiz-tab-group-item>
        <wiz-text
          id="wiz-text-b71a"
          class="default"
          :text="$t('wiz_tab_group_item_text')"
        ></wiz-text>
      </wiz-tab-group-item>
      <wiz-tab-group-item></wiz-tab-group-item>
      <wiz-tab-group-item></wiz-tab-group-item>
    </wiz-tab-group-body>
  </wiz-tab-group>
</template>

The id and class attributes are added by eWizard Editor 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 Veeva Vault publish settings.

Attributes

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

component-name
Change the component name that appears on the Properties tab in eWizard Editor.
html
```
<wiz-tab-group component-name="My tab group"></wiz-tab-group>
```
orientation
Set the tab group orientation: vertical or horizontal.
html
```
<wiz-tab-group orientation="vertical"></wiz-tab-group>
```
has-tab-label
Show the tab names next to the tab on the layout with true and hide them with false.
html
```
<wiz-tab-group :has-tab-label="false"></wiz-tab-group>
```
tab-icon-position
Change the tab icon position relative to the tab name: top or left. The none value hides the tab icons for all the tabs in the tab group.
html
```
<wiz-tab-group tab-icon-position="top"></wiz-tab-group>
```
has-custom-size
Turn the scaling of the tab on with true and off with false.
html
```
<wiz-tab-group :has-custom-size="true"></wiz-tab-group>
```
tab-button-width
Change the number to set custom size for all buttons in pixels.
html
```
<wiz-tab-group :tab-button-width="150" :has-custom-size="true"></wiz-tab-group>
```
The tab-button-width attribute works only if the has-custom-size attribute is true.
tabs-bar-fill
Change the tab bar color. The tab bar is the header column or row—vertical or horizontal—that includes all the tabs in the group. Use the hex code or RGBA to define the fill color.
html
<wiz-tab-group tabs-bar-fill="#dfdfe6ff"></wiz-tab-group>
html
<wiz-tab-group tabs-bar-fill="rgba(153, 162, 242, 0.5)"></wiz-tab-group>

selected-tab-fill

Change the color for a selected tab. Use the hex code or RGBA to define the fill color.

html

<wiz-tab-group selected-tab-fill="#a61ec280"></wiz-tab-group>

not-selected-tab-fill

Change the color for the not selected tabs. Use the hex code or RGBA to define the fill color.

html

<wiz-tab-group not-selected-tab-fill="#d0e6ceff"></wiz-tab-group>

selected-tab-border
Change the width, style, and color for the selected tab border.
- Use the hex code or RGBA to set the border color. For more information, see border-color.
- Specify the border line width in pixels. For more information, see border-width.
- Change the border style: none, solid, dotted, double, etc. For more information, see border-style.
  html
```
<wiz-tab-group selected-tab-border="6px solid rgba(221, 1, 32, 0.5)"></wiz-tab-group>
```

Properties

The following properties are available:

Property	Type	Default value	Description
`__id`	string	N/A	The automatically generated item ID.
`componentName`	string	Tab group	The text label displayed in eWizard Editor.
`hasCustomSize`	boolean	true	Tab buttons scaling
`hasTabLabel`	boolean	true	Visibility of the tab names next to the tab on the layout.
`notSelectedTabFill`	string	rgba(255, 255, 255, 1)	Inactive tabs color. Input: RGBA or 6- or 8-digit HEX.
`orientation`	string	horizontal	Controls whether the items rotate horizontally or vertically.
`selectedTabBorder`	string	3px solid #2E4FFF	Width, style, and color of the selected tab border.
`initialTabIndex`	number	0	Zero-based index of the tab to be active on tab-group component initialization.
`selectedTabFill`	string	rgba(46, 79, 255, 0.1)	The selected tab color. Input: RGBA or 6- or 8-digit HEX.
`tabButtonWidth`	number	150	Sets custom size for all buttons. Only if 'hasCustomSize' is 'true'.
`tabIcon`	string	N/A	The path to the tab icon.
`tabIconPosition`	string	left	The tab icon position relative to the tab name: `top` or `left`. `none` hides all tab icons in the tab group.
`tabName`	string	N/A	The readable tab name with the CSS text style. The default names are: `TAB 1`, `TAB 2`, and `TAB 3`.
`tabs`	array	N/A	The tab group array where each tab is an object that includes individual tab properties: ID, name, and icon. By default, the tab group includes three tabs.
`tabsBarFill`	string	rgba(255, 255, 255, 0)	The tab bar color. Input: RGBA or 6- or 8-digit HEX.

wiz-tab-group ​

Usage ​

Attributes ​

Properties ​

wiz-tab-group

Usage

Attributes

Properties