How to switch between tabs in panel?

This is what im trying to achieve: https://adobe.com/go/xd_plugins_discover_plugin?pluginId=c4f56b2a

@pklaschka sorry for pinging, but I’m truly stuck. My code works as regular HTML but not in XD.

It’s really up to you to either implement your own tabs (that’s what we’ve done) or use some standard tab library such as for React.

1 Like

=> my answer is very short and simple (a result of 2 minutes of research for an example of how to do it in websites).

XD plugins use fairly standard web code (HTML, CSS, JS) => solutions for websites do apply

There is no built-in tabs component. If you use something like React, there are a lot of libraries for that. Otherwise, things like https://www.w3schools.com/howto/howto_js_tabs.asp apply.

Again: Sorry for the short answer, next week, I’ll hopefully be able to spend some more time answering questions again :wink:

@boron Do you use React or some other framework? If React, check out the ui-html-playground plugin sample – it has a tab-like UI. (https://github.com/AdobeXD/plugin-samples/tree/master/ui-html-playground)

From a vanilla JS perspective, it’s pretty much like you would do it on any other webpage. From the sounds of it, you’ve already got something that works in a web browser, so it would be helpful to see a code snippet so we can see if there’s something that jumps out at us that UXP doesn’t support.

I’m using this code: https://www.w3schools.com/howto/howto_js_tabs.asp
The different tabcontent class divs are hidden, but they are not changing the display style to block on button press. And I guess UXP buttons don’t have an active mode, because it’s not changing color on press either.

So, two things:

  1. XD buttons only allow certain colors; so if you’re trying to override it, specify either appearance: none as a style, or switch to another control with a tabindex (for example, a div tabindex=0 would do). You have more control over the look and feel of a div than a button.

  2. XD doesn’t execute code represented as a string. This means that if you have a snippet of HTML that’s specifying an inline event handler (as the example does), those handlers won’t be executed. Instead, you need to attach event listeners from code.

For example:

const tabRoot = document.querySelector(".tabs");
tabRoot.attachEventListener("click", evt => {
    const clickedTab = evt.target;
    if (clickedTab.getAttribute("class").indexOf(".tablinks") > -1) {
        openCity(clickedTab, clickedTab.innerText); 
        // openCity would need a slight mod from the example code, since I'm
        // passing the clicked element, not the event itself
    }
});