Use the wiz-tab-group component to add a tab group to your e-Detailer.
Installation
To install the wiz-tab-group component, run the following command in your project root directory:
wiz install @edetailer/wiz-tab-group
To register the wiz-tab-group component globally:
// ./extensions/globalComponents.jsimport { WizTabGroup, WizTabGroupItem } from 'wiz-tab-group';export default (Vue) => {
Vue.component('wiz-tab-group', WizTabGroup);
Vue.component('wiz-tab-group-item', WizTabGroupItem);
};To add the wiz-tab-group component on a specific slide:
// ./slides/default/index.vueimport { WizTabGroup, WizTabGroupItem } from 'wiz-tab-group';export default {
components: {
WizTabGroup,
WizTabGroupItem,
}
}For more information, see Install components.
Usage
TIP: As best practice, use eWizard Editor to add and edit the components.
To use the wiz-tab-group component on your slide template:
1) Add the <wiz-tab-group></wiz-tab-group> tag to your slide template in the slide .vue file.
<!--./slides/default/index.vue --><template> <wiz-tab-group></wiz-tab-group> </template>
2) Define the tabs in the tab group and add them within the <wiz-tab-group-item></wiz-tab-group-item> tag.
<!--./slides/default/index.vue --><template>
<wiz-tab-group
:tabs="[
{ __id: 'tabId1', tabName: 'Tab 1', tabIcon: 'path/to/icon.png' },
{ __id: 'tabId2', tabName: 'Tab 2', tabIcon: 'path/to/icon.png' },
{ __id: 'tabId3', tabName: 'Tab 3', tabIcon: 'path/to/icon.png' },
]">
<wiz-tab-group-item child-id="tabId1">
</wiz-tab-group-item>
<wiz-tab-group-item child-id="tabId2">
</wiz-tab-group-item>
<wiz-tab-group-item child-id="tabId3">
</wiz-tab-group-item>
</wiz-tab-group>
</template>The child-id attribute value must be the same as the tab __id value.
3) Add other components within the <wiz-tab-group-item></wiz-tab-group-item> tag of a tab. For example, wiz-text and wiz-image:
<!--./slides/default/index.vue --><template>
<wiz-slide class="editable-block">
<wiz-tab-group
id="wiz-tab-group-3546"
class="default"
:tabs="[
{
__id: 'tab-5567',
tabName: $t('wiz_tab_group_tabs_tabName_3a98'),
tabIcon: './media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png',
__label: 'Tab 1',
},
{
__id: 'tab-3268',
tabName: $t('wiz_tab_group_tabs_tabName_9b70'),
tabIcon: './media/images/e95272c0-0bba-11ec-8a48-06c02543afe7.png',
__label: 'Tab 2',
},
{
__id: 'tab-565f',
tabName: $t('wiz_tab_group_tabs_tabName_7e3b'),
tabIcon:
'node_modules/wiz-tab-group/components/wiz-tab-group/media/images/tab-icon-placeholder.svg',
__label: 'Tab 3',
},
]"
orientation="vertical"
component-name="My tab group"
tab-icon-position="top"
tabs-bar-fill="#dfdfe6ff"
not-selected-tab-fill="#d0e6ceff"
selected-tab-border="6px solid rgb(221, 1, 32)"
selected-tab-fill="#7c73ce80"
data-asset-id="9z3j8o3v4n"
>
<wiz-tab-group-item child-id="tab-5567">
<wiz-text :text="$t('text')"></wiz-text>
<wiz-image
id="wiz-image-e27d"
class="default"
data-asset-id="rom2a4uwla"
src="./media/images/e95272c0-0bba-11ec-8a48-06c02543afe7.png"
component-name="My image 1"
:alt="'My image 2'"
></wiz-image>
</wiz-tab-group-item>
<wiz-tab-group-item child-id="tab-3268">
<wiz-image
id="wiz-image-3036"
class="default"
data-asset-id="976rlvhkk0"
src="./media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"
component-name="My image 2"
:alt="'My image 2'"
></wiz-image>
</wiz-tab-group-item>
<wiz-tab-group-item child-id="tab-565f"></wiz-tab-group-item>
</wiz-tab-group>
</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 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></wiz-tab-group> tag:
• tabs
Define the tabs in the tab group. The tabs attribute includes the array list of objects. Each object is a separate tab with its ID, name, and icon.
<wiz-tab-group
:tabs="[
{
__id: 'tab-5567',
tabName: $t('wiz_tab_group_tabs_tabName_3a98'),
tabIcon: './media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png',
__label: 'Tab 1',
},
{
__id: 'tab-3268',
tabName: $t('wiz_tab_group_tabs_tabName_9b70'),
tabIcon: './media/images/e95272c0-0bba-11ec-8a48-06c02543afe7.png',
__label: 'Tab 2',
},
{
__id: 'tab-565f',
tabName: $t('wiz_tab_group_tabs_tabName_7e3b'),
tabIcon:
'node_modules/wiz-tab-group/components/wiz-tab-group/media/images/tab-icon-placeholder.svg',
__label: 'Tab 3',
},
]">
</wiz-tab-group>— __id is the ID of a specific tab.
— tabName is the tab readable name.
— tabIcon is the path to the tab icon that appears next to the tab on the layout.
— __label is the tab label that appears on the Tree tab in eWizard Editor. This attribute is generated by eWizard Editor.
• orientation
Set the tab group orientation: vertical or horizontal.
<wiz-tab-group orientation="vertical"></wiz-tab-group>
• component-name
Change the component name that appears on the Properties tab in eWizard Editor.
<wiz-tab-group component-name="My tab group"></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.
<wiz-tab-group tab-icon-position="top"></wiz-tab-group>
• 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 :Hexcolorcode:hex_code: or RGBA to define the fill color.
:--- TABS:
TAB: HEX
<wiz-tab-group tabs-bar-fill="#dfdfe6ff"></wiz-tab-group>
TAB: RGBA
<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.
:--- TABS:
TAB: HEX
<wiz-tab-group selected-tab-fill="#a61ec280"></wiz-tab-group>
TAB: RGBA
<wiz-tab-group selected-tab-fill="rgba(166, 30, 194, 0.5)"></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.
:--- TABS:
TAB: HEX
<wiz-tab-group not-selected-tab-fill="#d0e6ceff"></wiz-tab-group>
TAB: RGBA
<wiz-tab-group selected-tab-fill="rgba(129, 212, 250, 0.5)"></wiz-tab-group>
---:
• selected-tab-border
Change the width, style, and color for the selected tab border.
— Use the hex or RGBA color code 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.
<wiz-tab-group selected-tab-border="6px solid rgba(221, 1, 32, 0.5)"></wiz-tab-group>
• has-tab-label
Show or hide the tab names next to the tab on the layout: true or false.
<wiz-tab-group :has-tab-label="true"></wiz-tab-group>
Properties
The wiz-tab-group component has the following properties:
|
|
|
|
| String |
| The text component label displayed on the component Properties tab in eWizard Editor. |
| String |
| The tab group orientation on a slide layout. Two values are possible: |
| Boolean |
| Show or hide the tab names next to the tab on the layout: |
| String |
| The tab icon position relative to the tab name: |
| String |
| The tab bar color. Use the hex code or RGBA to define the fill color. |
| String |
| The color for the not selected tabs. Use the hex code or RGBA to define the fill color. |
| String |
| The color for a selected tab. Use the hex code or RGBA to define the fill color. |
| String |
| The width, style, and color for the selected tab border. |
| An array of objects |
| 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. |
| String | N/A | The automatically generated tab ID. |
| String |
| The readable tab name with the CSS text style. The default names are: |
| Any |
| The path to the tab icon. |
For more information, see Component properties.