@yuuvis/client-shell 2.0.14 → 2.1.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 +33 -1
- package/fesm2022/yuuvis-client-shell.mjs +297 -193
- package/fesm2022/yuuvis-client-shell.mjs.map +1 -1
- package/index.d.ts +6 -4
- package/lib/client-shell.component.d.ts +3 -0
- package/lib/client-shell.module.d.ts +7 -0
- package/lib/components/app-header/app-header-slot.directive.d.ts +10 -0
- package/lib/components/app-header/app-header.component.d.ts +12 -0
- package/lib/components/shell-logo/shell-logo.component.d.ts +5 -0
- package/lib/components/sidebar-nav/sidebar-nav.component.d.ts +1 -1
- package/lib/services/client-shell/client-shell.service.d.ts +15 -0
- package/package.json +4 -4
- package/lib/components/app-logo/app-logo.component.d.ts +0 -7
- /package/lib/services/{shell-widgets.service.d.ts → shell-widgets/shell-widgets.service.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -91,4 +91,36 @@ const flavor = {
|
|
|
91
91
|
mimeTypes: ['*/*']
|
|
92
92
|
}
|
|
93
93
|
};
|
|
94
|
-
```
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## App header
|
|
97
|
+
|
|
98
|
+
The shell provides the ability to use the integrated app header. This header provides a best practice approach for apps to apply a unified header pattern across apps that is aimed towards supporting usability within a shell client.
|
|
99
|
+
|
|
100
|
+
Activating the app header will add a header component to the shell offering various slots to be populated with semantic components. This will guarranty a unified look across all applications.
|
|
101
|
+
|
|
102
|
+
To enable app header set `appHeader` property of your apps `yuv-manifest.json` to `true`:
|
|
103
|
+
|
|
104
|
+
```json
|
|
105
|
+
{
|
|
106
|
+
"id": "io.yuuvis.app.drive",
|
|
107
|
+
"title": "yM Drive",
|
|
108
|
+
"ui": {
|
|
109
|
+
"path": "drive",
|
|
110
|
+
"iconName": "cloud_circle",
|
|
111
|
+
"routes": "YuuvisDriveRoutes"
|
|
112
|
+
},
|
|
113
|
+
"extension": "AppDriveExtension",
|
|
114
|
+
"appHeader": true
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### provide the slots
|
|
119
|
+
Anywhere within your app you could set components to be shown in one of the app headers slots.
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<!-- show ymd-drive-search in app headers search slot -->
|
|
123
|
+
<ng-template yuvAppHeaderSlot="search"><ymd-drive-search></ymd-drive-search></ng-template>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Currently there are 3 slots available: `actions`, `search`, `notifications`
|