# jetformbuilder/3.6.6/modules/framework/vue-ui/components/tabs.php

JetFormBuilder — Dynamic Blocks Form Builder, version 3.6.6. 30 lines.

- Page: https://pluginprobe.com/plugins/jetformbuilder/3.6.6/code/modules/framework/vue-ui/components/tabs.php
- Raw: https://pluginprobe.com/plugins/jetformbuilder/3.6.6/raw/modules/framework/vue-ui/components/tabs.php
- Modified: 2023-11-20T11:46:54+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/jetformbuilder/3.6.6/code/modules/framework/vue-ui/components/tabs.php#L10-L20`.

```php
<?php
/**
 * Tabs component
 */
?>
<div
	:class="{
		'cx-vui-tabs': true,
		'cx-vui-tabs--invert': invert,
		'cx-vui-tabs--layout-vertical': 'vertical' === this.layout,
		'cx-vui-tabs--layout-horizontal': 'horizontal' === this.layout,
		'cx-vui-tabs--in-panel': inPanel,
	}"
>
	<div class="cx-vui-tabs__nav">
		<div
			v-for="item in navList"
			:class="{
				'cx-vui-tabs__nav-item': true,
				'cx-vui-tabs__nav-item--active': isActive( item.name ),
			}"
			@click="onTabClick( item.name )"
		>
			{{ item.label }}
		</div>
	</div>
	<div class="cx-vui-tabs__content">
		<slot></slot>
	</div>
</div>
```