Edited at

個人的に良く使うIonicの使い方

More than 1 year has passed since last update.

編集に編集を継ぎ足して知見を増やして行きたい


画面サイズが変わってもいい感じにするやつ


コード


<!-- ~v3.9.x -->
<ion-content padding>
<ion-row justify-content-center>
<ion-col col-sm-12 col-md-10 col-lg-8 col-xl-6>
ここにメインコンテンツ
</ion-col>
</ion-row>
</ion-content>

<!-- v4 beta -->
<ion-content padding>
<ion-row justify-content-center>
<ion-col size-sm="12" size-md="10" size-lg="8" size-xl="6">
ここにメインコンテンツ
</ion-col>
</ion-row>
</ion-content>


イメージ

dynamic.gif


テーマカラーを増やしたい時

「src/theme/variables.scss」に設定を書き足す

$colors: (

primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,

// こんな感じ
my-primary: #11CBD7,
my-secondary: #C6F1E7,
my-danger: #FA4659
);

こんな感じで使えるようになる

<button ion-button color="my-primary">My Primary Button</button>