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>
上記のコードは、次の画面を生成します-