@patternfly/react-core 4.227.7 → 4.227.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/umd/react-core.css +756 -756
- package/package.json +5 -5
- package/src/components/Page/examples/Page.md +10 -615
- package/src/components/Page/examples/PageCenteredSection.tsx +76 -0
- package/src/components/Page/examples/PageGroupSection.tsx +106 -0
- package/src/components/Page/examples/PageHorizontalNav.tsx +43 -0
- package/src/components/Page/examples/PageMainSectionPadding.tsx +72 -0
- package/src/components/Page/examples/PageTertiaryNav.tsx +42 -0
- package/src/components/Page/examples/PageUncontrolledNav.tsx +53 -0
- package/src/components/Page/examples/PageVerticalNav.tsx +65 -0
- package/src/components/Page/examples/PageVerticalNavUsingPageHeaderComponent.tsx +44 -0
- package/src/components/Page/examples/PageWithOrWithoutFill.tsx +67 -0
- package/src/components/Switch/examples/Switch.md +6 -153
- package/src/components/Switch/examples/SwitchBasic.tsx +20 -0
- package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx +22 -0
- package/src/components/Switch/examples/SwitchDisabled.tsx +28 -0
- package/src/components/Switch/examples/SwitchReversed.tsx +21 -0
- package/src/components/Switch/examples/SwitchUncontrolled.tsx +14 -0
- package/src/components/Switch/examples/SwitchWithoutLabel.tsx +12 -0
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadToggle,
|
|
6
|
+
MastheadMain,
|
|
7
|
+
MastheadBrand,
|
|
8
|
+
MastheadContent,
|
|
9
|
+
PageSidebar,
|
|
10
|
+
PageSection,
|
|
11
|
+
PageToggleButton,
|
|
12
|
+
Toolbar,
|
|
13
|
+
ToolbarContent,
|
|
14
|
+
ToolbarItem,
|
|
15
|
+
Card,
|
|
16
|
+
CardBody
|
|
17
|
+
} from '@patternfly/react-core';
|
|
18
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
19
|
+
|
|
20
|
+
export const PageCenteredSection: React.FunctionComponent = () => {
|
|
21
|
+
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
|
22
|
+
|
|
23
|
+
const onNavToggle = () => {
|
|
24
|
+
setIsNavOpen(!isNavOpen);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const headerToolbar = (
|
|
28
|
+
<Toolbar id="centered-toolbar">
|
|
29
|
+
<ToolbarContent>
|
|
30
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
31
|
+
</ToolbarContent>
|
|
32
|
+
</Toolbar>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
const header = (
|
|
36
|
+
<Masthead>
|
|
37
|
+
<MastheadToggle>
|
|
38
|
+
<PageToggleButton
|
|
39
|
+
variant="plain"
|
|
40
|
+
aria-label="Global navigation"
|
|
41
|
+
isNavOpen={isNavOpen}
|
|
42
|
+
onNavToggle={onNavToggle}
|
|
43
|
+
id="centered-nav-toggle"
|
|
44
|
+
>
|
|
45
|
+
<BarsIcon />
|
|
46
|
+
</PageToggleButton>
|
|
47
|
+
</MastheadToggle>
|
|
48
|
+
<MastheadMain>
|
|
49
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
50
|
+
Logo
|
|
51
|
+
</MastheadBrand>
|
|
52
|
+
</MastheadMain>
|
|
53
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
54
|
+
</Masthead>
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<Page header={header} sidebar={sidebar}>
|
|
61
|
+
<PageSection isWidthLimited isCenterAligned>
|
|
62
|
+
<Card>
|
|
63
|
+
<CardBody>
|
|
64
|
+
When a width limited page section is wider than the value of
|
|
65
|
+
<code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main
|
|
66
|
+
section.
|
|
67
|
+
<br />
|
|
68
|
+
<br />
|
|
69
|
+
The content in this example is placed in a card to better illustrate how the section behaves when it is
|
|
70
|
+
centered. A card is not required to center a page section.
|
|
71
|
+
</CardBody>
|
|
72
|
+
</Card>
|
|
73
|
+
</PageSection>
|
|
74
|
+
</Page>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadToggle,
|
|
6
|
+
MastheadMain,
|
|
7
|
+
MastheadBrand,
|
|
8
|
+
MastheadContent,
|
|
9
|
+
PageSidebar,
|
|
10
|
+
PageSection,
|
|
11
|
+
PageGroup,
|
|
12
|
+
PageBreadcrumb,
|
|
13
|
+
PageNavigation,
|
|
14
|
+
PageSectionVariants,
|
|
15
|
+
PageToggleButton,
|
|
16
|
+
Breadcrumb,
|
|
17
|
+
BreadcrumbItem,
|
|
18
|
+
Nav,
|
|
19
|
+
NavList,
|
|
20
|
+
NavItem,
|
|
21
|
+
Toolbar,
|
|
22
|
+
ToolbarContent,
|
|
23
|
+
ToolbarItem
|
|
24
|
+
} from '@patternfly/react-core';
|
|
25
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
26
|
+
|
|
27
|
+
export const PageGroupSection: React.FunctionComponent = () => {
|
|
28
|
+
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
|
29
|
+
|
|
30
|
+
const onNavToggle = () => {
|
|
31
|
+
setIsNavOpen(!isNavOpen);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const headerToolbar = (
|
|
35
|
+
<Toolbar id="group-section-toolbar">
|
|
36
|
+
<ToolbarContent>
|
|
37
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
38
|
+
</ToolbarContent>
|
|
39
|
+
</Toolbar>
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
const header = (
|
|
43
|
+
<Masthead>
|
|
44
|
+
<MastheadToggle>
|
|
45
|
+
<PageToggleButton
|
|
46
|
+
variant="plain"
|
|
47
|
+
aria-label="Global navigation"
|
|
48
|
+
isNavOpen={isNavOpen}
|
|
49
|
+
onNavToggle={onNavToggle}
|
|
50
|
+
id="group-section-nav-toggle"
|
|
51
|
+
>
|
|
52
|
+
<BarsIcon />
|
|
53
|
+
</PageToggleButton>
|
|
54
|
+
</MastheadToggle>
|
|
55
|
+
<MastheadMain>
|
|
56
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
57
|
+
Logo
|
|
58
|
+
</MastheadBrand>
|
|
59
|
+
</MastheadMain>
|
|
60
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
61
|
+
</Masthead>
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar" />;
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<Page header={header} sidebar={sidebar}>
|
|
68
|
+
<PageGroup>
|
|
69
|
+
<PageNavigation>
|
|
70
|
+
<Nav aria-label="Group section navigation" variant="tertiary">
|
|
71
|
+
<NavList>
|
|
72
|
+
<NavItem href="#" itemId={0} isActive>
|
|
73
|
+
System panel
|
|
74
|
+
</NavItem>
|
|
75
|
+
<NavItem href="#" itemId={1}>
|
|
76
|
+
Policy
|
|
77
|
+
</NavItem>
|
|
78
|
+
<NavItem href="#" itemId={2}>
|
|
79
|
+
Authentication
|
|
80
|
+
</NavItem>
|
|
81
|
+
<NavItem href="#" itemId={3}>
|
|
82
|
+
Network services
|
|
83
|
+
</NavItem>
|
|
84
|
+
<NavItem href="#" itemId={4}>
|
|
85
|
+
Server
|
|
86
|
+
</NavItem>
|
|
87
|
+
</NavList>
|
|
88
|
+
</Nav>
|
|
89
|
+
</PageNavigation>
|
|
90
|
+
<PageBreadcrumb>
|
|
91
|
+
<Breadcrumb>
|
|
92
|
+
<BreadcrumbItem>Section home</BreadcrumbItem>
|
|
93
|
+
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
|
|
94
|
+
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
|
|
95
|
+
<BreadcrumbItem to="#" isActive>
|
|
96
|
+
Section landing
|
|
97
|
+
</BreadcrumbItem>
|
|
98
|
+
</Breadcrumb>
|
|
99
|
+
</PageBreadcrumb>
|
|
100
|
+
<PageSection variant={PageSectionVariants.light}>Grouped section</PageSection>
|
|
101
|
+
</PageGroup>
|
|
102
|
+
<PageSection variant={PageSectionVariants.dark}>Section 1</PageSection>
|
|
103
|
+
<PageSection variant={PageSectionVariants.dark}>Section 2</PageSection>
|
|
104
|
+
</Page>
|
|
105
|
+
);
|
|
106
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadMain,
|
|
6
|
+
MastheadBrand,
|
|
7
|
+
MastheadContent,
|
|
8
|
+
PageSection,
|
|
9
|
+
PageSectionVariants,
|
|
10
|
+
Toolbar,
|
|
11
|
+
ToolbarContent,
|
|
12
|
+
ToolbarItem
|
|
13
|
+
} from '@patternfly/react-core';
|
|
14
|
+
|
|
15
|
+
export const PageHorizontalNav: React.FunctionComponent = () => {
|
|
16
|
+
const headerToolbar = (
|
|
17
|
+
<Toolbar id="horizontal-toolbar">
|
|
18
|
+
<ToolbarContent>
|
|
19
|
+
<ToolbarItem>Navigation</ToolbarItem>
|
|
20
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
21
|
+
</ToolbarContent>
|
|
22
|
+
</Toolbar>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
const header = (
|
|
26
|
+
<Masthead inset={{ default: 'insetXs' }}>
|
|
27
|
+
<MastheadMain>
|
|
28
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
29
|
+
Logo
|
|
30
|
+
</MastheadBrand>
|
|
31
|
+
</MastheadMain>
|
|
32
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
33
|
+
</Masthead>
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<Page header={header}>
|
|
38
|
+
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
|
|
39
|
+
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
|
|
40
|
+
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
|
|
41
|
+
</Page>
|
|
42
|
+
);
|
|
43
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadToggle,
|
|
6
|
+
MastheadMain,
|
|
7
|
+
MastheadBrand,
|
|
8
|
+
MastheadContent,
|
|
9
|
+
PageSidebar,
|
|
10
|
+
PageSection,
|
|
11
|
+
PageSectionVariants,
|
|
12
|
+
PageToggleButton,
|
|
13
|
+
Toolbar,
|
|
14
|
+
ToolbarContent,
|
|
15
|
+
ToolbarItem
|
|
16
|
+
} from '@patternfly/react-core';
|
|
17
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
18
|
+
|
|
19
|
+
export const PageMainSectionPadding: React.FunctionComponent = () => {
|
|
20
|
+
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
|
21
|
+
|
|
22
|
+
const onNavToggle = () => {
|
|
23
|
+
setIsNavOpen(!isNavOpen);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const headerToolbar = (
|
|
27
|
+
<Toolbar id="main-padding-toolbar">
|
|
28
|
+
<ToolbarContent>
|
|
29
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
30
|
+
</ToolbarContent>
|
|
31
|
+
</Toolbar>
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
const header = (
|
|
35
|
+
<Masthead>
|
|
36
|
+
<MastheadToggle>
|
|
37
|
+
<PageToggleButton
|
|
38
|
+
variant="plain"
|
|
39
|
+
aria-label="Global navigation"
|
|
40
|
+
isNavOpen={isNavOpen}
|
|
41
|
+
onNavToggle={onNavToggle}
|
|
42
|
+
id="main-padding-nav-toggle"
|
|
43
|
+
>
|
|
44
|
+
<BarsIcon />
|
|
45
|
+
</PageToggleButton>
|
|
46
|
+
</MastheadToggle>
|
|
47
|
+
<MastheadMain>
|
|
48
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
49
|
+
Logo
|
|
50
|
+
</MastheadBrand>
|
|
51
|
+
</MastheadMain>
|
|
52
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
53
|
+
</Masthead>
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<Page header={header} sidebar={sidebar}>
|
|
60
|
+
<PageSection>Section with default padding</PageSection>
|
|
61
|
+
<PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
|
|
62
|
+
Section with no padding
|
|
63
|
+
</PageSection>
|
|
64
|
+
<PageSection padding={{ default: 'noPadding', md: 'padding', lg: 'padding' }}>
|
|
65
|
+
Section with padding only on medium/large
|
|
66
|
+
</PageSection>
|
|
67
|
+
<PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>
|
|
68
|
+
Section with no padding on medium
|
|
69
|
+
</PageSection>
|
|
70
|
+
</Page>
|
|
71
|
+
);
|
|
72
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadMain,
|
|
6
|
+
MastheadBrand,
|
|
7
|
+
MastheadContent,
|
|
8
|
+
PageSection,
|
|
9
|
+
PageSectionVariants,
|
|
10
|
+
Toolbar,
|
|
11
|
+
ToolbarContent,
|
|
12
|
+
ToolbarItem
|
|
13
|
+
} from '@patternfly/react-core';
|
|
14
|
+
|
|
15
|
+
export const PageTertiaryNav: React.FunctionComponent = () => {
|
|
16
|
+
const headerToolbar = (
|
|
17
|
+
<Toolbar id="tertiary-toolbar">
|
|
18
|
+
<ToolbarContent>
|
|
19
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
20
|
+
</ToolbarContent>
|
|
21
|
+
</Toolbar>
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
const header = (
|
|
25
|
+
<Masthead display={{ default: 'stack' }} inset={{ default: 'insetXs' }}>
|
|
26
|
+
<MastheadMain>
|
|
27
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
28
|
+
Logo
|
|
29
|
+
</MastheadBrand>
|
|
30
|
+
</MastheadMain>
|
|
31
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
32
|
+
</Masthead>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Page header={header} tertiaryNav="Navigation">
|
|
37
|
+
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
|
|
38
|
+
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
|
|
39
|
+
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
|
|
40
|
+
</Page>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadToggle,
|
|
6
|
+
MastheadMain,
|
|
7
|
+
MastheadBrand,
|
|
8
|
+
MastheadContent,
|
|
9
|
+
PageSidebar,
|
|
10
|
+
PageSection,
|
|
11
|
+
PageSectionVariants,
|
|
12
|
+
PageToggleButton,
|
|
13
|
+
Toolbar,
|
|
14
|
+
ToolbarContent,
|
|
15
|
+
ToolbarItem
|
|
16
|
+
} from '@patternfly/react-core';
|
|
17
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
18
|
+
|
|
19
|
+
export const PageUncontrolledNav: React.FunctionComponent = () => {
|
|
20
|
+
const headerToolbar = (
|
|
21
|
+
<Toolbar id="uncontrolled-toolbar">
|
|
22
|
+
<ToolbarContent>
|
|
23
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
24
|
+
</ToolbarContent>
|
|
25
|
+
</Toolbar>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
const header = (
|
|
29
|
+
<Masthead>
|
|
30
|
+
<MastheadToggle>
|
|
31
|
+
<PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
|
|
32
|
+
<BarsIcon />
|
|
33
|
+
</PageToggleButton>
|
|
34
|
+
</MastheadToggle>
|
|
35
|
+
<MastheadMain>
|
|
36
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
37
|
+
Logo
|
|
38
|
+
</MastheadBrand>
|
|
39
|
+
</MastheadMain>
|
|
40
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
41
|
+
</Masthead>
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
const sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar" />;
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<Page isManagedSidebar header={header} sidebar={sidebar}>
|
|
48
|
+
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
|
|
49
|
+
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
|
|
50
|
+
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
|
|
51
|
+
</Page>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadToggle,
|
|
6
|
+
MastheadMain,
|
|
7
|
+
MastheadBrand,
|
|
8
|
+
MastheadContent,
|
|
9
|
+
PageSidebar,
|
|
10
|
+
PageSection,
|
|
11
|
+
PageSectionVariants,
|
|
12
|
+
PageToggleButton,
|
|
13
|
+
Toolbar,
|
|
14
|
+
ToolbarContent,
|
|
15
|
+
ToolbarItem
|
|
16
|
+
} from '@patternfly/react-core';
|
|
17
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
18
|
+
|
|
19
|
+
export const PageVerticalNav: React.FunctionComponent = () => {
|
|
20
|
+
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
|
21
|
+
|
|
22
|
+
const onNavToggle = () => {
|
|
23
|
+
setIsNavOpen(!isNavOpen);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const headerToolbar = (
|
|
27
|
+
<Toolbar id="vertical-toolbar">
|
|
28
|
+
<ToolbarContent>
|
|
29
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
30
|
+
</ToolbarContent>
|
|
31
|
+
</Toolbar>
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
const header = (
|
|
35
|
+
<Masthead>
|
|
36
|
+
<MastheadToggle>
|
|
37
|
+
<PageToggleButton
|
|
38
|
+
variant="plain"
|
|
39
|
+
aria-label="Global navigation"
|
|
40
|
+
isNavOpen={isNavOpen}
|
|
41
|
+
onNavToggle={onNavToggle}
|
|
42
|
+
id="vertical-nav-toggle"
|
|
43
|
+
>
|
|
44
|
+
<BarsIcon />
|
|
45
|
+
</PageToggleButton>
|
|
46
|
+
</MastheadToggle>
|
|
47
|
+
<MastheadMain>
|
|
48
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
49
|
+
Logo
|
|
50
|
+
</MastheadBrand>
|
|
51
|
+
</MastheadMain>
|
|
52
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
53
|
+
</Masthead>
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar" />;
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<Page header={header} sidebar={sidebar}>
|
|
60
|
+
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
|
|
61
|
+
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
|
|
62
|
+
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
|
|
63
|
+
</Page>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
PageHeader,
|
|
5
|
+
PageHeaderTools,
|
|
6
|
+
PageSidebar,
|
|
7
|
+
PageSection,
|
|
8
|
+
PageSectionVariants
|
|
9
|
+
} from '@patternfly/react-core';
|
|
10
|
+
|
|
11
|
+
export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
|
|
12
|
+
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
|
13
|
+
|
|
14
|
+
const onNavToggle = () => {
|
|
15
|
+
setIsNavOpen(!isNavOpen);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const logoProps = {
|
|
19
|
+
href: 'https://patternfly.org',
|
|
20
|
+
target: '_blank'
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const header = (
|
|
24
|
+
<PageHeader
|
|
25
|
+
logo="Logo"
|
|
26
|
+
logoProps={logoProps}
|
|
27
|
+
headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
|
|
28
|
+
showNavToggle
|
|
29
|
+
isNavOpen={isNavOpen}
|
|
30
|
+
onNavToggle={onNavToggle}
|
|
31
|
+
navToggleId="vertical-pageheader-toggle"
|
|
32
|
+
/>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar" />;
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<Page header={header} sidebar={sidebar}>
|
|
39
|
+
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
|
|
40
|
+
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
|
|
41
|
+
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
|
|
42
|
+
</Page>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Page,
|
|
4
|
+
Masthead,
|
|
5
|
+
MastheadToggle,
|
|
6
|
+
MastheadMain,
|
|
7
|
+
MastheadBrand,
|
|
8
|
+
MastheadContent,
|
|
9
|
+
PageSidebar,
|
|
10
|
+
PageSection,
|
|
11
|
+
PageToggleButton,
|
|
12
|
+
Toolbar,
|
|
13
|
+
ToolbarContent,
|
|
14
|
+
ToolbarItem
|
|
15
|
+
} from '@patternfly/react-core';
|
|
16
|
+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
17
|
+
|
|
18
|
+
export const PageWithOrWithoutFill: React.FunctionComponent = () => {
|
|
19
|
+
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
|
20
|
+
|
|
21
|
+
const onNavToggle = () => {
|
|
22
|
+
setIsNavOpen(!isNavOpen);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const headerToolbar = (
|
|
26
|
+
<Toolbar id="fill-toolbar">
|
|
27
|
+
<ToolbarContent>
|
|
28
|
+
<ToolbarItem>header-tools</ToolbarItem>
|
|
29
|
+
</ToolbarContent>
|
|
30
|
+
</Toolbar>
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
const header = (
|
|
34
|
+
<Masthead>
|
|
35
|
+
<MastheadToggle>
|
|
36
|
+
<PageToggleButton
|
|
37
|
+
variant="plain"
|
|
38
|
+
aria-label="Global navigation"
|
|
39
|
+
isNavOpen={isNavOpen}
|
|
40
|
+
onNavToggle={onNavToggle}
|
|
41
|
+
id="fill-nav-toggle"
|
|
42
|
+
>
|
|
43
|
+
<BarsIcon />
|
|
44
|
+
</PageToggleButton>
|
|
45
|
+
</MastheadToggle>
|
|
46
|
+
<MastheadMain>
|
|
47
|
+
<MastheadBrand href="https://patternfly.org" target="_blank">
|
|
48
|
+
Logo
|
|
49
|
+
</MastheadBrand>
|
|
50
|
+
</MastheadMain>
|
|
51
|
+
<MastheadContent>{headerToolbar}</MastheadContent>
|
|
52
|
+
</Masthead>
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar" />;
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<Page header={header} sidebar={sidebar}>
|
|
59
|
+
<PageSection>A default page section</PageSection>
|
|
60
|
+
<PageSection isFilled={true}>This section fills the available space.</PageSection>
|
|
61
|
+
<PageSection isFilled={false}>
|
|
62
|
+
This section is set to not fill the available space, since the last page section is set to fill the available
|
|
63
|
+
space by default.
|
|
64
|
+
</PageSection>
|
|
65
|
+
</Page>
|
|
66
|
+
);
|
|
67
|
+
};
|