Force.com Styled Components : In our previous Salesforce Tutorials we have learned about primitive components in salesforce.In this Salesforce Training Tutorial we are going to learn about Force.com Styled Components and what are the different categories in Force.com Styles Components.

What are Force.com Styled Components ?

Force.com Styled Components are those which provides styling to web pages by using CSS and Java Script and no prioir knowledge on CSS and Java Script is required for developers. When using force.com Styled components CSS and JavaScript properities are automatically interfaces with visualforce pages through some functions.

Force.com Styled Components in Salesforce

Styled Components are divided into  five categories based on their functions. They are

  • Page Structure.
  • Action Containers.
  • Table.
  • Pagination Components.
  • Notifications.

Page Structure :-Based on page structure we have four structural elements in Force.com. SectionHeader, pageBLockSection, PageBlock and pageBlockSectionItem are four page structure based components. These elements provide clear organizational structure, sections, subsections, labels and fields.

Action Containers :- PageBlockButtons, toolbar, toolbarGroup are the components based on Action Containers. Action Container provides buttons, links and different action functions to visualforce pages.

Table :- PageBlockTable is an element used to insert rows and Columns.

Pagination Components :- PanelBar, PanelBarItem, tab, tabpanel are the components based on pagination components.  Pagination components are used to show or Hide content, buttons and links dynamically.

Notifications :- PageMessage is a component used  to show error messages.