UNPKG

2.17 kBMarkdownView Raw
1```js
2 <div style={{position: 'relative', height: '70rem'}}>
3 <Header
4 position='absolute'
5 mobileProps={
6 {
7 position: 'absolute',
8 drawerPosition:'absolute',
9 signOut: () => alert('signing out')
10 }
11 }
12 desktopProps={
13 {
14 position: 'static',
15 signOut: () => alert('signing out')
16 }
17 } />
18 </div>
19```
20
21#### With bag count
22
23```js
24 <div style={{position: 'relative', height: '70rem'}}>
25 <Header
26 position='absolute'
27 above={
28 <Status fontSize='14px'>FREE SHIPPING FOR ORDERS OF $50+ • FREE RETURNS</Status>
29 }
30 mobileProps={
31 {
32 bagCount: 5,
33 position: 'absolute',
34 drawerPosition:'absolute',
35 signOut: () => alert('signing out')
36 }
37 }
38 desktopProps={
39 {
40 bagCount: 5,
41 position: 'static',
42 signOut: () => alert('signing out')
43 }
44 } />
45 </div>
46```
47
48#### loggedIn
49
50```js
51 <div style={{position: 'relative', height: '70rem'}}>
52 <Header
53 position='absolute'
54 above={
55 <Status fontSize='14px'>FREE SHIPPING FOR ORDERS OF $50+ • FREE RETURNS</Status>
56 }
57 mobileProps={
58 {
59 bagCount: 5,
60 position: 'absolute',
61 drawerPosition:'absolute',
62 loggedIn: true,
63 signOut: () => alert('signing out')
64 }
65 }
66 desktopProps={
67 {
68 bagCount: 5,
69 position: 'static',
70 loggedIn: true,
71 signOut: () => alert('signing out')
72 }
73 } />
74 </div>
75```
76
77#### With status messages
78
79```js
80 <div style={{position: 'relative', height: '70rem'}}>
81 <Header
82 position='absolute'
83 above={
84 <Status fontSize='14px'>FREE SHIPPING FOR ORDERS OF $50+ • FREE RETURNS</Status>
85 }
86 below={
87 <Status type="error">Error message appears here.</Status>
88 }
89 mobileProps={
90 {
91 position: 'absolute',
92 drawerPosition:'absolute'
93 }
94 }
95 desktopProps={
96 {
97 position: 'static'
98 }
99 } />
100 </div>
101```