@phila/phila-ui-app-footer 0.0.21 → 0.0.22

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.
Files changed (2) hide show
  1. package/README.md +22 -41
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,49 +1,30 @@
1
- ## Code Samples
2
- ### Props vs Slots Links
3
- The footer links can be added via props using the [Navigation Links](/components/NavLink) format.
4
- ```html
5
- <app-footer
6
- :links="myFooterLinks"
7
- />
8
- ```
1
+ ## Usage
9
2
 
10
- Or the links can be added using the default slot. The default slot accepts an unordered list of links.
11
- ```html
12
- <app-footer>
13
- <ul>
14
- <li>
15
- <a href="/about">About</a>
16
- </li>
17
- <li>
18
- <a href="/terms-and-conditions">Terms & Conditions</a>
19
- </li>
20
- </ul>
21
- </app-footer>
22
- ```
3
+ #### Import single component...
23
4
 
24
- ### Sticky Footer
25
- The footer can be fixed to the bottom of the page, so it's always visible.
26
- ```html
27
- <app-footer
28
- :is-sticky="true"
29
- />
30
- ```
5
+ ```js
6
+ import { AppFooter } from '@phila/phila-ui';
31
7
 
32
- ### Mobile Display
33
- By default the footer is hidden on mobile devices. If the links in the footer are important, they should be added to the [Mobile Navigation](/components/MobileNav).
8
+ //register it locally...
9
+ components: {
10
+ AppFooter,
11
+ }
34
12
 
35
- If the footer must be displayed on mobile, set ``is-hidden-mobile`` to ``false``.
36
- ```html
37
- <app-footer
38
- :is-hidden-mobile="false"
39
- />
13
+ //... or register it globally
14
+ Vue.component('app-footer', AppFooter);
40
15
  ```
41
16
 
42
- ## Live Examples
43
- <alert type="warning">Open the iframe below in a new window as the footer is by default hidden on smaller screens</alert>
17
+ #### or import the whole library,
18
+
19
+ ```js
20
+ import * as PhilaUI from "@phila/phila-ui";
44
21
 
45
- ### Non-sticky, using the slot
46
- <example name="AppFooter1" height="300" :options="{ horizontal: true}"></example>
22
+ //register it globally
23
+ Vue.use(PhilaUI);
24
+ ```
47
25
 
48
- ### Sticky, using the link prop
49
- <example name="AppFooter2" height="300" :options="{ horizontal: true}"></example>
26
+ #### then use it in the vue template
27
+
28
+ ```html
29
+ <app-footer></app-footer>
30
+ ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-app-footer",
3
3
  "private": false,
4
- "version": "0.0.21",
4
+ "version": "0.0.22",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@phila/phila-ui-core": "^1.0.24",
29
- "@phila/phila-ui-nav-link": "^0.0.12",
29
+ "@phila/phila-ui-nav-link": "^0.0.13",
30
30
  "bulma": "^0.9.4",
31
31
  "vue": "^3.3.8"
32
32
  },
@@ -44,5 +44,5 @@
44
44
  "registry": "https://registry.npmjs.com/",
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "09f2b67c1d3db773c813231e21b62b37e34aefbd"
47
+ "gitHead": "f00518592815b1bf558d88f77fc4b6b3a30296e5"
48
48
  }