-
Notifications
You must be signed in to change notification settings - Fork 357
/
BackToTopNameDemo.tsx
66 lines (63 loc) · 2.56 KB
/
BackToTopNameDemo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React from 'react';
import {
BackToTop,
Card,
CardBody,
Gallery,
GalleryItem,
PageSection,
PageSectionVariants,
TextContent,
Text,
Page,
Switch
} from '@patternfly/react-core';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
export const Name = () => {
const [isAlwaysVisible, setIsAlwaysVisible] = React.useState(false);
const handleChange = (_event, isChecked) => {
setIsAlwaysVisible(isChecked);
};
return (
<DashboardWrapper breadcrumb={null}>
<Page>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main title</Text>
<Text component="p">
Body text should be Overpass Regular at 16px.It should have leading of 24px because <br />
of it’s relative line height of 1.5.
</Text>
<Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} />
</TextContent>
</PageSection>
<PageSection
hasOverflowScroll
name="scrolling-section"
tabIndex={0}
aria-label="Scrollable container of demonstration cards with a back to top element"
>
<Gallery hasGutter>
{Array.from({ length: 60 }).map((_value, index) => (
<GalleryItem key={index}>
<Card key={index}>
<CardBody>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed
tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium
finibus at sit amet purus. Duis vulputate odio ac tristique convallis. Praesent porttitor
condimentum varius. Duis pharetra in ligula nec ornare. Vivamus tincidunt nulla a semper semper.
Duis tincidunt gravida elit non vehicula. Nunc eu sem venenatis, lobortis lorem sed, consectetur
erat. Nulla accumsan, justo ac fringilla imperdiet, risus magna mollis libero, sit amet malesuada
quam enim vel odio. Nullam vitae feugiat sem. Suspendisse potenti. Mauris dolor enim, pretium a
pulvinar ut, commodo at risus.
</CardBody>
</Card>
</GalleryItem>
))}
</Gallery>
</PageSection>
<BackToTop scrollableSelector='[name="scrolling-section"]' isAlwaysVisible={isAlwaysVisible} />
</Page>
</DashboardWrapper>
);
};