This time I will show you how we can give a better visual aspect to the input components of ionic 4

Let’s see what it says in the documentation about these components.

The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.

The structure that we must follow to create a form is the following:

<ion-list>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input></ion-input>
    </ion-item>
</ion-list>

In previous ionic versions each component had its own class where the styles for that element were applied, for example: <ion-item> had an “item” class plus a class for each “item-md” platform, “item -ios “. In ionic 4 the styles are applied directly to the component and css properties of the framework are used, for example to modify the background of a component we must apply the property “–background”.

We will create an input with edges that when focusing this change color and an input that has a background color, for this we will use the primary color indicated in the file src / theme / variables.scss “–ion-color-primary”

Set up

We will create a file where we will place the styles of our inputs so that they can be used throughout our application.

File path: src/theme/elements.scss

In order for the styles added to this file to be reflected in our application, we must include it in the file src/ global.scss in the following way.

@import './theme/elements'

SCSS

In the file src/ theme/variables.scss we can find the variables that correspond to the different colors that we can use within our application. If we want to use a custom color we can use a tool that provides us ionic in its documentation by going to the following link https://ionicframework.com/docs/theming/color-generator

To access the color variables we can use the var function provided by the framework, example: var(–ion-color-primary)

Styles

Input with edges

We will create the html structure on the page we want:

<ion-list class="line-input">
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input class="ion-text-right"></ion-input>
    </ion-item>
</ion-list>

Now we will apply the styles for this component in the file src/theme/elements.scss

.line-input {
    margin-bottom: 0!important;
    ion-item {
        --border-color: transparent!important;
        --highlight-height: 0;
        border: 1px solid #dedede;
        border-radius: 4px;

        &.item-has-focus {
            border: 1px solid var(--ion-color-primary);
        }

        ion-label {
            color: #807e7e!important;
            font-weight: 300;
            font-size: 1rem!important;
        }
    }
}

Result:

 Input with background color

We will create the html structure on the page we want:

<ion-list class="background-input">
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input class="ion-text-right"></ion-input>
    </ion-item>
</ion-list>

Now we will apply the styles for this component in the file src/theme/elements.scss

.background-input {
    margin-bottom: 0!important;
    ion-item {
        --border-color: transparent!important;
        --highlight-height: 0;
        --background: none;
        background: rgba(var(--ion-color-primary-rgb), 0.06);
        border-radius: 4px;

        ion-label {
            color: #777!important;
            font-weight: 300;
            font-size: 1rem!important;
        }
        ion-input {
            --color: #777;
        }
    }
}

Result:

You can download our free template for chat app in:

Template for ionic 4 free, Chat App

Categories: Ionic Framework En

5 Comments

BJörn · 4 September, 2019 at 5:10 PM

Thanks !! Exactly what I was searching for !

saeed · 13 December, 2019 at 8:27 PM

really impressive, i’ve tried it and it worked as described.
Many thanks.

Hairstyles Cool · 29 February, 2020 at 11:04 PM

Thank you for any other magnificent article. Where else could anybody get that type of info in such a perfect way of writing? I have a presentation next week, and I am on the look for such information.

Custom Segments Ionic 4 - CodigOaxaca · 28 June, 2019 at 12:22 AM

[…] Pretty inputs Ionic 4 […]

Dark register page Ionic 4 - CodigOaxaca · 1 July, 2019 at 8:20 PM

[…] Pretty inputs Ionic 4 Custom Segments Ionic 4 […]

Leave a Reply

Your email address will not be published. Required fields are marked *