UI Components

UI Components

A panel is a representation of what information will be sent to a user's display screen in given circumstances

5.5.1 Guideline

Certain guideline must be taken care while adopting tab panel which are listed as below.

  • Panel will act as an actual work place/container where all information will be displayed. Panel will have 2 section, header section and placeholder/Container section for the information.
  • Header section will have height fixed as 38PX. Background will be LighterGray(#f6f6f6)   or White(#ffffff)  . Border color will be Gray(#d8d8d8)   & size 1PX.
  • Title in the header section can associate with an icon which will be non-clickable and color of the icon will be DarkGray(#5c5c5c)  . Title font size will be 15PX, style Bold & Color will be NavyBlue(#120e5b)  .Title will be placed 15PX distance from the border.
  • Header section can have an icon based action for the same design specifications as described in the button section. In the header it will be in right side of the section.
  • Container will have background white and 1PX border around with color Gray(#d8d8d8)  
Parameters of Panel
Fig 5.5.1 Parameters of Panel

5.5.2 Behaviour

  • The icons in the right corner-minimize, maximize, move or component specific icons etc its behaviour as described in the respective sections.
  • Active State: The panel will have shadow with 10% transparency of color Black(#000000)  for user to know in which panel they are active when there are more than one panel in the same page.
Behaviour of panel
Fig 5.5.2 Behaviour of panel

5.5.3 Usage

  • The panel is the most important component. It will be used in web and OPS to display what information will be sent to a user's display screen.