@kong-ui-public/app-layout v4.1.2
@kong-ui-public/app-layout
A Kong UI application layout component that provides a responsive navbar, sidebar, and main content area.
- Features
- Requirements
- Included components
- Install
- Usage
- CSS Variables
- TypeScript interfaces
- Individual component documentation
Features
- Responsive navbar component (see the navbar docs for more info)
- Responsive sidebar component (see the sidebar docs for more info)
- Main content slot with pre-configured styles, etc.
- Ability to takeover the default slot content for displaying global error states or other content
Requirements
vue
andvue-router
must be initialized in the host application@kong/kongponents
must be available as adependency
in the host application, along with the package's style imports. See here for instructions on installing Kongponents.- The Vue app container element (the element the host Vue app is mounted in) must have an id of
#app
(alternatively, you must manually add a CSS rule ofheight: 100%
to your element) - The
AppLayout.vue
component must be the root-level element within your Vue app's<template>
unless you are also utilizing theKonnectAppShell.vue
component.- If using the
KonnectAppShell.vue
component, theAppLayout.vue
component must be the only component placed inside theKonnectAppShell.vue
's default slot.
- If using the
- This package must not list any other package in this monorepository as a
dependency
ordevDependency
. This package will likely be published in the future for consumption by some of Kong's open-source applications.
Included components
AppLayout.vue
AppNavbar.vue
NavbarDropdownMenu.vue
AppSidebar.vue
SidebarToggle.vue
AppError.vue
Reference the individual component docs for more info.
Install
Install the component in your host application
yarn add @kong-ui-public/app-layout
Vue Plugin
Initialize the component as a plugin within your application's entry file (e.g. main.ts
) to make the component globally available.
import { createApp } from 'vue'
import App from './App.vue'
import AppLayout from '@kong-ui-public/app-layout'
const app = createApp(App)
app.use(AppLayout)
app.mount('#app')
In-Component registration
Alternatively, import the component within your application's root component.
import { AppLayout } from '@kong-ui-public/app-layout'
Usage
Note: TODO - for now, you can reference the sandbox app
pnpm --filter "@kong-ui-public/app-layout" run dev
Props
Note: TODO
Slots
Note: TODO
Teleport Containers
Note: TODO
Usage Example
Note: TODO
CSS Variables
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.
Variable | Description | Default |
---|---|---|
--kong-ui-app-layout-content-padding | The padding of the .kong-ui-app-layout-content main content container | 16px |
CSS variable example
.your-app-container-class {
--kong-ui-app-sidebar-mobile-icon-color: #008080;
}
TypeScript interfaces
TypeScript interfaces are available here and can be directly imported into your host application.
Individual component documentation
2 days ago
3 days ago
2 days ago
2 days ago
6 days ago
9 days ago
13 days ago
12 days ago
13 days ago
12 days ago
13 days ago
14 days ago
14 days ago
14 days ago
16 days ago
16 days ago
16 days ago
20 days ago
20 days ago
20 days ago
21 days ago
21 days ago
22 days ago
22 days ago
22 days ago
23 days ago
23 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
10 months ago
10 months ago
6 months ago
5 months ago
8 months ago
7 months ago
9 months ago
5 months ago
5 months ago
10 months ago
7 months ago
9 months ago
8 months ago
10 months ago
9 months ago
6 months ago
7 months ago
5 months ago
5 months ago
8 months ago
7 months ago
9 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
6 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
6 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
5 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
7 months ago
10 months ago
10 months ago
10 months ago
7 months ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
8 months ago
5 months ago
10 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
6 months ago
6 months ago
10 months ago
6 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
7 months ago
7 months ago
7 months ago
5 months ago
7 months ago
7 months ago
8 months ago
8 months ago
10 months ago
10 months ago
7 months ago
5 months ago
5 months ago
6 months ago
10 months ago
10 months ago
10 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
7 months ago
10 months ago
7 months ago
5 months ago
7 months ago
10 months ago
10 months ago
7 months ago
6 months ago
10 months ago
5 months ago
7 months ago
7 months ago
5 months ago
7 months ago
5 months ago
5 months ago
9 months ago
6 months ago
9 months ago
7 months ago
8 months ago
8 months ago
8 months ago
6 months ago
7 months ago
10 months ago
7 months ago
5 months ago
5 months ago
10 months ago
9 months ago
6 months ago
10 months ago
7 months ago
6 months ago
10 months ago
5 months ago
6 months ago
6 months ago
5 months ago
5 months ago
7 months ago
5 months ago
7 months ago
7 months ago
8 months ago
9 months ago
7 months ago
7 months ago
10 months ago
7 months ago
6 months ago
6 months ago
7 months ago
9 months ago
8 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
6 months ago
10 months ago
10 months ago
5 months ago
10 months ago
6 months ago
7 months ago
7 months ago
10 months ago
7 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
11 months ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
1 year ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago