How it works
GidTemplateコンポーネントはPageLayoutの内部で利用されています。
より詳細なカスタマイズが必要なレイアウトを作成する場合などに利用できるコンポーネントです。
Examples
Basic
GridAreaコンポーネントを利用して各エリアを作成します
GridAreaコンポーネントのarea 属性にエリア名を付けます。エリア名はアルファベット一意な1文字である必要があります。
作成した全てのGridAreaコンポーネントを、GridTemplate コンポーネントに含めます。
GridTemplateコンポーネントのareas属性で、各エリアの配置を指定します。 上の行の最初の列から順番に、エリア名を記載します。改行は空白文字を記載します。
rows属性で各行のサイズを、columns属性で各列のサイズを指定します。
Top area
Start aside area
Center area
End aside area
Bottom area
vue
<template>
<GridTemplate
areas="ttt sce sbb"
rows="20px 1fr 20px"
columns="150px 1fr 150px"
>
<GridArea
area="t"
background-color="info"
>
Top area
</GridArea>
<GridArea
area="s"
background-color="success"
>
Start aside area
</GridArea>
<GridArea
area="c"
background-color="primary"
>
Center area
</GridArea>
<GridArea
area="e"
background-color="danger"
>
End aside area
</GridArea>
<GridArea
area="b"
background-color="secondary"
>
Bottom area
</GridArea>
</GridTemplate>
</template>
Responsive
Top area
Start aside area
Center area
End aside area
Bottom area
vue
<template>
<GridTemplate
areas="t s c e b"
areas-md="tt sc ee bb"
areas-lg="ttt sce sbb"
rows="20px 0px 1fr 20px 20px"
rows-md="20px 1fr 20px 20px"
rows-lg="20px 1fr 20px"
columns="1fr"
columns-md="150px 1fr"
columns-lg="150px 1fr 150px"
>
<GridArea
area="t"
background-color="info"
>
Top area
</GridArea>
<GridArea
area="s"
background-color="success"
>
Start aside area
</GridArea>
<GridArea
area="c"
background-color="primary"
>
Center area
</GridArea>
<GridArea
area="e"
background-color="danger"
>
End aside area
</GridArea>
<GridArea
area="b"
background-color="secondary"
>
Bottom area
</GridArea>
</GridTemplate>
</template>