@inneisystem/tab-container v1.0.5

Tab container ·

Simple React Component. Wrapper that create tab control element from child components

Installation

npm instal @inneisystem/tab-container

or

yarn add @inneisystem/tab-container

Props

Example

import { TabContainer } from '@inneisystem/tab-container';
import '@inneisystem/tab-container/style.css';

function App() {
  return (
    <TabContainer names={['first', 'second', 'third']}>
      <h1>FIRST TAB</h1>
      <div>SECOND TAB</div>
      <p>THRID TAB</p>
    </TabContainer>
  );
}

ReactDOM.render(<App />, document.getElementById('container'));

You can add caption prop in child element this will make tab with this name, but if don't passed names prop in TabContainer

example with typescript:

...

const Div: React.FC<{ caption?: string }> = ({ children }) => {
  return <div>{children}</div>;
};

const App: React.FC = (props) => {
  return (
    <TabContainer>
      <Div caption="first">FIRST TAB</Div>
      <Div caption="second">SECOND TAB</Div>
      <Div caption="thrid">THRID TAB</Div>
    </TabContainer>
  );
}

...

You can styling this in your css Sandbox Example

<div class="tab-container">
  <div class="tab-container__buttons">
    <div class="tab-container__button tab-container__button_active">FIRST CAPTION</div>
    <div class="tab-container__button ">SECOND CAPTION</div>
  </div>
  <div class="tab-container__content"><div>FIRST TAB</div></div>
</div>

License

Pomatsuev Stanislav ISC licensed.