-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
SinglePanel.tsx
54 lines (53 loc) · 2.86 KB
/
SinglePanel.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
import React, { ReactElement, useState } from "react";
import { usePanels, ExpansionPanel } from "@react-md/expansion-panel";
import { Text } from "@react-md/typography";
import { Grid } from "@react-md/utils";
export default function SinglePanel(): ReactElement {
const [[panelProps]] = usePanels({ idPrefix: "single-panel", count: 1 });
const [expanded, setExpanded] = useState(false);
return (
<Grid columns={1}>
<ExpansionPanel {...panelProps} header="With usePanels">
<Text>
Suspendisse malesuada vitae ipsum quis faucibus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Nam accumsan turpis non
efficitur vehicula. Aenean egestas lobortis fermentum. Integer a purus
ullamcorper, ultrices libero convallis, laoreet ligula. Pellentesque
tellus sapien, porta at mollis a, vehicula eu sem. Fusce lacinia at
nulla eget dapibus. Fusce scelerisque luctus ex non fermentum. Integer
feugiat velit id sagittis commodo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Nam non facilisis ipsum. Vivamus commodo fermentum lectus
sit amet finibus. Donec porttitor, justo nec viverra interdum, mi
lacus pulvinar justo, elementum faucibus lectus nisi at turpis.
Phasellus a ultricies ipsum, vel sodales orci.
</Text>
</ExpansionPanel>
<ExpansionPanel
id="single-panel-own-props"
expanded={expanded}
onExpandClick={() => setExpanded(!expanded)}
header="Custom Props"
>
<Text>
Suspendisse malesuada vitae ipsum quis faucibus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Nam accumsan turpis non
efficitur vehicula. Aenean egestas lobortis fermentum. Integer a purus
ullamcorper, ultrices libero convallis, laoreet ligula. Pellentesque
tellus sapien, porta at mollis a, vehicula eu sem. Fusce lacinia at
nulla eget dapibus. Fusce scelerisque luctus ex non fermentum. Integer
feugiat velit id sagittis commodo. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Nam non facilisis ipsum. Vivamus commodo fermentum lectus
sit amet finibus. Donec porttitor, justo nec viverra interdum, mi
lacus pulvinar justo, elementum faucibus lectus nisi at turpis.
Phasellus a ultricies ipsum, vel sodales orci.
</Text>
</ExpansionPanel>
</Grid>
);
}