@kong-ui-public/app-layout 0.11.4 → 0.11.6
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 +18 -0
- package/dist/app-layout.es.js +3 -3
- package/dist/app-layout.es.js.map +1 -1
- package/dist/app-layout.umd.js +2 -2
- package/dist/app-layout.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -13,6 +13,8 @@ A Kong UI application layout component that provides a responsive navbar, sideba
|
|
|
13
13
|
- [Slots](#slots)
|
|
14
14
|
- [Teleport Containers](#teleport-containers)
|
|
15
15
|
- [Usage Example](#usage-example)
|
|
16
|
+
- [CSS Variables](#css-variables)
|
|
17
|
+
- [CSS variable example](#css-variable-example)
|
|
16
18
|
- [TypeScript interfaces](#typescript-interfaces)
|
|
17
19
|
- [Individual component documentation](#individual-component-documentation)
|
|
18
20
|
|
|
@@ -94,6 +96,22 @@ import { AppLayout } from '@kong-ui-public/app-layout'
|
|
|
94
96
|
|
|
95
97
|
> **Note**: TODO
|
|
96
98
|
|
|
99
|
+
## CSS Variables
|
|
100
|
+
|
|
101
|
+
You can customize some of the `AppLayout.vue` CSS by adding CSS variables to your app. In most use-cases, this shouldn't be necessary.
|
|
102
|
+
|
|
103
|
+
Variable | Description | Default
|
|
104
|
+
---------|----------|---------
|
|
105
|
+
`--kong-ui-app-layout-content-padding` | The padding of the `.kong-ui-app-layout-content` main content container | `16px`
|
|
106
|
+
|
|
107
|
+
### CSS variable example
|
|
108
|
+
|
|
109
|
+
```scss
|
|
110
|
+
.your-app-container-class {
|
|
111
|
+
--kong-ui-app-sidebar-mobile-icon-color: #008080;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
97
115
|
## TypeScript interfaces
|
|
98
116
|
|
|
99
117
|
TypeScript interfaces [are available here](https://github.com/Kong/shared-ui-components/blob/main/packages/app-layout/src/types/) and can be directly imported into your host application.
|
package/dist/app-layout.es.js
CHANGED
|
@@ -1582,7 +1582,7 @@ const Kr = /* @__PURE__ */ q(Hr, [["__scopeId", "data-v-1c82e900"]]), nt = (n) =
|
|
|
1582
1582
|
}, Ur, 10, zr));
|
|
1583
1583
|
}
|
|
1584
1584
|
});
|
|
1585
|
-
const Yr = /* @__PURE__ */ q(qr, [["__scopeId", "data-v-e9d81dd5"]]), Xr = (n) => (tt("data-v-
|
|
1585
|
+
const Yr = /* @__PURE__ */ q(qr, [["__scopeId", "data-v-e9d81dd5"]]), Xr = (n) => (tt("data-v-67bfc889"), n = n(), at(), n), Jr = { id: "kong-ui-app-layout-notification" }, Qr = { class: "mobile-logo" }, ei = { class: "kong-ui-app-layout-main" }, ti = { class: "kong-ui-app-layout-content" }, ai = /* @__PURE__ */ Xr(() => /* @__PURE__ */ T("div", { id: "kong-ui-app-layout-teleport-default-slot" }, null, -1)), ni = /* @__PURE__ */ Y({
|
|
1586
1586
|
__name: "AppLayout",
|
|
1587
1587
|
props: {
|
|
1588
1588
|
hideDefaultSlot: {
|
|
@@ -1624,7 +1624,7 @@ const Yr = /* @__PURE__ */ q(qr, [["__scopeId", "data-v-e9d81dd5"]]), Xr = (n) =
|
|
|
1624
1624
|
setup(n, { emit: t }) {
|
|
1625
1625
|
const a = n;
|
|
1626
1626
|
Qe(($) => ({
|
|
1627
|
-
|
|
1627
|
+
edf7479a: h(P)
|
|
1628
1628
|
}));
|
|
1629
1629
|
const r = Lt(), c = Ye({
|
|
1630
1630
|
navbarMobileLogo: x(() => !!r["navbar-mobile-logo"]),
|
|
@@ -1741,7 +1741,7 @@ const Yr = /* @__PURE__ */ q(qr, [["__scopeId", "data-v-e9d81dd5"]]), Xr = (n) =
|
|
|
1741
1741
|
], 2));
|
|
1742
1742
|
}
|
|
1743
1743
|
});
|
|
1744
|
-
const ri = /* @__PURE__ */ q(ni, [["__scopeId", "data-v-
|
|
1744
|
+
const ri = /* @__PURE__ */ q(ni, [["__scopeId", "data-v-67bfc889"]]), ii = /* @__PURE__ */ Y({
|
|
1745
1745
|
__name: "NavbarDropdownMenu",
|
|
1746
1746
|
props: {
|
|
1747
1747
|
options: {
|