Menu
How can make button and icon size bigger in fallowing code:
<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> 
886
Round Shape Button It is used to create a button with rounded corners. You can do it by adding the round property in the button as like below: <ion-button shape="round" >Round Button</ion-button>
A color can be applied to an Ionic component in order to change the default colors using the color attribute. Notice in the buttons below that the text and background changes based on the color set. When there is no color set on the button it uses the primary color by default.
ion-icon. Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, check out the Ionicons docs. One feature of Ionicons in Ionic is when icon names are set, the actual icon which is rendered can change slightly depending on the mode the app is running from.
ion-icons are font icons so they can be edited the following Sass/CSS as they are essentially text:
ion-icon { font-size: 20px; //Preferred size here } As for the button ionic has some inbuilt classes to affect size. For example:
<button ion-button large>Large</button> <button ion-button>Default</button> <button ion-button small>Small</button> You can also update the default Sass variable of $button-round-padding in your src/theme/variables.scss file, to the size that you would like. More on buttons can be found here
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
