Ionic-buttons
イオン-ボタン
Ionic Frameworkにはいくつかのタイプのボタンがあり、これらのボタンは微妙にアニメーション化され、アプリを使用するときのユーザーエクスペリエンスがさらに向上します。 すべてのボタンタイプのメインクラスは button です。 このクラスは常にボタンに適用され、サブクラスを操作するときにプレフィックスとして使用します。
ブロックボタン
ブロックボタンは、常に親コンテナの100％幅になります。 また、小さなパディングが適用されます。 ブロックボタンを追加するには、 button-block クラスを使用します。 パディングを削除したいが、全幅を保持したい場合は、 button-full クラスを使用できます。
以下は、両方のクラスの使用法を示す例です-
<button class = "button button-block">
button-block
</button>
<button class = "button button-full">
button-full
</button>上記のコードは、次の画面を生成します-
ボタンのサイズ
ボタンサイズを変更するための2つのイオンクラスがあります-
- button-small および
- ボタン大。
以下は、それらの使用法を示すための例です-
<button class = "button button-small">
button-small
</button>
<button class = "button button-large">
button-large
</button>上記のコードは、次の画面を生成します-
ボタンの色
ボタンのスタイルを設定する場合は、適切なカラークラスを追加するだけです。 要素のスタイルを設定するとき、メイン要素クラスをカラークラスのプレフィックスとして追加する必要があります。 フッターバーのスタイルを設定しているため、プレフィックスクラスは bar になり、この例で使用するカラークラスは assertive （赤）になります。
<button class = "button button-assertive">
button-assertive
</button>上記のコードは、次の画面を生成します-
次の9つのクラスのいずれかを使用して、アプリボタンに選択した色を付けることができます-
| Color Class | Description | Result |
|---|---|---|
| button-light | To be used for white color | |
| button-stable | To be used for light grey color | |
| button-positive | To be used for blue color | |
| button-calm | To be used for light blue color | |
| button-balanced | To be used for green color | |
| button-energized | To be used for yellow color | |
| button-assertive | To be used for red color | |
| button-royal | To be used for violet color | |
| button-dark | To be used for black color |
ボタンのアウトライン
ボタンを透明にしたい場合は、 button-outline クラスを適用できます。 このクラスのボタンには、アウトラインの境界線と透明な背景があります。
ボタンから境界線を削除するには、 button-clear クラスを使用できます。 次の例は、これら2つのクラスの使用方法を示しています。
<button class = "button button-assertive button-outline">
button-outline
</button>
<button class = "button button-assertive button-clear">
button-clear
</button>上記のコードは、次の画面を生成します-
アイコンを追加する
アイコンをボタンに追加する場合、 icon クラスを使用するのが最善の方法です。 icon-left または icon-right を使用して、ボタンの片側にアイコンを配置できます。 以下に説明するように、ボタンの上にテキストがある場合、通常はアイコンを片側に移動します。
<button class = "button icon ion-home">
</button>
<button class = "button icon icon-left ion-home">
Home
</button>
<button class = "button icon icon-right ion-home">
Home
</button>上記のコードは、次の画面を生成します-
ボタンバー
いくつかのボタンをグループ化する場合は、 button-bar クラスを使用できます。 デフォルトでは、ボタンのサイズは同じです。
<div class = "button-bar">
<a class = "button button-positive">1</a>
<a class = "button button-assertive">2</a>
<a class = "button button-energized">3</a>
<a class = "button">4</a>
</div>上記のコードは、次の画面を生成します-
