import React from 'react'; import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core'; export const TabContentWithBodyPadding: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, tabIndex: string | number ) => { setActiveTabKey(tabIndex); }; const contentRef1 = React.createRef(); const contentRef2 = React.createRef(); const contentRef3 = React.createRef(); return ( Tab item 1} tabContentId="tab1SectionBodyPadding" tabContentRef={contentRef1} /> Tab item 2} tabContentId="tab2SectionBodyPadding" tabContentRef={contentRef2} /> Tab item 3} tabContentId="tab3SectionBodyPadding" tabContentRef={contentRef3} />
Tab 1 section with body and padding Tab 2 section with body and padding Tab 3 section with body and padding
); };