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!
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.
I need a routine on Ionic that calls the cellphone's Keyboard to an ion-input when entering the page.
An example of a page would be:
<ion-content padding>
<form>
<ion-row>
<ion-col>
<ion-input #user name="user" type="text" placeholder="Usuário"></ion-input>
</ion-col>
</ion-row>
</form>
</ion-content>
What I want is to use the Navigating Lifecycle from Ionic (I believe that in this case using the ionViewDidEnter) to bring the focus and the Keyboard in the field automatically, I have already tried some codes but unfortunately sometimes it works and sometimes not, thank you right away.
You can set focus in your textarea in the method ionViewDidEnter and show the keyboard by using keyboard plugin of ionic.
#ViewChild('user') input ;
ionicViewDidEnter(){
setTimeout(() => {
this.input.setFocus();
},150);
this.keyboard.show();
}
I have referred the following links. Please go through it for more information:
https://ionicframework.com/docs/native/keyboard/
https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic/62789/4
Set focus on an input with Ionic 2
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
i have a few buttons in my app's screen and i want use Icon and below of that, write the title of the button...
in ionic 2 i can't use "< br>" or h1,h2 or even display block for this purpose.
code:
<button primary>
<ion-icon name="calendar"></ion-icon>
Calendar
</button>
i tried like this:
<button primary>
<h1>
<ion-icon name="calendar"></ion-icon>
</h1>
<br />
<h2>
Calendar
</h2>
</button>
thanks
You wont have a choice but to use sass. I'm not answering your question but are you sure you want it this way ??
You can do it this way ?
<button large >
<ion-icon name='home' class="breakme"></ion-icon>
Home
</button>
Or you can have lists with onclicks (click)="calendar" and fake it with a list?
<ion-list no-lines>
<ion-item (click)="getData()">
<ion-icon name="leaf"></ion-icon>
<br />
Herbology
</ion-item>
<ion-item (click)="getData()">
<ion-icon name="add"></ion-icon>
<br />
Calander
</ion-item>
</ion-list>
ok, I found a solution... Thank you Justin Willis
Instead of using extra html inside your button you can actually achieve this with just a touch of css. You can simply change the button-inner class to have a flex-flow of column. So you could just use something like this
.button-inner {
flex-flow: column;
}
In Ionic, we can do something like this for the list view:
<ion-list>
<ion-item href="#">
Butterfinger
</ion-item>
</ion-list>
And also like this:
<div class="list">
<a class="item" href="#">
Butterfinger
</a>
</div>
These 2 basically output the same layout. What is the difference between these 2? Will do it with the div method will result in better performance? If so, then why ion-list?
There is not any differences from CSS styling point of view (except some color styling on child text) between using <ion-list> and <div class="list"> because <ion-list> is a directive and it will render <div class="list"> inside it. If you inspect element you will see this
(rendered html picked from browser element inspection)
<ion-list>
<div class="list">
<ion-item href="#" class="item item-complex">
<a class="item-content" ng-href="#" href="#">
Butterfinger
</a>
</ion-item>
</div>
</ion-list>
As you can see in above code ion-list generate a div with list class.
Plus see the source code of ion-list it will make things more clearer. I am just sharing a line from source code to show what template this directive render
var listEl = jqLite('<div class="list">')
There will be no performance difference between both, but i will suggest you to use <div class="list"> if you do not want to use apis of ion-list and want to have more control over element while doing customization.
As far as your question "why ion-list" is concerned, the directive gives you access to many options in the API. The API methods listed in the bottom of the docs pages (like here for example) gives you a sense of what the directive allows you to do, instead of just using the CSS associated with the class.
Quoting from documentation
However, using the ionList and ionItem directives make it easy to
support various interaction modes such as swipe to edit, drag to
reorder, and removing items.
Conclusion: So it totaly depends upon your requirement, whether to use directive or use simple class on div.