休憩コードでbutton
およびicon
サイズを大きくするにはどうすればよいですか:
<ion-card>
<ion-card-header>
Explore Nearby
</ion-card-header>
<ion-list>
<button ion-item>
<ion-icon name="cart" item-left></ion-icon>
Shopping
</button>
<button ion-item>
<ion-icon name="medical" item-left></ion-icon>
Hospital
</button>
<button ion-item>
<ion-icon name="cafe" item-left></ion-icon>
Cafe
</button>
</ion-list>
</ion-card>
ion-icon
sはフォントアイコンであるため、基本的にテキストであるため、次のSass/CSSを編集できます。
ion-icon {
font-size: 20px; //Preferred size here
}
button
ionicに関しては、サイズに影響するいくつかの組み込みクラスがあります。例えば:
<button ion-button large>Large</button>
<button ion-button>Default</button>
<button ion-button small>Small</button>
$button-round-padding
ファイルのsrc/theme/variables.scss
のデフォルトのSass変数を、希望するサイズに更新することもできます。ボタンの詳細については、こちらをご覧ください こちら
Iconの場合でも、イオンアイコンタグには大小を使用できます。これは私が使用していた方法です
<ion-icon name="arrow-forward" item-end small></ion-icon>
私のIonic 4アプリでは、次のアプローチを採用しました。 * .scssファイル内:
ion-icon { zoom: 1.5 }
もちろん、ズーム値はニーズによって異なります。
これが誰かを助けることを願っています。 o /