[解決済み] ionic 2 でアイコンやボタンを大きくする方法
2022-02-17 07:41:54
質問
を作るにはどうしたらいいのでしょうか?
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
はフォントアイコンなので、本来はテキストなので、以下の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>
のデフォルトのSass変数を更新することもできます。
$button-round-padding
の中で
src/theme/variables.scss
ファイルを、お好みのサイズに変更してください。 ボタンの詳細については、以下を参照してください。
こちら
関連
-
[解決済み】エラー。Android SDK 内で gradle ラッパーが見つかりませんでした。Android SDKをアップデートする必要があるかもしれません。
-
[解決済み】Cordova - 現在の作業ディレクトリはCordovaベースのプロジェクトではありません。
-
[解決済み] 新しいプロジェクトでcordova.jsが見つからない
-
[解決済み] DeprecationWarningです。Tapable.pluginは非推奨です。代わりに `.hooks` の新しい API を使用してください。
-
[解決済み] ionic 2 でアイコンやボタンを大きくする方法
-
[解決済み] ionic 2 - エラー Android Studio でインストールされたバージョンの Gradle も見つかりませんでした。
-
[解決済み] 携帯電話のギャップにおけるローカルストレージの使用
-
[解決済み】Font Awesome アイコンの色、サイズ、シャドウのスタイルを設定する方法
-
[解決済み】React Nativeアプリにアイコンを追加する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】エラー。Android SDK 内で gradle ラッパーが見つかりませんでした。Android SDKをアップデートする必要があるかもしれません。
-
[解決済み】Cordova - 現在の作業ディレクトリはCordovaベースのプロジェクトではありません。
-
[解決済み] 新しいプロジェクトでcordova.jsが見つからない
-
[解決済み] DeprecationWarningです。Tapable.pluginは非推奨です。代わりに `.hooks` の新しい API を使用してください。
-
[解決済み] ionic 2 でアイコンやボタンを大きくする方法
-
[解決済み] ionic 2 - エラー Android Studio でインストールされたバージョンの Gradle も見つかりませんでした。
-
[解決済み] 携帯電話のギャップにおけるローカルストレージの使用