How it works
Layoutフォルダ内のレイアウトコンポーネント内で、PageLayoutコンポーネントを利用してコンテンツを記載してください。
PageLayoutコンポーネントはレスポンシブ対応の配置を行います。
type 属性を利用して、プリセットされた配置方法を選択してください。
ContainerLess Layout
One Column
vue
<template>
<PageLayout type="three-columns">
<template #header>
<!-- Header -->
</template>
<template #start>
<!-- Left Nav -->
</template>
<template #end>
<!-- Right Nav -->
</template>
<template #default>
<!-- Main Content -->
</template>
<template #footer>
<!-- Footer -->
</template>
</PageLayout>
</template>
Container Layout
Left Sidebar
vue
<template>
<PageLayout type="start-sidebar">
<template #header>
<!-- Header -->
</template>
<template #start>
<!-- Side Nav -->
</template>
<template #default>
<!-- Main Content -->
</template>
<template #footer>
<!-- Footer -->
</template>
</PageLayout>
</template>
Three Columns
vue
<template>
<PageLayout type="three-columns">
<template #header>
<!-- Header -->
</template>
<template #start>
<!-- Left Nav -->
</template>
<template #end>
<!-- Right Nav -->
</template>
<template #default>
<!-- Main Content -->
</template>
<template #footer>
<!-- Footer -->
</template>
</PageLayout>
</template>
Mini and One Column Sidebar
vue
<template>
<PageLayout type="three-columns">
<template #header>
<!-- Header -->
</template>
<template #start>
<!-- Left Nav -->
</template>
<template #end>
<!-- Right Nav -->
</template>
<template #default>
<!-- Main Content -->
</template>
<template #footer>
<!-- Footer -->
</template>
</PageLayout>
</template>