Registered Ant Tabs code component not working

Hi Team,

I am trying to register AntD component - Tabs. I am facing issue while using it, as we need to use Tabs.TabPane while using it.

TabPane is not exported directly from AntD Tabs. The same problem is with AntD Mentions - Option as well.

Can you please help me with this.

Following is simple code :

import { Tabs } from 'antd';
const { TabPane } = Tabs;
<Tabs>
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
</Tabs>

Thank you.

Hi Vendana, you can just register both components, then use them together in studio:

import { Tabs } from "antd";

registerComponent(Tabs, {
  name: "Tabs",
  props: {
    children: {
      type: "slot",
      allowedComponents: ["TabPane"]
    }
  }
});

registerComponent(Tabs.TabPane, {
  name: "TabPane",
  props: {
    key: "string",
    tab: "string",
    children: "slot"
  }
});

Thank you. It is working with Tabs and Tabs.TabPane. But for Mentions it’s not working correctly.

If we register using the above approach, the Mentions children doesn’t have + icon in Plasmic Studio. Hence not able to add any children component under Mentions.

Please let me know if I am missing something.

import { Mentions } from 'antd';
const { Option } = Mentions;

<Mentions
style={{ width: '100%' }}
defaultValue="@afc163"
>
<Option value="afc163">afc163</Option>
<Option value="zombieJ">zombieJ</Option>
</Mentions>

Hey @then_camel, can you share the code you’re using to register Mentions and Mentions.Options?

registerComponent(Mentions, {
  name: "Mentions",
  props: {
    children: {
      type: "slot",
      allowedComponents: ["MentionsOption"]
    }
  },
  importPath: "antd",
});

registerComponent(Mentions.Option, {
  name: "MentionsOption",
  props: {
    value: "string",
    children: "slot"
  },
  importPath: "antd",
});

Hi @tiago This is the code.

Thank you!

@then_camel, this component is a bit tricky to use in Plasmic studio because it does not render its children (unless the user is typing in the textbox and presses @). There isn’t a very comfortable way to work with it right now, but a workaround is to create MentionsOption out of it and then drag into children in the tree in the left.

@tiago That’s awesome. Thank you :smile: