You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jun 29, 2021. It is now read-only.
If your own components need to respond to the layout use the `useLayout` hook to obtain the current layout details.
77
+
69
78
## 📱 Responsive
70
79
71
80
The layout adjusts for small screen sizes.
@@ -76,74 +85,80 @@ The layout adjusts for small screen sizes.
76
85
77
86
## 📝 Config
78
87
79
-
For each config parameter a single value or an object with breakpoint keys can be supplied, e.g.
88
+
For each config parameter a single value or an object with breakpoint keys (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) can be supplied, e.g.
80
89
81
90
```javascript
82
91
constconfig= {
83
-
navWidth: {
84
-
// xs is 256px by default
85
-
sm:200, // in sm
86
-
md:256// mdUp
92
+
clipped:false,
93
+
collapsible: {
94
+
// fully specified
95
+
xs:true,
96
+
sm:false,
97
+
md:true,
98
+
lg:false,
99
+
xl:true,
87
100
}
101
+
navWidth: {
102
+
// partial specified, other use closest
103
+
sm:200, // smDown and in sm
104
+
md:256, // mdUp
105
+
},
88
106
}
89
107
```
90
108
91
-
## Props
92
-
93
-
### Root.config
94
-
95
-
|Prop|Type|Description|Default Value|
96
-
|-|-|-|-|
97
-
|clipped|boolean \| ScreenProps\<boolean>|Clipped moves the header over the top of the navigation drawer, unclipped makes navigation full height|false
98
-
|collapsible|boolean \| ScreenProps\<boolean>|Can the navigation be collapsed to a smaller form|true|
99
-
|collapsedWidth|number \| ScreenProps\<number>|Width of the collapsed navigation|64|
100
-
|footerShrink|boolean \| ScreenProps\<boolean>|Footer to adjust the size to fit when nav expanded,set false to keep the same width and overflow the screen.|true|
101
-
|navAnchor|Orientation \| ScreenProps\<Orientation>|Which side of the screen to show the nav panel|left|
102
-
|navVariant|Variant \| ScreenProps\<Variant>|**Permanent**: stays all the time. **Persistent**: remains open but can be hidden with button. **Temporary**: hides on click away (and selection).|permanent|
103
-
|navWidth|number \| ScreenProps\<number>|Width of the navigation drawer|256|
104
-
|headerPosition|Position \| ScreenProps\<Position>|Position applied to the AppBar header. one of 'static', 'relative', 'sticky', 'fixed', 'absolute' See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning|relative|
105
-
|squeezed|boolean \| ScreenProps\<>|Both header and content adjust the size to fit when nav expanded, set false to keep the same width and overflow the screen.|boolean|
106
-
107
-
### Root.component
108
-
109
-
### Nav.component
110
-
### Nav.header
111
-
`ReactNode`
112
-
### Nav.closeButtonProps
113
-
Props to pass to the underlying Close Button. `IconButtonProps`
114
-
### Nav.collapsedIcon
115
-
```
116
-
{
117
-
active: ReactNode
118
-
inactive: ReactNode
119
-
}
120
-
```
109
+
## 📝 Config
121
110
122
-
### Content.component
111
+
For each config parameter a single value or an object with breakpoint keys (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) can be supplied, e.g.
123
112
124
-
### Header.position
125
-
One of 'static', 'relative', 'sticky', 'fixed', 'absolute'. See `Root.headerPosition`.
126
-
### Header.toolbarProps
127
-
Props to pass to the underlying Toolbar. `commitd/components ToolbarProps`
128
-
### Header.menuButtonProps
129
-
Props to pass to the underlying Menu Button. `IconButtonProps`
130
-
### Header.menuIcon
131
-
```
132
-
{
133
-
active: ReactNode
134
-
inactive: ReactNode
113
+
```javascript
114
+
constconfig= {
115
+
clipped:false,
116
+
collapsible: {
117
+
// fully specified
118
+
xs:true,
119
+
sm:false,
120
+
md:true,
121
+
lg:false,
122
+
xl:true,
123
+
}
124
+
navWidth: {
125
+
// partial specified, other use closest
126
+
sm:200, // smDown and in sm
127
+
md:256, // mdUp
128
+
},
135
129
}
136
130
```
137
-
### Header.color
138
131
139
-
### Footer.component
132
+
| Config parameter | Type | Description | Default Value |
| collapsible | boolean \| ScreenProps\<boolean\>| Can the navigation be collapsed to a smaller form | true |
135
+
| collapsedWidth | number \| ScreenProps\<number\>| Width of the collapsed navigation | 64 |
136
+
| navAnchor | Orientation \| ScreenProps\<Orientation\>| Which side of the screen to show the nav panel | left |
137
+
| navVariant | Variant \| ScreenProps\<Variant\>|**Permanent**: stays all the time. **Persistent**: remains open but can be hidden with button. **Temporary**: hides on click away (and selection). | permanent |
138
+
| navWidth | number \| ScreenProps\<number\>| Width of the navigation drawer | 256 |
139
+
| headerPosition | Position \| ScreenProps\<Position\>| Position applied to the AppBar header. one of 'static', 'relative', 'sticky', 'fixed', 'absolute' See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning| relative |
140
+
| headerResponse | HeaderResponse \| ScreenProps\<HeaderResponse\>| How should the Header adjust its size and position when navigation expanded . One of 'clipped', 'static', 'squeezed', 'pushed'. | 'squeezed' |
141
+
| contentResponse | Response \| ScreenProps\<Response\>| How should the Content adjust its size and position when navigation expanded. One of 'static', 'squeezed', 'pushed'. | 'squeezed' |
142
+
| footerResponse | Response \| ScreenProps\<Response\>| How should the Footer adjust its size and position when navigation expanded. One of 'static', 'squeezed', 'pushed'. | 'squeezed' |
143
+
144
+
### Response
145
+
146
+
How the elements respond to the navigation position changes is configured using the `xxxResponse` parameters. The values are:
147
+
148
+
-**static**: does not move for the navigation drawer, which sits on top
149
+
-**squeezed**: size is reduced to allow for the navigation draw
150
+
-**pushed**: the size remains the same but is moved over to allow for the drawer, only effective for navAnchor `left`
151
+
-**clipped**: (Header only) moves the header over the top of the navigation drawer
152
+
153
+
### Props
140
154
155
+
For component props, see the [storybook](https://committed.software/layout)
141
156
142
157
## 💻 Development
143
158
144
159
On first use run `yarn install` in both the root folder and the example folder.
145
160
146
-
The main build is currently performed using Rollup:
0 commit comments