Templates

Starting from the standard elements of the “Components” post, we present a variety of templates that have been developed with the most common functionalities and components to use in different projects. This allows us to have a library of screens already optimized for YUMI and ready to use.

All these screens have been created with the right measurements and sizes to work on the YUMI device.

The templates are divided into the following groups:

LOGIN

We will find a generic screen with an image and buttons that can be used as an onboarding, connection pages, touch to start screen or even to help the user know how to present their payment on the screen.

Also, we will find two screens on the right that represent the steps of a traditional login access with a text field and a password.

INFORMATIVE SECTIONS

These examples can represent a news screen, highlights, catalog of products or as the base for developing a home screen on our YUMI device, thanks to the three different cards that we have in the templates that can be used depending on the information to be displayed.

DETAILS AND CALENDAR

To create a detail product screen or to use it as an informative screen we have two different options below.

The first one with a simple card to show the information with a button that opens a calendar as a popup.  And another with all the information in full screen with a bigger image.

FORMS AND TIME PICKERS

When we talk about the forms, we know that there are different requirements. However, in our templates we have created a simple form with two inputs and a drop-down menu that shows us the “Time Picker” in a floating window to select the time manually.

Starting from this templates we can customize our form screens by adding more components from our library according to the project needs.

SELECTOR AND LIST

In the following screens we will find different options of how to use panel expansions with inside forms. In our framework base file we also have modal bottom sheets and list of options adapted to YUMI specifications.