Icons and Floating Inputs: Ionic

I was skimming the Ionic Worldwide Slack channel and saw this post:

Hi all,
i stuck on mixing an `ion-icon` with an `floating label` like in this the *Angular Material Bootstrap Inputs Demo* (https://mdbootstrap.com/angular/components/#).

I tried this:

< ion-item>
< ion-icon slot="start" name="bulb" color="ownred">< /ion-icon>
< ion-label position="floating">name< /ion-label>
< ion-input type="text" [(ngModel)]="newItem.name">< /ion-input>
< /ion-item>

 

But this will center the icon and not align it on bottom, like in the shown picture.

Screen Shot 2018-10-27 at 10.28.41 AM

Do you have any idea?

This got me thinking how to create this. My work machine was being updated to Mojave, so I had a few moments to play around with a solution.

The one I came up with was to break the problem into two parts. I figured that I needed to isolate the icon from the label and input set, so I turned to the ion-grid component to handle that. By using the align properties of Flexbox, I could position the elements how I needed.

In playing with the reference that was supplied, When the input received focus, the icon also changed color. To make that action happen, I add to event handlers on the input for the ionBlur and ionFocus events.

The handler for those events simply toggles a boolean. I use that variable’s state to trigger the CSS class state using [ngClass]={‘activeInputIcon’: isLabelActive}” on the ion-icon. So, when the isLabelActive is true, the activeInputIcon class is applied.

With that, we have rebuilt a sample of the combined icon and floating label input.

demo

Now, this sample is very basic. It does not handle multiple inputs so you will need to create a solution to solve that problem. For a bigger challenge, this entire element could be wrapped into a custom component…but I will leave that up to someone else.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.