Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. Praesent dapibus euismod euismod. Nulla neque libero, pellentesque ac quam a, bibendum mattis massa. Ut vehicula justo sit amet sagittis sagittis.
Tabs Component
Installation:
Installation: npm install react-tabs-simple
Usage:
import { TabsComponent } from "react-tabs-simple";
Configuration:
The <TabsComponent> child elements MUST follow this format
<> <div className="title"> </div> <div className="content"> </div> </>
<TabsComponent tabPadding={"1rem"} tabColour={"white"} tabBackgroundColour={"#2C514C"} tabRowBackgroundColour={"#355853"} contentPadding={"1rem"} contentColour={"black"} contentBackgroundColour={"white"} > <> <div className="tab"> <h3>Number One</h3> </div> <div className="content"> <p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. Praesent dapibus euismod euismod. Nulla neque libero, pellentesque ac quam a, bibendum mattis massa. Ut vehicula justo sit amet sagittis sagittis.</p> </div> </> <> <div className="tab"> <h3>Number Two</h3> </div> <div className="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p> <p>Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p> <p> Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.</p> <p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. </p> </div> </> <> <div className="tab"> <h3>Number Three</h3> </div> <div className="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p> <p> Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor. </p> <p>Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est</p> </div> </> </TabsComponent>
Text colour for tab.
tabColour={"white"}
Padding for tab.
tabPadding={"1rem"}
Tab Background Colour.
tabBackgroundColour={"#2C514C"}
Background colour for tab row.
tabRowBackgroundColour={"#355853"}
Content section padding.
contentPadding={"1rem"}
Content section text colour.
contentColour={"black"}
Content section background colour.
contentBackgroundColour={"white"}
Tabs Component Example
Number One
Number Two
Number Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.
Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.
Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est ultricies augue, nec ullamcorper arcu sapien tempor ante.
Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.
Mauris interdum porta libero, eget varius metus dignissim id. Duis sollicitudin lacinia ipsum sed tempor.
Maecenas efficitur molestie metus in ultricies. Suspendisse porta, nisl et blandit congue, velit est