@phila/phila-ui-app-header 0.0.28 → 0.0.29
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 +15 -109
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,121 +1,27 @@
|
|
|
1
|
-
##
|
|
2
|
-
### Basic
|
|
3
|
-
The most basic header with an application title and sub-title.
|
|
4
|
-
```html
|
|
5
|
-
<app-header
|
|
6
|
-
app-title="My Application"
|
|
7
|
-
app-subtitle="Description about this application"
|
|
8
|
-
/>
|
|
9
|
-
```
|
|
1
|
+
## Usage
|
|
10
2
|
|
|
11
|
-
|
|
12
|
-
Adds an application specific logo and link. Often used to display a department's logo and link back to the department's website.
|
|
3
|
+
#### Import single component...
|
|
13
4
|
|
|
14
|
-
```html
|
|
15
|
-
<app-header
|
|
16
|
-
:branding-image="{ src: 'my-logo-image.jpg'}"
|
|
17
|
-
:branding-link="{ href: 'http://www.example.com '}"
|
|
18
|
-
/>
|
|
19
|
-
```
|
|
20
|
-
The ``branding-image`` accepts an object of ``<img>`` attributes.
|
|
21
5
|
```js
|
|
22
|
-
{
|
|
23
|
-
src: "my-logo-image.png",
|
|
24
|
-
alt: "department logo"
|
|
25
|
-
width: "200px"
|
|
26
|
-
}
|
|
27
|
-
```
|
|
6
|
+
import { AppHeader } from '@phila/phila-ui';
|
|
28
7
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```js
|
|
33
|
-
{
|
|
34
|
-
href: "http://phila.gov/my-department",
|
|
35
|
-
target: "_blank"
|
|
8
|
+
//register it locally...
|
|
9
|
+
components: {
|
|
10
|
+
AppHeader,
|
|
36
11
|
}
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
<alert type="warning">If the ``branding-image`` is set, then a ``branding-link`` is also used. By default the ``branding-link`` is '/'</alert>
|
|
40
12
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
```html
|
|
44
|
-
<app-header
|
|
45
|
-
:is-sticky="false"
|
|
46
|
-
:is-fluid="false"
|
|
47
|
-
/>
|
|
13
|
+
//... or register it globally
|
|
14
|
+
Vue.component('app-header', AppHeader);
|
|
48
15
|
```
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
```html
|
|
53
|
-
<app-header>
|
|
54
|
-
<mobile-nav
|
|
55
|
-
slot="mobile-nav"
|
|
56
|
-
:links="myLinks"
|
|
57
|
-
/>
|
|
58
|
-
</app-header>
|
|
59
|
-
```
|
|
60
|
-
<alert>See the [Mobile Navigation](/components/MobileNav) component for more information.</alert>
|
|
61
|
-
|
|
62
|
-
### Tabbed Navigation ``<slot>``
|
|
63
|
-
```html
|
|
64
|
-
<app-header>
|
|
65
|
-
<tabs-nav
|
|
66
|
-
slot="tabs-nav"
|
|
67
|
-
:links="myLinks"
|
|
68
|
-
/>
|
|
69
|
-
</app-header>
|
|
70
|
-
```
|
|
71
|
-
<alert>See the [Tabbed Navigation](/components/TabsNav) component for more information.</alert>
|
|
16
|
+
#### or import the whole library,
|
|
17
|
+
```js
|
|
18
|
+
import * as PhilaUI from "@phila/phila-ui";
|
|
72
19
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<app-header>
|
|
76
|
-
<dropdown-nav
|
|
77
|
-
slot="dropdown-nav"
|
|
78
|
-
:links="myLinks"
|
|
79
|
-
/>
|
|
80
|
-
</app-header>
|
|
20
|
+
//register it globally
|
|
21
|
+
Vue.use(PhilaUI);
|
|
81
22
|
```
|
|
82
|
-
<alert>The positioning of the dropdown navigation depends on the presence of the tabbed navigation. If a tabbed navigation is present, then the dropdown is aligned with the tabs. If the tabs are not present, then the dropdown is aligned with the title.</alert>
|
|
83
|
-
<alert>See the [Dropdown Navigation](/components/DropdownNav) component for more information.</alert>
|
|
84
23
|
|
|
85
|
-
|
|
24
|
+
#### then use it in the vue template
|
|
86
25
|
```html
|
|
87
|
-
<app-header>
|
|
88
|
-
<lang-selector
|
|
89
|
-
slot="lang-selector-nav"
|
|
90
|
-
:languages="myLanguages"
|
|
91
|
-
/>
|
|
92
|
-
</app-header>
|
|
26
|
+
<app-header></app-header>
|
|
93
27
|
```
|
|
94
|
-
<alert>The positioning of the language selector depends on the presence of the tabbed navigation. If a tabbed navigation is present, then the language selector dropdown is aligned with the tabs. If the tabs are not present, then the dropdown is aligned with the title.</alert>
|
|
95
|
-
<alert>See the [Language Selector](/components/LangSelector) component for more information.</alert>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
## Live Examples
|
|
99
|
-
|
|
100
|
-
<alert type="warning"> The application header is responsive, so its size will render smaller in the preview windows below, and some elements may be hidden. Click on the new window button/icon to view it on a larger window.</alert>
|
|
101
|
-
|
|
102
|
-
### Basic application header
|
|
103
|
-
<example name="AppHeader1" height="300" :options="{ horizontal: true}"></example>
|
|
104
|
-
|
|
105
|
-
### Header with branding image
|
|
106
|
-
<example name="AppHeader2" height="300" :options="{ horizontal: true}"></example>
|
|
107
|
-
|
|
108
|
-
### Header with tabbed navigation
|
|
109
|
-
<example name="AppHeader3" height="300" :options="{ horizontal: true}"></example>
|
|
110
|
-
|
|
111
|
-
### Header with dropdown navigation
|
|
112
|
-
<example name="AppHeader4" height="300" :options="{ horizontal: true}"></example>
|
|
113
|
-
|
|
114
|
-
### Header with language selector
|
|
115
|
-
<example name="AppHeader5" height="300" :options="{ horizontal: true}"></example>
|
|
116
|
-
|
|
117
|
-
### Header with mobile navigation
|
|
118
|
-
<example name="AppHeader6" height="300" :options="{ horizontal: true}"></example>
|
|
119
|
-
|
|
120
|
-
### Header with all options and slots
|
|
121
|
-
<example name="AppHeader" height="300" :options="{ horizontal: true}"></example>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-app-header",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.29",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"registry": "https://registry.npmjs.com/",
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "f00518592815b1bf558d88f77fc4b6b3a30296e5"
|
|
47
47
|
}
|