Layout

Page layout component.

Usage

Simple example:

<template>
  <div style="height: 400px">
    <VegaLayout
      header-first
      header-background="#646CFF23"
      aside-left-width="80px"
      aside-left-background="#8E96AA23"
    >
      <VegaLoremIpsum font-size="14px" padding="0 15px" />
    </VegaLayout>
  </div>
</template>

<script setup>
  import { VegaLayout } from 'vega-ui'
  import 'vega-ui/dist/style.css'
</script>

Code above will give you a following result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. Eget arcu dictum varius duis at consectetur lorem donec. Justo donec enim diam vulputate ut. Amet nisl purus in mollis nunc sed id semper risus. Amet nisl purus in mollis nunc sed. Ac tortor dignissim convallis aenean. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Tellus mauris a diam maecenas sed enim ut. Dictum at tempor commodo ullamcorper a. Etiam tempor orci eu lobortis elementum nibh tellus. Sed adipiscing diam donec adipiscing tristique risus nec. Lacus luctus accumsan tortor posuere. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Porta lorem mollis aliquam ut porttitor leo. In nibh mauris cursus mattis molestie. Odio euismod lacinia at quis risus sed vulputate odio ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Scelerisque in dictum non consectetur a erat. Id aliquet lectus proin nibh nisl condimentum. Aenean euismod elementum nisi quis eleifend quam. Tellus at urna condimentum mattis pellentesque id. Eget sit amet tellus cras adipiscing enim. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Vel pharetra vel turpis nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Amet justo donec enim diam vulputate. Congue nisi vitae suscipit tellus mauris a diam. Aenean pharetra magna ac placerat vestibulum. Eu volutpat odio facilisis mauris sit. Curabitur vitae nunc sed velit dignissim sodales. Feugiat in ante metus dictum at tempor. Imperdiet proin fermentum leo vel orci porta. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue mauris rhoncus aenean. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Nunc lobortis mattis aliquam faucibus purus in. Sagittis nisl rhoncus mattis rhoncus urna. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Risus ultricies tristique nulla aliquet enim tortor at auctor. Sit amet risus nullam eget. Nibh mauris cursus mattis molestie. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Purus non enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis. Ultrices sagittis orci a scelerisque purus semper eget duis. Ullamcorper a lacus vestibulum sed arcu non odio. Lobortis feugiat vivamus at augue eget arcu. Eget velit aliquet sagittis id. Eget magna fermentum iaculis eu non diam phasellus. In egestas erat imperdiet sed euismod. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Risus in hendrerit gravida rutrum quisque non tellus orci. Lobortis scelerisque fermentum dui faucibus in. Vitae auctor eu augue ut lectus. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Ac turpis egestas maecenas pharetra convallis. Malesuada proin libero nunc consequat interdum varius sit amet. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas sed. Eget arcu dictum varius duis at consectetur lorem donec. Enim sed faucibus turpis in eu. Aenean pharetra magna ac placerat. Arcu dictum varius duis at consectetur lorem donec massa sapien. Porttitor eget dolor morbi non arcu. Interdum velit euismod in pellentesque massa placerat duis ultricies. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Laoreet id donec ultrices tincidunt arcu non. Sed velit dignissim sodales ut eu sem integer vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Integer quis auctor elit sed vulputate mi sit amet. Dui ut ornare lectus sit amet est placerat in egestas. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vehicula ipsum a arcu cursus vitae. Pretium aenean pharetra magna ac placerat vestibulum lectus. Gravida cum sociis natoque penatibus et magnis.

INFO

To achieve the effect that only the part in the default slot is scrollable, you need to set a fixed height for the parent DOM element.
For example, if you want to create a full-page layout you can to set height: 100vh for the parent <div>.

Layouts can be nested:

<template>
  <div style="height: 400px">
    <VegaLayout
      header-first
      header-height="50px"
      header-background="#646CFF23"
      header-border="#8E96AA23"
      aside-left-width="80px"
      aside-left-background="#8E96AA23"
      aside-left-border="#8E96AA23"
    >
      <VegaLayout
        header-background="#646CFF23"
        header-height="50px"
        aside-right-width="80px"
        aside-right-background="#8E96AA23"
        aside-right-border="#8E96AA23"
      >
        <VegaLoremIpsum font-size="14px" padding="0 15px" />
      </VegaLayout>
    </VegaLayout>
  </div>
</template>

<script setup>
  import { VegaLayout } from 'vega-ui'
  import 'vega-ui/dist/style.css'
</script>

Example above will give you a following structure:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. Eget arcu dictum varius duis at consectetur lorem donec. Justo donec enim diam vulputate ut. Amet nisl purus in mollis nunc sed id semper risus. Amet nisl purus in mollis nunc sed. Ac tortor dignissim convallis aenean. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Tellus mauris a diam maecenas sed enim ut. Dictum at tempor commodo ullamcorper a. Etiam tempor orci eu lobortis elementum nibh tellus. Sed adipiscing diam donec adipiscing tristique risus nec. Lacus luctus accumsan tortor posuere. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Porta lorem mollis aliquam ut porttitor leo. In nibh mauris cursus mattis molestie. Odio euismod lacinia at quis risus sed vulputate odio ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Scelerisque in dictum non consectetur a erat. Id aliquet lectus proin nibh nisl condimentum. Aenean euismod elementum nisi quis eleifend quam. Tellus at urna condimentum mattis pellentesque id. Eget sit amet tellus cras adipiscing enim. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Vel pharetra vel turpis nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Amet justo donec enim diam vulputate. Congue nisi vitae suscipit tellus mauris a diam. Aenean pharetra magna ac placerat vestibulum. Eu volutpat odio facilisis mauris sit. Curabitur vitae nunc sed velit dignissim sodales. Feugiat in ante metus dictum at tempor. Imperdiet proin fermentum leo vel orci porta. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue mauris rhoncus aenean. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Nunc lobortis mattis aliquam faucibus purus in. Sagittis nisl rhoncus mattis rhoncus urna. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Risus ultricies tristique nulla aliquet enim tortor at auctor. Sit amet risus nullam eget. Nibh mauris cursus mattis molestie. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Purus non enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis. Ultrices sagittis orci a scelerisque purus semper eget duis. Ullamcorper a lacus vestibulum sed arcu non odio. Lobortis feugiat vivamus at augue eget arcu. Eget velit aliquet sagittis id. Eget magna fermentum iaculis eu non diam phasellus. In egestas erat imperdiet sed euismod. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Risus in hendrerit gravida rutrum quisque non tellus orci. Lobortis scelerisque fermentum dui faucibus in. Vitae auctor eu augue ut lectus. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Ac turpis egestas maecenas pharetra convallis. Malesuada proin libero nunc consequat interdum varius sit amet. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas sed. Eget arcu dictum varius duis at consectetur lorem donec. Enim sed faucibus turpis in eu. Aenean pharetra magna ac placerat. Arcu dictum varius duis at consectetur lorem donec massa sapien. Porttitor eget dolor morbi non arcu. Interdum velit euismod in pellentesque massa placerat duis ultricies. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Laoreet id donec ultrices tincidunt arcu non. Sed velit dignissim sodales ut eu sem integer vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Integer quis auctor elit sed vulputate mi sit amet. Dui ut ornare lectus sit amet est placerat in egestas. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vehicula ipsum a arcu cursus vitae. Pretium aenean pharetra magna ac placerat vestibulum lectus. Gravida cum sociis natoque penatibus et magnis.

Props

Prop	Type	Default	Description
container-background	String	'none'	Background colour of the entire container. Accepts HEX, RGB values.
container-padding	String	'0'	Padding of the entire container. Accepts a valid CSS padding value.
content-background	String	'none'	Background color of the content area. Accepts HEX, RGB values.
content-border-radius	String	'0'	Content border radius. Accepts a valid CSS border radius value.
content-padding	String	'0'	Content padding. Accepts a valid CSS padding value.
header-first	Boolean	'false'	Determines if the header should be on top of asides.
header-height	String	'80px'	Height of the header. Accepts a valid CSS value.
header-border	String	'none'	Color of the header border. Accepts HEX, RGB values.
header-border-radius	String	'0'	Header border radius. Accepts a valid CSS border radius value.
header-background	String	'none'	Background color of the header. Accepts HEX, RGB values.
header-shadow	String	'none'	CSS box-shadow value for the header. box-shadow
header-padding	String	'2rem'	Left and right padding of the header. Accepts a valid CSS value.
aside-left-width	String	'initial'	Width of the left aside. Accepts a valid CSS value.
aside-left-border	String	'none'	Border color of the left aside. Accepts HEX, RGB values.
aside-left-background	String	'none'	Background color of the left aside. Accepts HEX, RGB values.
aside-right-width	String	'initial'	Width of the right aside. Accepts a valid CSS value.
aside-right-border	String	'none'	Border color of the right aside. Accepts HEX, RGB values.
aside-right-background	String	'none'	Background color of the right aside. Accepts HEX, RGB values.
scrollbar-color	String	var(--vega-border-color)	Scrollbar color

container-background

• Type: String
• Default: none

Background colour of the entire container. Accepts HEX, RGB values.

<VegaLayout container-backgroun="#005689" />

container-padding

• Type: String
• Default: 0

Padding of the entire container. Accepts a valid CSS padding value.

<VegaLayout container-padding="0 2rem" />

content-background

• Type: String
• Default: none

Background color of the content area. Accepts HEX, RGB values.

<VegaLayout content-background="#005689" />

content-border-radius

• Type: String
• Default: 0

Content border radius. Accepts a valid CSS border radius value.

<VegaLayout content-border-radius="4px 4px 0 0" />

content-padding

• Type: String
• Default: 0

Content padding. Accepts a valid CSS padding value.

<VegaLayout content-padding="0 2rem" />

header-first

• Type: Boolean
• Default: false

Determines if the header should be on top of asides.

<div style="height: 200px">
  <VegaLayout
    :header-first="headerFirstExample"
    aside-left-width="80px"
    aside-right-width="80px"
  >
    <VegaLoremIpsum font-size="14px" padding="0 15px" />
  </VegaLayout>
</div>

<script setup>
  import VegaLayout from '../../src/components/VegaLayout.vue'
  import VegaLoremIpsum from '../../src/components/VegaLoremIpsum.vue'
  import { ref } from 'vue'

  const headerFirstExample = ref(false)
</script>

Demo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. Eget arcu dictum varius duis at consectetur lorem donec. Justo donec enim diam vulputate ut. Amet nisl purus in mollis nunc sed id semper risus. Amet nisl purus in mollis nunc sed. Ac tortor dignissim convallis aenean. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Tellus mauris a diam maecenas sed enim ut. Dictum at tempor commodo ullamcorper a. Etiam tempor orci eu lobortis elementum nibh tellus. Sed adipiscing diam donec adipiscing tristique risus nec. Lacus luctus accumsan tortor posuere. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Porta lorem mollis aliquam ut porttitor leo. In nibh mauris cursus mattis molestie. Odio euismod lacinia at quis risus sed vulputate odio ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Scelerisque in dictum non consectetur a erat. Id aliquet lectus proin nibh nisl condimentum. Aenean euismod elementum nisi quis eleifend quam. Tellus at urna condimentum mattis pellentesque id. Eget sit amet tellus cras adipiscing enim. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Vel pharetra vel turpis nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Amet justo donec enim diam vulputate. Congue nisi vitae suscipit tellus mauris a diam. Aenean pharetra magna ac placerat vestibulum. Eu volutpat odio facilisis mauris sit. Curabitur vitae nunc sed velit dignissim sodales. Feugiat in ante metus dictum at tempor. Imperdiet proin fermentum leo vel orci porta. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue mauris rhoncus aenean. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Nunc lobortis mattis aliquam faucibus purus in. Sagittis nisl rhoncus mattis rhoncus urna. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Risus ultricies tristique nulla aliquet enim tortor at auctor. Sit amet risus nullam eget. Nibh mauris cursus mattis molestie. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Purus non enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis. Ultrices sagittis orci a scelerisque purus semper eget duis. Ullamcorper a lacus vestibulum sed arcu non odio. Lobortis feugiat vivamus at augue eget arcu. Eget velit aliquet sagittis id. Eget magna fermentum iaculis eu non diam phasellus. In egestas erat imperdiet sed euismod. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Risus in hendrerit gravida rutrum quisque non tellus orci. Lobortis scelerisque fermentum dui faucibus in. Vitae auctor eu augue ut lectus. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Ac turpis egestas maecenas pharetra convallis. Malesuada proin libero nunc consequat interdum varius sit amet. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas sed. Eget arcu dictum varius duis at consectetur lorem donec. Enim sed faucibus turpis in eu. Aenean pharetra magna ac placerat. Arcu dictum varius duis at consectetur lorem donec massa sapien. Porttitor eget dolor morbi non arcu. Interdum velit euismod in pellentesque massa placerat duis ultricies. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Laoreet id donec ultrices tincidunt arcu non. Sed velit dignissim sodales ut eu sem integer vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Integer quis auctor elit sed vulputate mi sit amet. Dui ut ornare lectus sit amet est placerat in egestas. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vehicula ipsum a arcu cursus vitae. Pretium aenean pharetra magna ac placerat vestibulum lectus. Gravida cum sociis natoque penatibus et magnis.

header-height

Height of the header. Accepts a valid CSS value.

• Type: String
• Default: 80px

<VegaLayout header-height="100px" />

header-border

• Type: String
• Default: none

Color of the header border. Accepts HEX, RGB values.

<VegaLayout header-border="#005689" />

header-border-radius

• Type: String
• Default: 0

Header border radius. Accepts a valid CSS border radius value.

<VegaLayout header-border-radius="4px 4px 0 0" />

header-background

• Type: String
• Default: none

Background color of the header. Accepts HEX, RGB values.

<VegaLayout header-background="#fff" />

header-shadow

• Type: String
• Default: none

CSS box-shadow value for the header. box-shadow

<VegaLayout header-shadow="0 10px 20px #0000000d" />

header-padding

• Type: String
• Default: 2rem

Left and right padding of the header. Accepts a valid CSS value.

<VegaLayout header-padding="40px" />

aside-left-width

• Type: String
• Default: initial

Width of the left aside. Accepts a valid CSS value.

<VegaLayout aside-left-width="200px" />

aside-left-border

• Type: String
• Default: none

Border color of the left aside. Accepts HEX, RGB values.

<VegaLayout aside-left-border="#005689" />

aside-left-background

• Type: String
• Default: none

Background color of the left aside. Accepts HEX, RGB values.

<VegaLayout aside-left-background="#fff" />

aside-right-width

• Type: String
• Default: initial

Width of the right aside. Accepts a valid CSS value.

<VegaLayout aside-right-width="350px" />

aside-right-border

• Type: String
• Default: none

Border color of the right aside. Accepts HEX, RGB values.

<VegaLayout aside-right-border="#005689" />

aside-right-background

• Type: String
• Default: none

Background color of the right aside. Accepts HEX, RGB values.

<VegaLayout aside-right-background="#fff" />

scrollbar-color

• Type: String
• Default: var(--vega-border-color)

Scrollbar color.

<VegaLayout scrollbar-color="#638cc7" />

Slots

Slot	Description
header	Custom content for the header.
aside-left	Custom content for the left aside.
aside-right	Custom content for the right aside.
default	Main content of the page.

header

Custom content for the header.

<VegaLayout>
  <template #header>
    <div>Hello World!</div>
  </template>
</VegaLayout>

aside-left

Custom content for the left aside.

<VegaLayout>
  <template #aside-left>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </template>
</VegaLayout>

aside-right

Custom content for the right aside.

<VegaLayout>
  <template #aside-right>
    <ul>
      <li>Neil Armstrong</li>
      <li>Alan Bean</li>
      <li>Peter Conrad</li>
      <li>Edgar Mitchell</li>
      <li>Alan Shepard</li>
    </ul>
  </template>
</VegaLayout>

default

Main content of the page.

<VegaLayout>
  <div>Bunch of awesome content</div>
</VegaLayout>