Samuel Gomez, Software Engineer - Lead Front-end - ReactJS - Javascript - Nodejs, France - Design UI

Tabs horizontal

Coucou

Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis ut dolor ipsa accusamus corrupti maxime vero beatae enim voluptatum fugiat libero eveniet consequatur tenetur dolorem, minus ipsam quibusdam odit.

Tabs vertical

Coucou

Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis ut dolor ipsa accusamus corrupti maxime vero beatae enim voluptatum fugiat libero eveniet consequatur tenetur dolorem, minus ipsam quibusdam odit.

Tabs with or without composition

<TabContainer id={idTab} idTitle={idTitle} title="Tabs with composition" >
  <TabList idTitle={idTitle} >
    <TabListItem id={idTab} index={0}>Tab 1</TabListItem>
    <TabListItem id={idTab} index={1}>Tab 2</TabListItem>
  </TabList>
  <TabPanel id={idTab} index={0}>
    Content 1
  </TabPanel>
  <TabPanel id={idTab} index={1}>
    Content 2
  </TabPanel>
</TabContainer>

<Tabs id="first" items={items} title="Tabs horizontal" />

Items format :

[
  {
    tab: "Hello dsds",
    panel:
      "<h3>Coucou</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis ut dolor ipsa accusamus corrupti maxime vero beatae enim voluptatum fugiat libero eveniet consequatur tenetur dolorem, minus ipsam quibusdam odit.</p>",
  },
  {
    tab: "Hello dsds2",
    panel:
      "<h3>Coucou2</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis ut dolor ipsa accusamus corrupti maxime vero beatae enim voluptatum fugiat libero eveniet consequatur tenetur dolorem, minus ipsam quibusdam odit.</p>",
  },
  ...
]

Tabs

Horizontal

Tabs horizontal

Coucou

tata titi

bla bla

Tabs vertical

Coucou

tata titi

bla bla

Tabs with or without composition