TabManager

A simple TabManager component.

We will be using the following options:

const tabs = [
  { name: 'money', description: 'Yearly salary' },
  { name: 'personal', description: 'Personal information' }
]

Yearly salary

html

<Card>
    <TabManager :tabs="tabs" :defaultActive="0">
        <template v-slot:money>
            <InputNumber
                class="mb-xs-4"
                name="money"
                label="Yearly salary"
                placeholder="Enter your salary in € gross per year"
                :validations="moneyValidations"
            />
        </template>
        <template v-slot:personal>
            <InputText class="mb-xs-4" name="name" label="Name" :validations="['not-empty']" />
            <InputText class="mb-xs-4" name="lastName" label="Last name" :validations="['not-empty']" />
        </template>
    </TabManager>
</Card>

TabManager ​

TabManager