mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
42 lines
1.5 KiB
PHP
42 lines
1.5 KiB
PHP
 
|
@props(['active' => ''])
|
||
|
|
|
||
|
|
<div x-data="{
|
||
|
|
activeTab: '{{ $active }}',
|
||
|
|
tabs: [],
|
||
|
|
registerTab(name, value) {
|
||
|
|
this.tabs.push({name: name, value: value});
|
||
|
|
if (! this.activeTab) {
|
||
|
|
this.changeTab(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.tabs.length;
|
||
|
|
},
|
||
|
|
changeTab(tabValue) {
|
||
|
|
this.activeTab = tabValue;
|
||
|
|
this.$dispatch('tab-change', tabValue);
|
||
|
|
}
|
||
|
|
}"
|
||
|
|
{{ $attributes }}
|
||
|
|
>
|
||
|
|
<ul role="tablist" class="tw-flex tw-flex-wrap -tw-mb-px tw-list-none tw-text-center tw-text-gray-500 dark:tw-text-gray-400">
|
||
|
|
<template x-for="(tab, index) in tabs" :key="index">
|
||
|
|
<li class="tw-me-2"
|
||
|
|
@click="changeTab(tab.value)"
|
||
|
|
:id="`tab-${index + 1}`"
|
||
|
|
role="tab"
|
||
|
|
:aria-selected="(tab.value === activeTab).toString()"
|
||
|
|
:aria-controls="`tab-panel-${index + 1}`"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
x-text="tab.name"
|
||
|
|
class="tw-inline-block tw-p-3 tw-border-b-2 tw-rounded-t-lg tw-cursor-pointer"
|
||
|
|
:class="tab.value === activeTab ? 'tw-text-blue-600 tw-border-blue-600 active dark:tw-text-blue-500 dark:tw-border-blue-500' : 'tw-border-transparent hover:tw-text-gray-600 hover:tw-border-gray-300 dark:hover:tw-text-gray-300'"
|
||
|
|
></div>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
</ul>
|
||
|
|
<div x-ref="tabs">
|
||
|
|
{{ $slot }}
|
||
|
|
</div>
|
||
|
|
</div>
|