This is what im trying to achieve: https://adobe.com/go/xd_plugins_discover_plugin?pluginId=c4f56b2a
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.
=> 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 How To Create Tabs apply.
Again: Sorry for the short answer, next week, I’ll hopefully be able to spend some more time answering questions again
@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:
-
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, adiv tabindex=0
would do). You have more control over the look and feel of a div than a button. -
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
}
});