Layout
When To Use
Use the agreed layout in he 3 app development, you can get started faster
Examples
Horizontal two-column layout
medium width (default)
horizontal middle layout
<template>
<h-horizontal-layout mode="middle">
<template #left>
<div style="background-color: #7dbcea; height: 400px"></div>
</template>
<template #right>
<div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
</template>
</h-horizontal-layout>
</template>
left fixed
Horizontal layout with fixed edge left
<template>
<h-horizontal-layout mode="left" :width="200">
<template #left>
<div style="background-color: #7dbcea; height: 400px"></div>
</template>
<template #right>
<div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
</template>
</h-horizontal-layout>
</template>
right fixed
Horizontal layout with fixed edge right
<template>
<h-horizontal-layout mode="right" :width="200">
<template #left>
<div style="background-color: #7dbcea; height: 400px"></div>
</template>
<template #right>
<div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
</template>
</h-horizontal-layout>
</template>Vertical two-column layout
medium width (default)
Top and bottom middle layout
<template>
<h-vertical-layout mode="middle">
<template #top>
<div style="background-color: #7dbcea; height: 400px"></div>
</template>
<template #bottom>
<div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
</template>
</h-vertical-layout>
</template>Top fixed
Vertical layout fixed on top
<template>
<h-vertical-layout mode="top" :width="200">
<template #top>
<div style="background-color: #7dbcea; height: 100%"></div>
</template>
<template #bottom>
<div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
</template>
</h-vertical-layout>
</template>
Lower fixed
Fixed vertical layout below
<template>
<h-vertical-layout mode="bottom" :width="200">
<template #top>
<div style="background-color: #7dbcea"></div>
</template>
<template #bottom>
<div style="background-color: rgba(16, 142, 233, 1)"></div>
</template>
</h-vertical-layout>
</template>
Single column layout
Middle (default)
Single Column Centered Layout
<template>
<h-single-layout :width="400">
<div style="background-color: #7dbcea; height: 400px; width: 400px"></div>
</h-single-layout>
</template>
Left
Single Column Left Layout
<template>
<h-single-layout mode="left" :width="400">
<div style="background-color: #7dbcea; height: 400px; width: 400px"></div>
</h-single-layout>
</template>
Right
Single Column Right Layout
<template>
<h-single-layout mode="right" :width="400">
<div style="background-color: #7dbcea; height:400px; width:400px"></div>
</h-single-layout>
</template>Split pane
Layout with adjustable ratio of left and right width
<template>
<h-split-pane-layout>
<template #left>
<div style="background-color: #7dbcea; height: 400px"></div>
</template>
<template #right>
<div style="background-color: rgba(16, 142, 233, 1); height: 400px"></div>
</template>
</h-split-pane-layout>
</template>
API
Props
| Property | Description | Type | default |
|---|---|---|---|
| mode | layout mode | enum | middle |
| mode(vertical) | layout mode(vertical) | enum | middle |
| width | fixed local width | number | 300 |