WEBIX JAVASCRIPT LIBRARY BLOG

UI development best practices, front-end programming tips and news to speed up your Web development.

Follow us:

Write for us: learn about our guest posts guidelines.

The Webix way of positioning: how to put everything in its right place

Day by day Webix evolves and dozens of new features appear with every release. But while the framework is constantly improved, something always stays the same.

Let’s talk about the very basic and the most important Webix feature – component positioning and sizing.

1_form_initial

Live demo

Layout. Basics.

The main Webix way of the element positioning is dividing the page into rows and columns.

The basic layout can  be created with the help of the same-name Layout widget. And you can place any of the numerous Webix widgets into any Layout cell:

Coming soon: Webix update 3.2

Hey guys!

I’m sure that all of you already feel the smell of an upcoming spring, while we definitely feel the approach of the first major update in this year – Webix 3.2, which is scheduled for release on February 24th.

webix release 3.2

 

What we are going to share:

  • SpreadSheet widget – a new great widget, which is similar to Excel or spreadsheet in Google docs;
  • undo functionality – to revert data changes within all data components;
  • export to PDF for all data components;
  • and, of course, plenty of fixes and small improvements.

Oscar for DiCaprio – Visual Designer for you!

Hey guys!

It is the last month of the winter and only 25 days are left before Oscar, the main American awards ceremony.

We could not pass by such an event. And if you hope and believe, the same as we do, that Leonardo DiCaprio, not the bear, will get the Oscar, click “Like” and “Share”.

Visual designer

 

At the end of the month, in case this talented actor wins, all participants will get an annual access to the PRO edition of our Visual Designer, which is scheduled for release exactly at the end of February.

Navigate your way. Sidebar and Sidemenu

Hey guys, let us check today what Webix offers to make our lives easier during app navigation. I bet that there’s something worth a closer look.

Since the launch of the library its users had a standard Menu at their disposal with the possibility of  placing items horizontally or vertically (too simple). But not very long time ago the developers went further and ended up with two handsome widgets created with user-friendly navigation in mind – Sidemenu and Sidebar.

So, let’s explore the widgets’ functionality to find out the use cases that are more suitable for each of them.

Basically, Sidebar can be initialized on the page with the following code:

webix.ui({
      view: "sidebar",
      data: [
           {id: "dashboard", icon: "dashboard", value: "Dashboards",  data:[
               { id: "dashboard1", value: "Dashboard 1"},
               { id: "dashboard2", value: "Dashboard 2"}
        ]},
         ...
        ]
});

And you get: 

sidebar

Live demo

1 5 6 7