Render pilet under a tab

Question

I want to render a pilet under a tab. I have managed to render the pilet name as a tab but content can't be renderd. I am using Fluent UI Pivots. https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot The idea is when you click a a Tab/Pivot name the micro front end should be loaded.

Answer 1

The easiest way I see is to use a conventional extension slot for doing that. A more obvious way (for pilet developers) would be to have a custom API like registerTab for registering tab components.

Following the easy way you could the following for your Pivot:

export const MyTabComponent = () => {
  return (
    <ExtensionSlot name="tabs" render={children => (
      <Pivot>
        {children.map((child, i) =>
          <PivotItem headerText="First Tab" key={i}>
            {child}
          </PivotItem>
        )}
      </Pivot>
    )} />
  );
};

Using this in your app shell all you'd need to do in a pilet is register an extension for tabs.

export function setup(api) {
  api.registerExtension("tabs", () => <div>Sample content!</div>);
}