Floating labels and control over input styling is a basic expectation from a UI toolset. We have you covered.

This latest release brings new options for creating forms with the introduction of input and label types. We have also added a couple of new styling classes for text and improved usage of the Navigation component in React and Angular and Ionic. Let’s dig into all three topics for more details.

New input styling

The same way as every person and company has a slightly different shape and size so does software too. So why should every website and app look the same? It shouldn’t and that’s why we are introducing new styling options to form fields.

We’re pushing the inputs and labels to three-three variations: Underline, Box and Outline for inputs and Inline, Stacked and Floating for labels. Floating labels were one of our most requested features and honestly it was there for some time. Since Google made it a thing with the Material theme and the adoption is widespread we knew we had to do it. Good news, form now on floating labels are supported for all themes.

This should give you the necessary tools to create unique layouts that fit with your vision and brand. Best of all, it is available as a free upgrade, since forms are part of Mobiscroll Lite, so go grab it and start building great things.

Head over to the demos and take a look at the different inputs and labels.

Improvements to the navigation component

Who wouldn’t be happy if something became much easier to do. That just happened with the way you can build navigation with Mobiscroll in Angular, Ionic and React apps. Starting with 4.4 it is easy to use the built in routing logic of the framework and the navigation component.

We’ve also added responsive support that lets you build navigation that behaves differently on different sized screens. You can have a hamburger menu on mobile and a tab navigation on larger screens all with just using a single instance. You can give responsive navigation a try with this new demo.

Text style modifiers

Easily control the size of the text with new modifiers from small to extra large. You can also visually push the text into the background with the new muted modifier. This helps in establishing a visual hierarchy without the need to hand-pick colors and manually set them.

To learn more, explore the demos, browse the documentation and see the changelog. We can’t wait to hear about what you’ll build with the new tools and components.

As always, this release is available for download to all customers who have an active maintenance. You can also update through NPM if that is how you get your libraries.