Browse Source

Document NavigationBar

Guy Carmeli 4 years ago
parent
commit
480f9afc8f

+ 14
- 4
lib/src/interfaces/Options.ts View File

1012
   dismissModal?: ViewAnimationOptions;
1012
   dismissModal?: ViewAnimationOptions;
1013
 }
1013
 }
1014
 
1014
 
1015
+/**
1016
+ * Configure Android's NavigationBar
1017
+ */
1018
+export interface NavigationBarOptions {
1019
+  backgroundColor?: Color;
1020
+  visible?: boolean;
1021
+}
1022
+
1015
 export interface Options {
1023
 export interface Options {
1016
   /**
1024
   /**
1017
    * Configure the status bar
1025
    * Configure the status bar
1087
 ```
1095
 ```
1088
    */
1096
    */
1089
   animations?: AnimationOptions;
1097
   animations?: AnimationOptions;
1098
+
1099
+  /**
1100
+   * Configure Android's NavigationBar
1101
+   */
1102
+  navigationBar?: NavigationBarOptions;
1103
+
1090
   /**
1104
   /**
1091
    * Preview configuration for Peek and Pop
1105
    * Preview configuration for Peek and Pop
1092
    * #### (iOS specific)
1106
    * #### (iOS specific)
1114
    * @default false
1128
    * @default false
1115
    */
1129
    */
1116
   blurOnUnmount?: boolean;
1130
   blurOnUnmount?: boolean;
1117
-  /**
1118
-   * Props to pass to a component
1119
-   */
1120
-  passProps?: Record<string, any>;
1121
 }
1131
 }

+ 38
- 0
website/api/options-navigationBar.mdx View File

1
+---
2
+id: options-navigationBar
3
+title: Navigation Bar Options
4
+sidebar_label: Navigation Bar
5
+---
6
+import useBaseUrl from '@docusaurus/useBaseUrl';
7
+
8
+The Navigation Bar is the area at the bottom of the screen containing Android's three navigation buttons: Back, Home and Recents.
9
+
10
+An example of a dark navigation bar:
11
+<img width="30%" src={useBaseUrl('/img/navBar_black.png')} />
12
+
13
+<br></br>
14
+<br></br>
15
+
16
+```js
17
+const options = {
18
+  navigationBar: {}
19
+};
20
+```
21
+
22
+### `visible`
23
+
24
+Set the navigation bar visibility.
25
+
26
+| Type    | Required | Platform |
27
+| ------- | -------- | -------- |
28
+| boolean | No       | Android     |
29
+
30
+### `backgroundColor`
31
+
32
+Set the navigation bar color. When a light background color is used, the color of the navigation bar icons will adapt to a dark color.
33
+
34
+<img width="30%" src={useBaseUrl('/img/navBar_white.png')} />
35
+
36
+| Type                  | Required | Platform | Default |
37
+| --------------------- | -------- | -------- | ------- |
38
+| Color | No       | Android     | 'black' |

+ 9
- 1
website/api/options-root.mdx View File

13
   sideMenu,
13
   sideMenu,
14
   overlay,
14
   overlay,
15
   modal,
15
   modal,
16
-  preview
16
+  preview,
17
+  navigationBar
17
 };
18
 };
18
 ```
19
 ```
19
 
20
 
162
 | Type    | Required | Platform | Default |
163
 | Type    | Required | Platform | Default |
163
 | ------- | -------- | -------- | ------- |
164
 | ------- | -------- | -------- | ------- |
164
 | boolean | No       | Android  | false   |
165
 | boolean | No       | Android  | false   |
166
+
167
+## `navigationBar`
168
+Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.
169
+
170
+| Type    | Required | Platform |
171
+| ------- | -------- | -------- |
172
+| boolean | No       | Android  |

+ 1
- 0
website/sidebarsApi.js View File

47
         },
47
         },
48
         'options-statusBar',
48
         'options-statusBar',
49
         'options-layout',
49
         'options-layout',
50
+        'options-navigationBar',
50
         'options-overlay',
51
         'options-overlay',
51
         'options-sideMenu',
52
         'options-sideMenu',
52
         'options-sideMenuSide',
53
         'options-sideMenuSide',

BIN
website/static/img/navBar_black.png View File


BIN
website/static/img/navBar_white.png View File