I hope you can help me with my design, as you see in this image:
As you can see this messy, icons with the letters of the buttons, on the other hand also does not focus my image, I hope I can help since there is very little of scss in ionic:
Code Ionic:
<ion-content padding>
<img style="align-items: center" src="./../assets/logo.png">
<br>
<br>
<button ion-button icon-start center round full><ion-icon name="logo-facebook"></ion-icon>Registrate via Facebook</button>
<button ion-button icon-start center color="secondary" round full><ion-icon name="person-add"></ion-icon>Servicio Particular</button>
<button ion-button icon-start center color="dark" round full><ion-icon name="briefcase"></ion-icon>Servicio Corporativo</button>
<br>
<p>¿Eres nuevo? REGISTRATE AHORA</p>
</ion-content>
code .scss
page-home {
p {
text-align-last: center;
}
}
Examplo:
Related
I have the following code:
<ion-button expand=“full” (click)=“do()“>
<ion-icon name=“cart” slot=“start”></ion-icon>
TEXT
</ion-button>
I want the content (the TEXT and the ion-icon) to be aligned to the left and tried:
ion-button {
display: flex;
justify-content: flex-start;
}
I thought this would result into aligning the content to the left but nothing happens. It seems that the css is totally ignored.
You can align the text and icon to the left if you add a div inside your button and use Ionic 4 CSS Utilities (in your case text-left / text-start).
<ion-button expand=“full” (click)=“do()“>
<div text-left>
<ion-icon name=“cart” slot=“start”></ion-icon>
TEXT
</div>
</ion-button>
Make sure to give the div the full width of the button
ion-button > div {
width: 100%;
}
Documentation:
Ionic 4 CSS Utilities
Wrap your inner in span and add in css
.inner-span{
margin-left:auto;
}
As below (use " instead “)
<ion-button expand="full" (click)="do()">
<span class="inner-span">
<ion-icon name="cart" slot="start"></ion-icon>
TEXT
</span>
</ion-button>
See working code
I want to have a list item that can be swiped to reveal an archive button.
The icon should be to the left of the text.
I'm following the doc here (Button Layout): https://ionicframework.com/docs/api/components/item/ItemSliding/
<ion-item-options icon-start>
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
But it still displays the icon on top of the text, see an example here: https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html
What am I missing?
Seems like it's caused because of a bug in how the CSS rules are being applied but in the meantime, it works properly if you also add the icon-left attribute
<ion-content padding>
<ion-list>
<ion-item-sliding #item>
<ion-item>
Swipe me!
</ion-item>
<ion-item-options icon-left icon-start> <!-- Here! -->
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
Working stackblitz project
More info:
I've found that the following style rule is being applied which causes the issue. So the only way to avoid this issue is to use both icon-left and icon-start attributes:
// The issue is because of this style rule...
ion-item-options:not([icon-left]) .button:not([icon-only]) .button-inner,
ion-item-options:not([icon-start]) .button:not([icon-only]) .button-inner {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
This is ionic2 showing in iPad
This is showing in Iphone 6 plus
page.html
<ion-content color="danger">
<div padding class="about-button">
<a ion-button color="light" href="tel:123456">
立即拨打
</a>
</div>
</ion-content>
page.scss
.about-button {
text-align: center;
background-color: #F44336;
}
I don't why in Ipad showing some white screen at the bottom
How can I set the button at the bottom of the page.
First time use ionic, can ionic set something to access all device screen?
Finally, I found the problem.
page.html
<ion-content color="danger">
<div padding class="about-button">
<a ion-button color="light" href="tel:123456">
立即拨打
</a>
</div>
</ion-content>
ion-content cannot use color="danger", change it to <ion-content class="bg-style"> and change scss file also.
page.scss
.bg-style {
background: #F44336;
}
By this way to solve white screen at bigger size devices
I'm developing a shopping cart page in Ionic 2 and I have the following code and I'm trying to align the buttons with the text vertically in the middle position. I tried with vertical-align: middle CSS but without success.
<ion-list>
<ion-item *ngFor="let product of this.productsCollection">
<ion-buttons end>
<button ion-button icon-only clear outline (click)="decreaseProduct()">
<ion-icon name="remove-circle"></ion-icon>
</button>
<span>{{this.quantityProducts}}</span>
<button ion-button icon-only clear outline (click)="increaseProduct()">
<ion-icon name="add-circle"></ion-icon>
</button>
</ion-buttons>
</ion-item>
Image result for the above code:
https://i.stack.imgur.com/yfeL6.png
It's hard to tell without the CSS surrounding your elements, but if the container for your add/substract has a fixed height and is floating, you can try something like this.
button,
span {
position: relative;
top: 50%;
float:left;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
From there you'll need to tweak your margins and such to make it look nice, but that should vertically align them just fine.
You can see a rough example here: JSFIDDLE
Solution obtained in https://forum.ionicframework.com/t/vertical-align-middle-ion-buttons/81215 :
<ion-list>
<ion-item *ngFor="let product of this.productsCollection">
<button ion-button item-right icon-only color="danger" clear outline>
<ion-icon name="remove-circle"></ion-icon>
</button>
<span item-right>0</span>
<button ion-button item-right icon-only color="secondary" clear outline>
<ion-icon name="add-circle"></ion-icon>
</button>
</ion-item>
</ion-list>
IONIC 3:
Usually, this happened because your ion-item have the correct height but the button don't respect it 'cause it should stretch the icon inside.
You can see what I've said now with the ispect function of chrome.
So, to centered your icon you can try to remove it's padding and margin leaving only the distance from left and right border:
.my-left-icon {
margin: 0px 0px 0px 10px !important;
padding: 0 !important;
}
.my-right-icon {
margin: 0px 10px 0px 0px !important;
padding: 0 !important;
}
Then in your code apply the css:
<ion-list>
<ion-item *ngFor="let product of this.productsCollection">
<ion-buttons end>
<button ion-button icon-only clear class="my-left-icon" (click)="decreaseProduct()">
<ion-icon name="remove-circle"></ion-icon>
</button>
<span>{{this.quantityProducts}}</span>
<button ion-button icon-only clear class="my-right-icon" (click)="increaseProduct()">
<ion-icon name="add-circle"></ion-icon>
</button>
</ion-buttons>
</ion-item>
THE SITUATION:
In my Ionic 2 app I need to have the menu button on two lines: icon and text.
The problem is that somehow the ion-button directive force the button to be on one line.
I need the ion-button directive to be sure the button has always the proper formatting and positioning responsively.
I just need that button to be on two lines.
This the html and css of my attempt:
THE HTML:
<ion-header>
<ion-navbar>
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
<br />
<p class="menuSubTitle">MENU</p>
</button>
<ion-title>
HomePage
</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="person"></ion-icon>
<br />
<p lass="menuSubTitle">LOGIN</p>
</button>
</ion-navbar>
</ion-header>
THE CSS:
.menuSubTitle {
font-size: 0.6em;
float:left;
display: block;
clear: both;
}
THE QUESTION:
How can I make a ion-button on two lines?
Thanks!
You are along the right lines. A slight modification is needed for it to work.
Here is my markup:
<button ion-button block color="menu-o">
<div>
<ion-icon name="flash"></ion-icon>
<label>Flash</label>
</div>
</button>
The inner <div> inside the <button> is the trick. The only thing needed for this markup is to set the <label> element to display: block.
Since <p> is already a block level element. It may just work as is.
This will do the trick:
.button-inner {
flex-flow: column;
}
This will change the element ordering from horizontal to vertical.
You have to change the button height if you want it a bit prettier. (e.g. with icon margin)
.button-icon-top {
height: 5em;
.button-inner {
flex-flow: column;
.icon {
margin-bottom: 10px;
font-size: 2em;
}
}
}
Just add the class name to your button.
<button ion-button full large class="button-icon-top">
<ion-icon name="logo-twitter"></ion-icon>
<span>Click me</span>
</button>