Pretty inputs Ionic 4

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

Leave a Reply

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