Skip to Content
Product Information

Fundamental Library Releases UI Kit v0.10.0

The Fundamental Library team is excited to announce that it has released version 0.10.0 of its UI Kit!   

In case you haven’t heard of Fundamental Library, it’s a collection of UI libraries offering ready-to-use SAP Fiori components across multiple different frameworks such as HTML/CSS, Angular, React and Vue.

Find out more about the project here: Fundamental Library – What It Is and What It Is Not

In this release, the UI kit has been completely redesigned from the ground up. 15 components have been added, and the already existing components have been updated to match the latest SAP Fiori specifications.

Latest Components

Avatar

The avatar component displays an image, icon or user initials, and is used for user profiles, placeholder images, icons or business-related images i.e. product photos.

Menu

The menu component displays a dropdown menu with multiple options, which is usually triggered by a menu button.

Message Box

The message box is a special dialog that allows you to display messages to the user. Compared to the message popover, you can use the message box to display messages that are not related to a field on the UI, such as technical errors.

Message Toast 

A message toast is a small, non-disruptive popup for success messages that disappear automatically after a few seconds.

Notifications 

Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen.

Panel 

The panel is a container that is usually used for grouping and displaying content.

Responsive Table

The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.

Table Select Dialog

The table select dialog allows users to select from a comprehensive table containing multiple attributes or values. Within the dialog, users can access additional information about the items in the table without needing to select them first.

Table Personalization Dialog

The table personalization dialog can be used to modify the display and settings of a responsive table.

Side Navigation

The side navigation area can be used to display navigation structures with links that change the content in the main area.

Step Input

The step input control allows users to change input values in predefined increments (steps).

Tabs

Tabs are based on a folder metaphor and used to separate content into different sections.

Time Picker

The time picker allows the user to select a localized time. It can be used with touch, mouse, or keyboard input.

Toolbar

The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on.

Icon Tab Bar

The icon tab bar comprises a series of tabs that each link to a different content area or view. You can use it for navigation within an object, or as a filter.

(Note: The Table Select Dialog and Table Personalization Dialog components were designed for the Responsive Table.) 

There have also been improvements made to the organization of components in the Sketch file with respect to feedback from fellow designers using our kit. 

If you have any feedback and/or questions regarding the UI kit, please feel free to reach out to me via the comments section. I would be happy to connect and consider your ideas/suggestions, as well as answer any questions you may have!

 


SOURCES

 

https://experience.sap.com/fiori-design-web/

 


https://sap.github.io/fundamental/


 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.