package.src.demos.Tabs.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation
Show all versions of react-core Show documentation
This library provides a set of common React components for use with the PatternFly reference implementation.
The newest version!
---
id: Tabs
section: components
---
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
## Demos
### Open tabs
```js isFullscreen
import React from 'react';
import {
PageSection,
PageSectionVariants,
PageBreadcrumb,
Breadcrumb,
BreadcrumbItem,
Tabs,
Tab,
TabContent,
TabContentBody,
TabTitleText,
Title,
DescriptionList,
DescriptionListGroup,
DescriptionListTerm,
DescriptionListDescription,
Label,
LabelGroup,
Flex,
FlexItem
} from '@patternfly/react-core';
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
TabsOpenDemo = () => {
const [activeTabKey, setActiveTabKey] = React.useState(0);
// Toggle currently active tab
const handleTabClick = (event, tabIndex) => {
setActiveTabKey(tabIndex);
};
const tabsBreadcrumb = (
Overview
Pods
Pod details{' '}
);
const tabContent = (
Pod details
Name
3scale-control-fccb6ddb9-phyqv9
Status
Running
Namespace
knative-serving-ingress
Restart policy
Always restart
Labels
Active deadline seconds
Not configured
Tolerations
stuff
Pod IP
10..345.2.197
Annotations
stuff
Node
ip-10-0-233-118.us-east-2.computer.external
Created at
);
return (
{tabsBreadcrumb}
3scale-control-fccb6ddb9-phyqv9
}>Running
Details} tabContentId={`tabContent${0}`} />
YAML} tabContentId={`tabContent${1}`} />
Environment} tabContentId={`tabContent${2}`} />
Events} tabContentId={`tabContent${3}`} />
Terminal} tabContentId={`tabContent${4}`} />
{tabContent}
YAML panel
Environment panel
Events panel
Terminal panel
);
};
```
### Open tabs with secondary tabs
```js isFullscreen
import React from 'react';
import {
PageSection,
PageSectionVariants,
PageBreadcrumb,
Breadcrumb,
BreadcrumbItem,
Tabs,
Tab,
TabContent,
TabContentBody,
TabTitleText,
Title,
DescriptionList,
DescriptionListGroup,
DescriptionListTerm,
DescriptionListDescription,
Label,
LabelGroup,
Flex,
FlexItem
} from '@patternfly/react-core';
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
TabsOpenWithSecondaryTabsDemo = () => {
const [activeTabKey, setActiveTabKey] = React.useState(0);
const [activeTabKeySecondary, setActiveTabKeySecondary] = React.useState(10);
// Toggle currently active tab
const handleTabClick = (event, tabIndex) => {
setActiveTabKey(tabIndex);
};
// Toggle currently active secondary tab
const handleTabClickSecondary = (event, tabIndex) => {
setActiveTabKeySecondary(tabIndex);
};
const tabsBreadcrumb = (
Overview
Pods
Pod details{' '}
);
const tabContent = (
Pod details
Name
3scale-control-fccb6ddb9-phyqv9
Status
Running
Namespace
knative-serving-ingress
Restart policy
Always restart
Labels
Active deadline seconds
Not configured
Tolerations
stuff
Pod IP
10..345.2.197
Annotations
stuff
Node
ip-10-0-233-118.us-east-2.computer.external
Created at
);
return (
{tabsBreadcrumb}
3scale-control-fccb6ddb9-phyqv9
}>Running
Details} tabContentId={`tabContent${0}`} />
YAML} tabContentId={`tabContent${1}`} />
Environment} tabContentId={`tabContent${2}`} />
Events} tabContentId={`tabContent${3}`} />
Terminal} tabContentId={`tabContent${4}`} />
Pod information}
tabContentId={`tabContent${10}`}
/>
Editable aspects}
tabContentId={`tabContent${11}`}
/>
{tabContent}
Editable aspects
YAML panel
Environment panel
Events panel
Terminal panel
);
};
```
### Nested tabs
```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
```
### Nested, unindented tabs
```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
```
### Tables and tabs
```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
```
### Modal tabs
```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
```