Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

    1. Tabs: Multiple tabs can be defined in a layout. Each tab can have its contents laid out using a simple grid-layout using the tab-columns and tab-rows keys.

      In below example the Settings tab has a grid of 3 rows and 2 columns in which sections can be placed.

 

 

...

"layouts": [

 {

   "name": "default",

   "tabs": [

     {

       "name": "settings",

       "display-name": "Settings",

       "layout": {

         "tab-columns": "2",

         "tab-rows": "3",

         "sections": [ … ]

     }

   ]

 }

]

 

    1. Sections: Each section is defined inside a tab and specifies its location and size inside the tab's grid-layout by using the row-index, column-index, row-span and column-span keys. Being a container itself, it can further define a grid-layout for the sub-sections it contains using the section-rows and section-columns keys.

      In below example the MapReduce section occupies the first cell of the Settings tab grid, and itself has a grid-layout of 1 row and 3 columns.

 

 

"sections": [

 {

   "name": "section-mr-scheduler",

   "display-name": "MapReduce",

   "row-index": "0",

   "column-index": "0",

   "row-span": "1",

   "column-span": "1",

   "section-columns": "3",

   "section-rows": "1",

   "subsections": [ ... ]

 },

 …

]

 

...