How to make Tabs interactive?

Plasmic Studio Questions
1

How do I make Tabs interactive. I’m using Chakra UI and have a index prop:

image.png

2

If this is a “controlled” prop, then setting it in the studio will “lock” the tab to index 2 (in generated code, index is always set to 2).

When you register the tabs component, you can use the editOnly attribute for the index prop:

registerComponent(Tabs, {
  ...
  props: {
    index: {
      type: "number",
      editOnly: true
    }
  }
});

This means that the prop value you set in the studio will only be used in the studio, but will be ignored when we generate code.

See https://docs.plasmic.app/learn/code-components-ref/#prop-metadata for more details

3

OK.
And how do I make this interactive in Preview. Do I need to convert to link?

image.png
image.png394×570 36.3 KB

4

Or should I link to Page variants for each Tab?

image.png
image.png537×829 29.4 KB

5

hmm if you’re using a Tabs code component, is it not already interactive?

6

OK, seeing your comment. I tried again with a fresh instance of the Tab components and it works.
Too easy. Not sure why the last Tab stopped working will keep an eye on this.

7

OK I see.
If I set index, it stops working. Even if I add your code. So I’ll just leave index unset for now.

8

Can you set…

index: {
  editOnly: true,
  uncontrolledProp: "defaultIndex"
}
9

this means for codegen, it will pass what you specify for index in the studio into the defaultIndex prop instead, which will leave the tabs component in uncontrolled mode, so you can interact with it in preview

10

But I’m using Nextjs

11

ah I just meant “when generating code using Tabs”, it will use defaultIndex instead of index