Styled UI Library

Components

Tabs

Tabs are used to organize content by grouping similar information on the same page. They keep related content in a single container that is shown and hidden through navigation.

Examples

link

Default

The default form of tabs comes with a data mandatory prop. A data example is provided below.

Tab One Headline

Tab One Content

import { Tabs } from '@millanbrankovic/styled-ui-library';

// Data example
const data = [
  {
    "title": "Tab One",
    "panel": [
      {
        "headline": "Tab One Headline",
        "content": "Tab One Content"
      }
    ]
  },
  {
    "title": "Tab Two",
    "panel": [
      {
        "headline": "Tab Two Headline",
        "content": "Tab Two Content"
      }
    ]
  },
  {
    "title": "Tab Three",
    "panel": [
      {
        "headline": "Tab Three Headline",
        "content": "Tab Three Content"
      }
    ]
  }
]

function DefaultTabsExample() {
  return (
    <Tabs data={data} />
  );
};

export default DefaultTabsExample;