0.17.3-pr.269.1c619b7.0 • Published 3 years ago

@kong-ui-public/app-layout v0.17.3-pr.269.1c619b7.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
3 years ago

@kong-ui-public/app-layout

A set of Kong UI application layout components that provides a responsive navbar, sidebar, and main content area.

Features

Requirements

  • vue and vue-router must be initialized in the host application
  • @kong/kongponents must be available as a dependency 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 of height: 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 the KonnectAppShell.vue component.
    • If using the KonnectAppShell.vue component, the AppLayout.vue component must be the only component placed inside the KonnectAppShell.vue's default slot.
  • This package must not list any other package in this monorepository as a dependency or devDependency. 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
  • AccountDropdown.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.

VariableDescriptionDefault
--kong-ui-app-layout-main-box-shadowThe box-shadow behind the .kong-ui-app-layout-main main container-30px 174px 250px #0023DB
--kong-ui-app-layout-content-paddingThe padding of the .kong-ui-app-layout-content main content container16px below 1024px, 32px at 1024px and above

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

4.3.2

12 months ago

4.3.1

1 year ago

4.3.4

12 months ago

4.3.3

12 months ago

4.3.0

1 year ago

4.3.9

11 months ago

4.3.6

12 months ago

4.3.5

12 months ago

4.3.8

11 months ago

4.3.7

12 months ago

4.2.60

1 year ago

4.2.61

1 year ago

4.2.62

1 year ago

4.2.63

1 year ago

4.2.56

1 year ago

4.2.57

1 year ago

4.2.58

1 year ago

4.2.59

1 year ago

4.4.1

8 months ago

4.4.0

9 months ago

4.4.3

8 months ago

4.4.2

8 months ago

4.4.5

8 months ago

4.4.4

8 months ago

4.4.7

8 months ago

4.4.6

8 months ago

4.3.13

10 months ago

4.3.12

10 months ago

4.3.11

11 months ago

4.3.10

11 months ago

4.3.17

9 months ago

4.3.16

10 months ago

4.3.15

10 months ago

4.3.14

10 months ago

4.2.55

1 year ago

4.2.53

1 year ago

4.2.54

1 year ago

4.2.51

1 year ago

4.2.52

1 year ago

4.2.48

1 year ago

4.2.49

1 year ago

4.2.50

1 year ago

4.2.42

1 year ago

4.2.43

1 year ago

4.2.44

1 year ago

4.2.45

1 year ago

4.2.40

1 year ago

4.2.41

1 year ago

4.2.46

1 year ago

4.2.47

1 year ago

4.2.39

1 year ago

4.2.36

1 year ago

4.2.37

1 year ago

4.2.38

1 year ago

4.2.35

1 year ago

4.2.32

1 year ago

4.2.33

1 year ago

4.2.34

1 year ago

4.2.31

1 year ago

4.2.30

1 year ago

4.2.29

1 year ago

4.2.28

1 year ago

4.2.27

1 year ago

4.2.25

1 year ago

4.2.26

1 year ago

4.1.9

2 years ago

4.2.20

1 year ago

4.2.21

1 year ago

4.2.22

1 year ago

4.2.23

1 year ago

4.2.24

1 year ago

4.2.10

2 years ago

4.2.11

2 years ago

4.2.12

2 years ago

4.2.17

1 year ago

4.2.18

1 year ago

4.2.19

1 year ago

4.2.13

2 years ago

4.2.14

1 year ago

4.2.15

1 year ago

4.2.16

1 year ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.5

2 years ago

4.2.4

2 years ago

4.2.1

2 years ago

4.2.0

2 years ago

4.2.7

2 years ago

4.2.6

2 years ago

4.2.9

2 years ago

4.2.8

2 years ago

4.1.10

2 years ago

4.1.11

2 years ago

4.1.12

2 years ago

4.1.8

2 years ago

4.1.7

2 years ago

4.1.6

2 years ago

4.1.4

2 years ago

4.1.5

2 years ago

4.1.3

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

4.1.0

2 years ago

4.0.25

2 years ago

4.0.24

2 years ago

4.0.23

2 years ago

4.0.22

2 years ago

4.0.21

2 years ago

4.0.20

2 years ago

4.0.19

2 years ago

4.0.18

2 years ago

4.0.17

2 years ago

4.0.16

2 years ago

4.0.15

2 years ago

4.0.14

2 years ago

4.0.13

2 years ago

4.0.12

2 years ago

4.0.11

2 years ago

4.0.10

2 years ago

4.0.9

2 years ago

4.0.8

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.5

2 years ago

3.0.0

2 years ago

2.2.25

2 years ago

2.2.24

2 years ago

2.2.23

2 years ago

2.2.22

2 years ago

2.2.21

2 years ago

2.2.20

2 years ago

2.2.17

2 years ago

2.2.18

2 years ago

2.2.19

2 years ago

2.2.16

2 years ago

2.2.15

2 years ago

2.2.14

2 years ago

2.2.13

2 years ago

2.2.12

2 years ago

2.2.11

2 years ago

2.2.10

2 years ago

2.2.9

2 years ago

2.2.8

2 years ago

2.2.7

2 years ago

2.2.5

2 years ago

2.2.6

2 years ago

2.2.4

2 years ago

2.2.3

2 years ago

2.2.2

2 years ago

0.20.1

2 years ago

0.20.0

2 years ago

0.21.0

2 years ago

0.22.7

2 years ago

0.22.6

2 years ago

0.22.5

2 years ago

0.22.4

2 years ago

0.22.3

2 years ago

0.22.2

2 years ago

0.22.1

2 years ago

0.22.0

2 years ago

0.22.9

2 years ago

0.22.8

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

0.20.2

2 years ago

0.24.10

2 years ago

0.23.6

2 years ago

0.23.5

2 years ago

0.23.4

2 years ago

0.23.3

2 years ago

0.23.2

2 years ago

0.23.1

2 years ago

0.23.0

2 years ago

0.23.7

2 years ago

0.24.5

2 years ago

0.24.4

2 years ago

0.24.3

2 years ago

0.24.2

2 years ago

0.24.1

2 years ago

0.24.0

2 years ago

0.24.9

2 years ago

0.24.8

2 years ago

0.24.7

2 years ago

0.24.6

2 years ago

0.22.23

2 years ago

0.22.22

2 years ago

0.22.21

2 years ago

0.22.20

2 years ago

0.22.19

2 years ago

0.22.16

2 years ago

0.22.15

2 years ago

0.22.18

2 years ago

0.22.17

2 years ago

0.22.12

2 years ago

0.22.11

2 years ago

0.22.14

2 years ago

0.22.13

2 years ago

0.22.10

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

0.19.18

2 years ago

0.19.19

2 years ago

0.19.16

3 years ago

0.19.17

3 years ago

0.19.13

3 years ago

0.19.14

3 years ago

0.19.15

3 years ago

0.17.2

3 years ago

0.17.0

3 years ago

0.17.1

3 years ago

0.18.9

3 years ago

0.18.1

3 years ago

0.18.2

3 years ago

0.18.3

3 years ago

0.18.4

3 years ago

0.18.5

3 years ago

0.18.6

3 years ago

0.18.7

3 years ago

0.18.8

3 years ago

0.18.0

3 years ago

0.16.3

3 years ago

0.16.4

3 years ago

0.16.1

3 years ago

0.16.2

3 years ago

0.18.11

3 years ago

0.18.10

3 years ago

0.18.13

3 years ago

0.18.12

3 years ago

0.18.14

3 years ago

0.19.8

3 years ago

0.19.9

3 years ago

0.19.0

3 years ago

0.19.1

3 years ago

0.19.2

3 years ago

0.19.3

3 years ago

0.19.4

3 years ago

0.19.5

3 years ago

0.19.6

3 years ago

0.19.7

3 years ago

0.19.11

3 years ago

0.19.12

3 years ago

0.19.10

3 years ago

0.15.20

3 years ago

0.15.4

3 years ago

0.15.5

3 years ago

0.15.6

3 years ago

0.15.7

3 years ago

0.15.8

3 years ago

0.15.9

3 years ago

0.15.0

3 years ago

0.15.1

3 years ago

0.15.2

3 years ago

0.15.3

3 years ago

0.16.0

3 years ago

0.13.9

3 years ago

0.14.0

3 years ago

0.14.1

3 years ago

0.14.2

3 years ago

0.14.3

3 years ago

0.15.10

3 years ago

0.15.13

3 years ago

0.15.14

3 years ago

0.15.11

3 years ago

0.15.12

3 years ago

0.15.17

3 years ago

0.15.18

3 years ago

0.15.15

3 years ago

0.15.16

3 years ago

0.15.19

3 years ago

0.13.12

3 years ago

0.13.11

3 years ago

0.13.10

3 years ago

0.13.16

3 years ago

0.13.15

3 years ago

0.13.14

3 years ago

0.13.13

3 years ago

0.13.19

3 years ago

0.13.18

3 years ago

0.13.17

3 years ago

0.13.23

3 years ago

0.13.22

3 years ago

0.13.21

3 years ago

0.13.20

3 years ago

0.13.27

3 years ago

0.13.26

3 years ago

0.13.25

3 years ago

0.13.24

3 years ago

0.13.29

3 years ago

0.13.28

3 years ago

0.13.30

3 years ago

0.13.6

3 years ago

0.13.7

3 years ago

0.13.8

3 years ago

0.13.0

3 years ago

0.13.1

3 years ago

0.13.2

3 years ago

0.13.3

3 years ago

0.13.4

3 years ago

0.13.5

3 years ago

0.12.10

3 years ago

0.12.11

3 years ago

0.12.16

3 years ago

0.12.17

3 years ago

0.12.18

3 years ago

0.12.19

3 years ago

0.12.12

3 years ago

0.12.13

3 years ago

0.12.14

3 years ago

0.12.15

3 years ago

0.12.20

3 years ago

0.12.7

3 years ago

0.12.8

3 years ago

0.12.9

3 years ago

0.12.0

3 years ago

0.12.1

3 years ago

0.12.2

3 years ago

0.12.3

3 years ago

0.12.4

3 years ago

0.12.5

3 years ago

0.12.6

3 years ago

0.11.10

3 years ago

0.11.11

3 years ago

0.11.12

3 years ago

0.11.9

3 years ago

0.11.8

3 years ago

0.11.7

3 years ago

0.11.6

3 years ago

0.11.5

3 years ago

0.11.4

3 years ago

0.11.3

3 years ago

0.11.2

3 years ago

0.11.1

3 years ago

0.11.0

3 years ago