Can't customise Tabs Component

[SOG-web]

maryUI version

1.31

daisyUI version

4.11.1

Livewire version

3.5

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

✅ For sure you can paste screenshots.

❌ Please, don't paste code as screenshot. Paste as formatted markdown code.

PHP

return <<<'HTML'
                    <div
                        x-data="{
                                tabs: [],
                                selected:
                                    @if($selected)
                                        '{{ $selected }}'
                                    @else
                                        @entangle($attributes->wire('model'))
                                    @endif
                                 ,
                                 init() {
                                     // Fix weird issue when navigating back
                                     document.addEventListener('livewire:navigating', () => {
                                         document.querySelectorAll('.tab').forEach(el =>  el.remove());
                                     });
                                 }
                        }"
                        class="relative w-full"
                    >
                        <!-- TAB LABELS -->
                        <div class="border-b-2 border-b-base-200 flex overflow-x-auto">
                            <template x-for="tab in tabs">
                                <a
                                    role="tab"
                                    x-html="tab.label"
                                    @click="selected = tab.name"
                                    :class="(selected === tab.name) && 'border-b-2 border-b-gray-600 dark:border-b-gray-400'"
                                    class="tab font-semibold border-b-2 border-b-base-300"></a>
                            </template>
                        </div>

                        <!-- TAB CONTENT -->
                        <div role="tablist" {{ $attributes->except(['wire:model', 'wire:model.live'])->class(["tabs tabs-bordered block"]) }}>
                            {{ $slot }}
                        </div>
                    </div>
                HTML;

<x-tabs wire:model="selectedTab" class="!border-none w-full"></x-tabs>

I tried adding css to remove the labels border but it not working

[robsontenorio]

What was the visual result ? And what do you expect to see ?

[SOG-web]

The visual result is thesame as the docs

What I expected it the ability to control the look and feel of the tabs label, e.g add a background colour, remove the border, add more spacing between the labels, e.t.c

I believe If the label class can be made extendable, it should fit into all case scenario

[SOG-web]

Also since the class property for the label is finite, we can bring it out totally

<x-tabs wire:model="selectedTab"
bodyClass="some class"
labelClass="!border-none w-full" active="some class"></x-tabs>

return <<<'HTML'
                    <div
                        x-data="{
                                tabs: [],
                                selected:
                                    @if($selected)
                                        '{{ $selected }}'
                                    @else
                                        @entangle($attributes->wire('model'))
                                    @endif
                                 ,
                                 init() {
                                     // Fix weird issue when navigating back
                                     document.addEventListener('livewire:navigating', () => {
                                         document.querySelectorAll('.tab').forEach(el =>  el.remove());
                                     });
                                 }
                        }"
                        class="relative w-full"
                    >
                        <!-- TAB LABELS -->
                        <div class="bodyClass">
                            <template x-for="tab in tabs">
                                <a
                                    role="tab"
                                    x-html="tab.label"
                                    @click="selected = tab.name"
                                    :class="(selected === tab.name) && 'active'"
                                    class="labelClass"></a>
                            </template>
                        </div>

                        <!-- TAB CONTENT -->
                        <div role="tablist" {{ $attributes->except(['wire:model', 'wire:model.live'])->class(["tabs block"]) }}>
                            {{ $slot }}
                        </div>
                    </div>
                HTML;

[robsontenorio]

Solved by #476