Adding content to x-doctabs

[HZSamir]

Hello, I would like to add some content to my x-doctabs, something like:

        <x-doctabs>
          <x-doctab>
            <x-label>Normal</x-label>
            <x-content>my content</x-content>
          </x-doctab>

          <x-doctab selected>
            <x-label>Selected</x-label>
            <x-content>my other content</x-content>
          </x-doctab>
       </x-doctabs>

There is no example about this in the docs. Is it even possible? Also, when clicking the "+" button to create a new tab, is there some way to control this? To assign a title and mayble a content? In a word: How do I control the x-doctabs element?

Thank you.

[jarek-foksa]

I haven't documented the programmatic API yet because I'm still tweaking it.

By default the "+" button opens a dummy new tab. You want to prevent that and instead create and open your own tab with custom title, content and other properties:

let {html} = Xel.utils.element;
let tabs = document.querySelector("x-doctabs");

tabs.addEventListener("open", (event) => {
  // Don't open the default dummy tab
  event.preventDefault();

  // Create and open a new custom tab
  {
    let label = "Tab 1";

    let tab = html`
      <x-doctab selected>
        <x-label>${label}</x-label>
        <x-content>my content</x-content>
      </x-doctab>  
    `;

    tabs.openTab(tab);
  }
});

You should be able to put any arbitrary content inside the <x-doctab> (like <x-content>my content</x-content>), though you will have to also style it properly so that it does not break the layout.

[HZSamir]

I think I should have mentioned I am using this inside a React project. I'm guessing your answer would still be valid then, yes? Also, when adding the <x-content> the content goes up inside the tab. Is that the expected behavior? And how do you suggest styling it to have it come down?

Here is a screenshot to illustrate.

Again, thank you.

[jarek-foksa]

You should be able to use Xel in combination with React, though I would recommend you to use plain DOM if you care about performance.

I would try wrapping <x-label> and <x-content> with <x-box vertical> or regular <div style="display: flex; flex-flow: column;">.

[HZSamir]

Thank you. You have been most helpful. Closing.