diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue index c8b61ae..a66015d 100644 --- a/src/components/TabContent.vue +++ b/src/components/TabContent.vue @@ -23,6 +23,13 @@ type: String, default: '' }, + /*** + * Icon pack name corresponding + */ + iconPack: { + default: '', + type: String + }, /*** * Function to execute before tab switch. Return value must be boolean * If the return result is false, tab switch is restricted diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue index d6a11d6..6971053 100644 --- a/src/components/WizardStep.vue +++ b/src/components/WizardStep.vue @@ -17,12 +17,16 @@ :class="{square_shape:isStepSquare, tab_shape:isTabShape}" :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]"> - + + {{ tab.iconPack === 'material-icons' ? icon : '' }} + {{index + 1}} - + + {{ tab.iconPack === 'material-icons' ? icon : '' }} + {{index + 1}} diff --git a/types/TabContent.ts b/types/TabContent.ts index cbd1ebd..bcc404a 100644 --- a/types/TabContent.ts +++ b/types/TabContent.ts @@ -3,17 +3,23 @@ import Vue from 'vue' export declare class Tab extends Vue { /** * Title to be displayed under each step. - * + * * Default value: '' */ title: string - + /** CSS class to be applied to each step icon. - * + * * Default value: '' */ icon: string + /** Icon pack name corresponding. + * + * Default value: '' + */ + iconPack: string + /** * Function to execute before changing tabs. If the return result is false, the tab switch is restricted. */