メインコンテンツまでスキップ
Version: v6

ion-grid

shadow

コンテンツ

grid はカスタムレイアウトを作成するための強力なモバイルファーストのflexboxシステムです。

グリッド、row(s)column(s)の3つのユニットで構成されます。rowは行全体に展開され、他の列に合わせてサイズが変更されます。画面サイズに応じてブレークポイントが異なる、12列のレイアウトに基づいています。カラム数はCSSを使用してカスタマイズできます。

詳しくは Responsive Grid documentation をご覧ください。

使い方

<ion-grid>
<ion-row>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
</ion-row>

<ion-row>
<ion-col size="6">
ion-col [size="6"]
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
</ion-col>
</ion-row>

<ion-row>
<ion-col size="3">
ion-col [size="3"]
</ion-col>
<ion-col>
ion-col
</ion-col>
<ion-col size="3">
ion-col [size="3"]
</ion-col>
</ion-row>

<ion-row>
<ion-col size="3">
ion-col [size="3"]
</ion-col>
<ion-col size="3" offset="3">
ion-col [size="3"] [offset="3"]
</ion-col>
</ion-row>

<ion-row>
<ion-col>
ion-col
</ion-col>
<ion-col>
ion-col
<br>#
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
<br>#
</ion-col>
</ion-row>

<ion-row>
<ion-col class="ion-align-self-start">
ion-col [start]
</ion-col>
<ion-col class="ion-align-self-center">
ion-col [center]
</ion-col>
<ion-col class="ion-align-self-end">
ion-col [end]
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>

<ion-row class="ion-align-items-start">
<ion-col>
[start] ion-col
</ion-col>
<ion-col>
[start] ion-col
</ion-col>
<ion-col class="ion-align-self-end">
[start] ion-col [end]
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>

<ion-row class="ion-align-items-center">
<ion-col>
[center] ion-col
</ion-col>
<ion-col>
[center] ion-col
</ion-col>
<ion-col>
[center] ion-col
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>

<ion-row class="ion-align-items-end">
<ion-col>
[end] ion-col
</ion-col>
<ion-col class="ion-align-self-start">
[end] ion-col [start]
</ion-col>
<ion-col>
[end] ion-col
</ion-col>
<ion-col>
ion-col
<br>#
<br>#
</ion-col>
</ion-row>

<ion-row>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
<ion-col size="12" size-sm>
ion-col [size="12"] [size-sm]
</ion-col>
</ion-row>

<ion-row>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
<ion-col size="12" size-md>
ion-col [size="12"] [size-md]
</ion-col>
</ion-row>

<ion-row>
<ion-col size="6" size-lg offset="3">
ion-col [size="6"] [size-lg] [offset="3"]
</ion-col>
<ion-col size="3" size-lg>
ion-col [size="3"] [size-lg]
</ion-col>
</ion-row>
</ion-grid>

プロパティ

fixed

DescriptionIf true, the grid will have a fixed width based on the screen size.
Attributefixed
Typeboolean
Defaultfalse

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--ion-grid-paddingPadding for the Grid
--ion-grid-padding-lgPadding for the Grid on lg screens
--ion-grid-padding-mdPadding for the Grid on md screens
--ion-grid-padding-smPadding for the Grid on sm screens
--ion-grid-padding-xlPadding for the Grid on xl screens
--ion-grid-padding-xsPadding for the Grid on xs screens
--ion-grid-widthWidth of the fixed Grid
--ion-grid-width-lgWidth of the fixed Grid on lg screens
--ion-grid-width-mdWidth of the fixed Grid on md screens
--ion-grid-width-smWidth of the fixed Grid on sm screens
--ion-grid-width-xlWidth of the fixed Grid on xl screens
--ion-grid-width-xsWidth of the fixed Grid on xs screens

Slots

No slots available for this component.

View Source