Use of the tab component

[lpatiny]

In spectra to switch from one nucleus to another please migrate to

https://zakodium-oss.github.io/analysis-ui-components/stories/?story=components--tabs--horizontal

we will add more feature in this component to deal correctly with small screens.

[hamed-musallam]

@lpatiny

As i can see from the examples, the tabs component content only accepts String and nothing more. and in our case we pass a component and not a string

[stropitek]

the tabs component content only accepts String and nothing more

Can you show us with screenshots the variants you need as the tab "content"?

[hamed-musallam]

@steinbeck

Can we pass a Component to the tab and not just a literal value (string)?

[hamed-musallam]

@lpatiny

limitation in the current implementation for the tabs which need to be fixed before we can use it inside NMRium,

1- The opened prop should accept string/number and not only TabItem so we can open the tab by id (which is unique) 2- the default opened tab should be the first one in the list if opened props are not specified (not always we need to full control the opened tab from the parent component)

export function ManyTabs({ orientation }) {
  const items: Array<TabItem> = [
    { id: 'a', title: '1H', content: <ReactComponent 1 /> },
    { id: 'b', title: '13C', content: <ReactComponent 2 />},
  ];

  const [state, setState] = useState(items[1]);

  function handleClick(item: TabItem) {
    setState(item);
  }

  return (
    <Tabs
      orientation={orientation}
      items={items}
      opened={state}
      onClick={handleClick}
    />
  );
}