Layout Container

Компонуемые компоненты раскладки для построения структуры страниц. Комбинируйте VxContainer, VxHeader, VxFooter, VxAside и VxMain для создания любой разметки.

Контейнер автоматически определяет направление: вертикальное, если среди дочерних есть VxHeader или VxFooter, иначе горизонтальное.

Header + Main

Header

Main

<template>
  <VxContainer>
    <VxHeader>Header</VxHeader>
    <VxMain>Main</VxMain>
  </VxContainer>
</template>

Header + Main + Footer

Header

Main

Footer

<template>
  <VxContainer>
    <VxHeader>Header</VxHeader>
    <VxMain>Main</VxMain>
    <VxFooter>Footer</VxFooter>
  </VxContainer>
</template>

Aside + Main

Aside

Main

<template>
  <VxContainer>
    <VxAside width="200px">Aside</VxAside>
    <VxMain>Main</VxMain>
  </VxContainer>
</template>

Header + Aside + Main

Header

Aside

Main

<template>
  <VxContainer>
    <VxHeader>Header</VxHeader>
    <VxContainer>
      <VxAside width="200px">Aside</VxAside>
      <VxMain>Main</VxMain>
    </VxContainer>
  </VxContainer>
</template>

Aside + Header + Main

Aside

Header

Main

<template>
  <VxContainer>
    <VxAside width="200px">Aside</VxAside>
    <VxContainer>
      <VxHeader>Header</VxHeader>
      <VxMain>Main</VxMain>
    </VxContainer>
  </VxContainer>
</template>

Header + Aside + Main + Footer

Header

Aside

Main

Footer

<template>
  <VxContainer>
    <VxHeader>Header</VxHeader>
    <VxContainer>
      <VxAside width="200px">Aside</VxAside>
      <VxMain>Main</VxMain>
    </VxContainer>
    <VxFooter>Footer</VxFooter>
  </VxContainer>
</template>

Aside + Header + Main + Footer

Aside

Header

Main

Footer

<template>
  <VxContainer>
    <VxAside width="200px">Aside</VxAside>
    <VxContainer>
      <VxHeader>Header</VxHeader>
      <VxMain>Main</VxMain>
      <VxFooter>Footer</VxFooter>
    </VxContainer>
  </VxContainer>
</template>

Props

VxContainer

Prop	Type	Default	Description
direction	'horizontal' | 'vertical'	auto	Направление раскладки. Автоматически определяется вертикальное, если среди дочерних есть Header или Footer

VxHeader

Prop	Type	Default	Description
height	string	'60px'	Высота header

VxFooter

Prop	Type	Default	Description
height	string	'60px'	Высота footer

VxAside

Prop	Type	Default	Description
width	string	'200px'	Ширина aside