playbook_ui_docs 14.9.0.pre.rc.16 → 14.9.0.pre.rc.18
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +31 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md +6 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +3 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1b5364dc42d3f5acfe91d5aa9a5928fa72749a6aa26e728f2e459bc3bf97b44a
|
|
4
|
+
data.tar.gz: 875fa9d0facc30a2a617aea1a7497be4c46bd44aabe8b717036c5ef70be36605
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8606d46695824fec308cf98ad82eaa6830797aa3b4a9b9b42147e0c3d0caaba138ac6bb2d969a76350531bff2b6ba19d54aa7107cc4706cad8199f905ffefe1f
|
|
7
|
+
data.tar.gz: 1e51bc65fcb91372ff96d5d1e5c12c556359b5169f3dfd6829a86ce152487438764253f5417e989d63fd21190de30c85f49a9436d96e9f9e372719079ad684e5
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Button, Drawer, Icon, Title } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
const DrawerMenu = () => {
|
|
5
|
+
|
|
6
|
+
return (
|
|
7
|
+
<>
|
|
8
|
+
<Button id="menuButton"
|
|
9
|
+
padding="sm"
|
|
10
|
+
>
|
|
11
|
+
<Icon icon="bars"
|
|
12
|
+
size="3x"
|
|
13
|
+
/>
|
|
14
|
+
</Button>
|
|
15
|
+
<Drawer
|
|
16
|
+
behavior="push"
|
|
17
|
+
closeBreakpoint="md"
|
|
18
|
+
menuButtonID="menuButton"
|
|
19
|
+
overlay={false}
|
|
20
|
+
placement="left"
|
|
21
|
+
size="lg"
|
|
22
|
+
withinElement
|
|
23
|
+
>
|
|
24
|
+
<Title paddingBottom="md">A really neat menu</Title>
|
|
25
|
+
<Button text="This Button does nothing" />
|
|
26
|
+
</Drawer>
|
|
27
|
+
</>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export default DrawerMenu;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
|
|
2
|
+
|
|
3
|
+
Set a menu button with the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
|
|
4
|
+
|
|
5
|
+
Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
|
|
6
|
+
|
|
@@ -3,3 +3,4 @@ export { default as DrawerSizes } from './_drawer_sizes.jsx'
|
|
|
3
3
|
export { default as DrawerOverlay } from './_drawer_overlay.jsx'
|
|
4
4
|
export { default as DrawerBorders } from './_drawer_borders.jsx'
|
|
5
5
|
export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
|
|
6
|
+
export { default as DrawerMenu } from './_drawer_menu.jsx'
|