Ionic-padding

提供:Dev Guides
移動先:案内検索

イオン-パディング

Ionicは、要素にパディングを追加する簡単な方法を提供します。 使用できるクラスがいくつかあり、それらはすべて、要素の境界とそのコンテンツの間に 10px を追加します。 次の表は、使用可能なすべてのパディングクラスを示しています。

パディングクラス

Class Name Class Info
padding Adds padding around every side.
padding-vertical Adds padding to the top and bottom.
padding-horizontal Adds padding to the left and right.
padding-top Adds padding to the top.
padding-right Adds padding to the right.
padding-bottom Adds padding to the bottom.
padding-left Adds padding to the left.

パディングを使用する

要素にパディングを適用する場合は、上の表のクラスの1つを割り当てるだけです。 次の例は、2つのブロックボタンを示しています。 最初のものは padding クラスを使用していますが、2番目のものは使用していません。 10px のパディングが適用されているため、最初のボタンが大きくなっていることがわかります。

<div class = "button button-block padding">Padding</div>
<div class = "button button-block">No padding</div>

上記のコードは、次の画面を生成します-

イオンパディング