I created a button in Ionic 2 as follows:
<button secondary block round padding style="text-align : left;">
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
I am trying to align the button text to left side but its not coming there. Is there build in twik available to achieve that?
Ionic wraps the contents of the button into a <span> tag which has the class .button-inner. So the HTML markup looks something like this when you inspect it
<button secondary block round padding>
<span class="button-inner">
<ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
Login
</span>
<ion-button-effect></ion-button-effect>
</button>
The .button-inner class applies flexbox properties to position the text and icons central. You can overwrite the justify-content property and change the value from center to flex-start and this will tell the content (the text and icon) to start from the beginning of the box.
Example
If you want to apply it to all buttons
.button-inner{
justify-content:flex-start;
}
If you want to apply it to a specific button (where .specific-button is added as a class to a button component)
.specific-button .button-inner{
justify-content:flex-start;
}
Because Ionic use its class generate default css. So you should use SASS to customize CSS .
For example :
<button class="item">
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
file styles.scss
.item{
#extend secondary;
#extend block;
text-align : left;
}
You can use the item-left attribute inside the button-tag. No need for class="" or style="".
<button secondary block round padding item-left>
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
More information here
Related
When I click on the label of an ion-item the checkbox is triggered.
I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.
I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120
However, it is not working for Ionic 4.
<ion-item>
<ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
<ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
</ion-label>
<ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked">
</ion-checkbox>
</ion-item>
I'd like to have two behaviors:
- When clicking in the Checkbox trigger just the checkbox.
- When clicking on the label or the icon open a modal to edit my document.
I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
Explanation
The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;
Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.
ion-item ion-label {
overflow: visible;
}
I found another solution. I added another hidden checkbox in the item.
<ion-item *ngFor="let task of tasks;let i of index;" padding margin>
<ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
<!-- another checkbox otherwise item clicks triggers checkbox click -->
<ion-checkbox hidden=true ></ion-checkbox>
<ion-label >
{{task.Name}}
</ion-label>
<ion-reorder slot="end"></ion-reorder>
You can also wrap the checkbox in a slotted div, which appears to break the link between the item and the checkbox.
<ion-item (click)="itemHandler()">
<ion-icon />
<ion-label>Label</ion-label>
<ion-checkbox (click)="checkboxHandler()" />
</ion-item>
If you put the click handler on the ion-item then it will handle clicks from anywhere on the ion-item. However, that includes clicks from the checkbox, so you have to make sure to also call event.stopPropagation() in the checkbox click handler.
Good day all
I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.
In normal HTML forms you have a relationship between labels and inputs using the "for" attribute, like so:
<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>
With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.
In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.
I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:
<ion-item>
<ion-label for="searchText">
<ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
</ion-label>
<ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
Is there something similar that one can use, or do I need to use JavaScript to achieve this?
Any advice would be greatly appropriated
So since I've been asked for a solution by someone else, let me post the workaround that I used:
I never managed to find a way to automatically add this kind of functionality like in a normal form, I did manage to trigger a click event on the icon that then caller a JavaScript function to give focus to my input field. It looks something like this:
HTML:
<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
<button (click)="focusSearch()" class="icon-button">
<ion-icon name="search" color="primary" for="searchText"></ion-icon>
</button>
<ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
JS (in my Type Sctipr file):
#ViewChild('input') searchInput: { setFocus: () => void; } ;
...
focusSearch() {
this.searchInput.setFocus();
}
Note that I call the "focusSearch()" function if you click anywhere in the "ion-item" wrapped around the icon and the text box, as I use CSS to have the whole thing display as a single textbox.
Hope this helps!
Is there a way to force content behind a disabled button, that is transparent?
Here is the code:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
I'm not quite sure to understand what you want to do here, but if you want to apply a style depending on a particular logic you can use ngClass.
i.e. if you want to apply a style to your text when the button is disabled (so when
!cultivaresForm.valid) you can do something like this:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
<p [ngClass]="{text-behind: !cultivaresForm.valid}">the text you want to put behind</p>
You can then define the text-behind style in a separate CSS file.
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
I am using ionic toggle, and below is the simple code:
<ion-item>
<ion-label>test</ion-label>
<ion-toggle checked="true"></ion-toggle>
</ion-item>
Now, label and toggle are in one line, I want the label and toggle both open a new line with 100% width, how can I do that? Thanks
Just put them outside the ion-item like this:
<div>
<ion-label>test</ion-label>
<ion-toggle checked="true"></ion-toggle>
</div>