New release: Mobiscroll 4.10

Announcements
1

41ad7936-1307-48ae-8826-c17919ad1943
41ad7936-1307-48ae-8826-c17919ad19433000×1500 72.8 KB

Advanced styling with Sass

With the new Sass variables we focused on making it super easy to customize the colors of the components. This can be done in two layers. First there are generic properties, like background color, text color and then there are theme specific overrides. Variables for each theme and theme variant can be fine-tuned. Don’t worry, the theme builder is still there and the custom themes in Sass are still possible. This is just a new layer of customization that developers deserve when working with Mobiscroll components.

Let’s take the form inputs as an example where colors were derived from the theme. Now you can customize the color for:

  • input background
  • input text
  • input border
  • input accent
  • input error

ios-input-variables
ios-input-variables2200×510 107 KB

iOS theme Sass variables for form inputs

material-input-variables
material-input-variables2200×540 105 KB

Material theme Sass variables for form inputs

Freeform entry for the numpad

Entering decimals was a bit limiting to say the least. The numpad always followed a template system. A template was defined and the user filled it out from right to left. That meant if someone didn’t want to enter a decimal value but the form allowed it, they still had to fill out the fractional places with zeroes. While it was possible to implement freeform entry, it required three blocks of code. We though that is not fair so we are introducing two new settings, entryMode and maxScale to make this super easy.


Template entry


Freeform entry

New events for the calendar and numpad

Introducing the onCellHoverIn and onCellHoverOut events for the calendar based components. Need to display additional information when hovering days in the calendar? You can use the new hover events to show a pop-up with content that is useful for the user and remain in context.

A new onInput event is triggered when the value of the Numpad changes by user interaction. You can use this event to build something like auto-suggest or trigger any custom logic based on the entered value.

Accessibility improvements

We added tab navigation for the event calendar events and role="row" to improve accessibility.

Read the full blog post

MOBISCROLL 4.10

Calendar

NEW

  • We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.

FIXED

  • We added the missing role="row" attributes on calendar rows for improved accessibility. (#473)

Eventcalendar

NEW

  • We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.

FIXED

  • We added the missing role="row" attributes on calendar rows for improved accessibility. (#473)
  • We made possible to navigate the event list using the Tab key for improved accessibility.

General

NEW

  • Added new scss color variables to all components, allowing color customizations across themes and components.

Measurements

NEW

  • We added the decimalSeparator setting to localize the decimal separator character.

Navigation

FIXED

  • We fixed an issue which caused the onItemTap event to fire twice if the navigation control was nested inside a Scrollview.

Number

NEW

  • We added the decimalSeparator setting to localize the decimal separator character.

Numpad

NEW

  • We added the onInput event, which runs every time the value is changed from the UI. This is useful to perform custom tasks when the user is typing the value, e.g. auto-suggest values for quick selection.
  • We added the possibility to enter decimal values freely without a pre-defined, fixed scale. This can be enabled through the entryMode setting that accepts template and freeform . The maximum length of the fractional part can be limited by the also newly introduced maxScale that defaults to 4.

Range

NEW

  • We added the onCellHoverIn and onCellHoverOut events, allowing to perform custom tasks when calendar days are hovered on desktop, e.g. showing a tooltip.

FIXED

  • We added the missing role="row" attributes on calendar rows for improved accessibility. (#473)

Select

FIXED

  • We fixed the position of the scrollbar in desktop mode and liquid layout (regression introduced in v4.9.1).

MOBISCROLL 4.10.1

Cards

FIXED

  • We fixed the border color of cards in ios, material and windows themes, to be consistent with the previous versions.

Eventcalendar

FIXED

  • We fixed a rendering issue which happened on Chrome, when labels were displayed.

Forms

FIXED

  • We fixed the form background color in ios theme, to be consistent with previous versions.
  • We fixed the border color of textfields, to be consistent with previous versions.

General

FIXED

  • We fixed an SSR rendering issue, introduced in 4.10.0. (#474)

Listview

FIXED

  • We fixed the background color of the listview items and headers, to be consisten with previous versions.

For the full changelog please visit our release history .

PS. If you’re coming from v3: We have composed an upgrade guide for moving from Mobiscroll 3 to Mobiscroll 4.