Custom HTML Component - Tabs

Elements Custom Components
1

I have setup a Custom HTML Component with the following template code, that uses Alpine JS reactive data:

<div x-data="{ tab: 'tab1' }" class="max-w-xl mx-auto">
    <div class="mb-4">
        <button
                :class="{'bg-blue-500 text-white': tab === 'tab1', 'bg-white text-gray-700': tab !== 'tab1'}"
                @click="tab = 'tab1'"
                class="px-4 py-2 rounded-tl-lg rounded-tr-lg font-semibold focus:outline-none"
        >
            Tab 1
        </button>
        <button
                :class="{'bg-blue-500 text-white': tab === 'tab2', 'bg-white text-gray-700': tab !== 'tab2'}"
                @click="tab = 'tab2'"
                class="px-4 py-2 rounded-tl-lg rounded-tr-lg font-semibold focus:outline-none"
        >
            Tab 2
        </button>
        <button
                :class="{'bg-blue-500 text-white': tab === 'tab3', 'bg-white text-gray-700': tab !== 'tab3'}"
                @click="tab = 'tab3'"
                class="px-4 py-2 rounded-tl-lg rounded-tr-lg font-semibold focus:outline-none"
        >
            Tab 3
        </button>
    </div>

    <!-- Tab content -->
    <div class="p-6 bg-white rounded-lg shadow">
        <div x-show="tab === 'tab1'">
            <h2 class="text-xl font-bold mb-4">Sub-Heading for Tab 1</h2>
            <p>@dropzone("Tab 1")</p>
        </div>
        <div x-show="tab === 'tab2'">
            <h2 class="text-xl font-bold mb-4">Sub-Heading for Tab 2</h2>
            <p>@dropzone("Tab 2")</p>
        </div>
        <div x-show="tab === 'tab3'">
            <h2 class="text-xl font-bold mb-4">Sub-Heading for Tab 3</h2>
            <p>@dropzone("Tab 3")</p>
        </div>
    </div>
</div>

This doesn’t display the header tabs in the WYSIWYG editor but does work correctly in Preview in browser. I guess you need to be able to see the individual tab contents to set them up? Is their a way to get the header tabs to display in the WIYSIWIG editor?

2

Elements does not allow JavaScript code to run in the editor. This means any alpine code you have will only work in preview.

We are thinking the best way to handle this is via data collections, however, that feature is not quite finished.

My suggestion would be to have a go using data collections (but expect some things to not fully work, and to change in the future).

I’m not at my desk right now, but there are a couple of dev diary videos showing how the component data feature works.

Let me know if you have any questions! :blush: