@genesislcap/foundation-header 14.63.1 → 14.64.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -13
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
# Foundation
|
|
1
|
+
# Foundation Header
|
|
2
2
|
|
|
3
3
|
[API](./docs/api/index.md)
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
The Header micro front-end is a semi-batteries-included component. It consists of a navigation bar and flyout menu, with routing and account
|
|
7
|
+
The Header micro front-end is a semi-batteries-included component. It consists of a navigation bar and flyout menu, with routing and account-logout capabilities.
|
|
8
8
|
|
|
9
9
|
You can customise:
|
|
10
10
|
|
|
11
11
|
- the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default)
|
|
12
12
|
- navigation links at the left-hand side of the navigation bar
|
|
13
13
|
- the control buttons on the right-hand side of the navigation bar; these can be shown or hidden, and their behaviour controlled via event listeners
|
|
14
|
-
-
|
|
14
|
+
- the contents of the flyout menu
|
|
15
15
|
|
|
16
16
|
Here is an example of the navigation bar with three navigation items, and all three control buttons shown.
|
|
17
17
|
|
|
@@ -27,6 +27,7 @@ In this next example, we have put a set of example options set in the flyout men
|
|
|
27
27
|
### Seed apps
|
|
28
28
|
|
|
29
29
|
A lot of the Genesis seed apps come with the Header set up by default. To verify, you can do a text search in the client code for the `<foundation-header>` tag.
|
|
30
|
+
|
|
30
31
|
In this case, you only need to do the customisations described in [customising the header](#customising-the-header).
|
|
31
32
|
|
|
32
33
|
:::tip
|
|
@@ -37,7 +38,7 @@ The `allRoutes` array, which you need to change to set the navigation buttons on
|
|
|
37
38
|
|
|
38
39
|
To enable this micro front-end in your application, follow the steps below.
|
|
39
40
|
|
|
40
|
-
|
|
41
|
+
1. Add `@genesislcap/foundation-header` as a dependency in your **package.json** file. Whenever you change the dependencies of your project, ensure you run the bootstrap command again. There is more information in the [package.json basics](https://learn.genesis.global/secure/web/basics/package-json-basics/) page.
|
|
41
42
|
|
|
42
43
|
```javascript
|
|
43
44
|
{
|
|
@@ -55,7 +56,8 @@ This page assumes you're already using the Login and Routing systems that are pa
|
|
|
55
56
|
It is possible for you to set up routing manually, but that won't be covered in this tutorial.
|
|
56
57
|
:::
|
|
57
58
|
|
|
58
|
-
|
|
59
|
+
2. In the top-level class of your application, import the Navigation class and inject it as a dependency.
|
|
60
|
+
3.
|
|
59
61
|
```javascript {1,6}
|
|
60
62
|
import { Navigation } from '@genesislcap/foundation-header';
|
|
61
63
|
|
|
@@ -73,7 +75,7 @@ export class MainApplication extends FASTElement {
|
|
|
73
75
|
If you haven't used the `inject` annotation in your application yet, you'll need to get it from the `@microsoft/fast-foundation` package.
|
|
74
76
|
:::
|
|
75
77
|
|
|
76
|
-
|
|
78
|
+
3. Set a reference to the `navigation` object on the FAST router when you instantiate it; this enables you to set up navigation functionality from the navigation bar in the [navigation items step](#navigation-items).
|
|
77
79
|
```javascript
|
|
78
80
|
// fast-router will likely have other attributes such as :config too
|
|
79
81
|
const MainTemplate: ViewTemplate<MainApplication> = html`
|
|
@@ -81,7 +83,8 @@ const MainTemplate: ViewTemplate<MainApplication> = html`
|
|
|
81
83
|
`;
|
|
82
84
|
```
|
|
83
85
|
|
|
84
|
-
|
|
86
|
+
4. Add the `foundation-header` tag as part of the html that you set as the markup for the `defaultLayout` in your router configuration.
|
|
87
|
+
|
|
85
88
|
```javascript {3}
|
|
86
89
|
export const defaultLayout = new FASTElementLayout(html`
|
|
87
90
|
<div class="container">
|
|
@@ -111,11 +114,11 @@ By default, the navigation bar and flyout menu show the Genesis logo. You can ov
|
|
|
111
114
|
```html
|
|
112
115
|
<foundation-header logoSrc="https://icotar.com/avatar/genesis"></foundation-header>
|
|
113
116
|
```
|
|
114
|
-
The `logoSrc` defines the image that you want to display. Adding this attribute
|
|
117
|
+
The `logoSrc` defines the image that you want to display. Adding this attribute updates the logo on both the flyout and navigation bar. If you want to keep the Genesis logo, just omit this attribute.
|
|
115
118
|
|
|
116
119
|
### Navigation items
|
|
117
120
|
|
|
118
|
-
You can add navigation items
|
|
121
|
+
You can add navigation items to the left-hand side of the navigation bar. For each element, you can set `slot="routes"` attribute, so that navigation is controlled via a `@click` event. The following is a really basic example for adding a 'Home' button:
|
|
119
122
|
|
|
120
123
|
```javascript
|
|
121
124
|
html`
|
|
@@ -131,7 +134,8 @@ The `navigation` object referenced via the `parent` object is why the `navigatio
|
|
|
131
134
|
|
|
132
135
|
Moving on from this basic example, a dynamic set of routes can be configured, using the `repeat` directive from FAST.
|
|
133
136
|
|
|
134
|
-
|
|
137
|
+
1. Add the routes configuration into an array in the router configuration class.
|
|
138
|
+
|
|
135
139
|
```javascript
|
|
136
140
|
export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
|
|
137
141
|
|
|
@@ -146,7 +150,7 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
|
|
|
146
150
|
}
|
|
147
151
|
```
|
|
148
152
|
|
|
149
|
-
|
|
153
|
+
2. When setting the navigation items, use the `repeat` directive to iterate over the defined routes and create a navigation item for each one.
|
|
150
154
|
|
|
151
155
|
The following example creates a button with an associated logo for each of the three defined routes:
|
|
152
156
|
|
|
@@ -173,7 +177,7 @@ html`
|
|
|
173
177
|
|
|
174
178
|
### Control buttons
|
|
175
179
|
|
|
176
|
-
There are three control buttons that can be shown or hidden on the right-hand side of the navigation bar (these are hidden by default). Each one of them is a boolean attribute that can be added where the `<foundation-header>` tag is defined.
|
|
180
|
+
There are three control buttons that can be shown or hidden on the right-hand side of the navigation bar (these are hidden by default). Each one of them is a boolean attribute that can be added where the `<foundation-header>` tag is defined.
|
|
177
181
|
|
|
178
182
|
| Logo | Toggle Attribute | Dispatched Event |
|
|
179
183
|
|---------------|------------------------------|---------------------------|
|
|
@@ -243,7 +247,7 @@ To set the content of the flyout menu, add the content in the html within an ele
|
|
|
243
247
|
|
|
244
248
|
## License
|
|
245
249
|
|
|
246
|
-
Note: this project provides front
|
|
250
|
+
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
|
|
247
251
|
|
|
248
252
|
### Licensed components
|
|
249
253
|
Genesis low-code platform
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-header",
|
|
3
3
|
"description": "Genesis Foundation Header",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.64.0",
|
|
5
5
|
"license": "SEE LICENSE IN license.txt",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/foundation-header.d.ts",
|
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
"test:debug": "genx test --debug"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@genesislcap/foundation-testing": "14.
|
|
54
|
-
"@genesislcap/genx": "14.
|
|
53
|
+
"@genesislcap/foundation-testing": "14.64.0",
|
|
54
|
+
"@genesislcap/genx": "14.64.0",
|
|
55
55
|
"rimraf": "^3.0.2"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@genesislcap/foundation-comms": "14.
|
|
59
|
-
"@genesislcap/foundation-events": "14.
|
|
60
|
-
"@genesislcap/foundation-utils": "14.
|
|
61
|
-
"@genesislcap/foundation-zero": "14.
|
|
58
|
+
"@genesislcap/foundation-comms": "14.64.0",
|
|
59
|
+
"@genesislcap/foundation-events": "14.64.0",
|
|
60
|
+
"@genesislcap/foundation-utils": "14.64.0",
|
|
61
|
+
"@genesislcap/foundation-zero": "14.64.0",
|
|
62
62
|
"@microsoft/fast-colors": "^5.1.4",
|
|
63
63
|
"@microsoft/fast-components": "^2.21.3",
|
|
64
64
|
"@microsoft/fast-element": "^1.7.0",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
76
|
"customElements": "dist/custom-elements.json",
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "b9342cf385809ba4b2ad9bc592ae9dffe9360ce4"
|
|
78
78
|
}
|