Layout Container

Sahifa strukturalarini yaratish uchun kompozitsion layout komponentlari. Istalgan layoutni yaratish uchun VxContainer, VxHeader, VxFooter, VxAside va VxMain'ni birlashtiring.

Konteyner yo'nalishni avtomatik aniqlaydi: farzandlar VxHeader yoki VxFooter'ni o'z ichiga olganda vertikal, aks holda gorizontal.

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	Layout yo'nalishi. Farzandlar Header yoki Footer'ni o'z ichiga olganda vertikalni avtomatik aniqlaydi

VxHeader

Prop	Type	Default	Description
height	string	'60px'	Header balandligi

VxFooter

Prop	Type	Default	Description
height	string	'60px'	Footer balandligi

VxAside

Prop	Type	Default	Description
width	string	'200px'	Aside kengligi