Page Layout

プリセットされたレスポンシブ対応のページレイアウトを提供するコンポーネントです。

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>

See Also

Sidebar

Toc