View Selector

A view selector is used to allow the user to visualize data differently by toggling between supported view types.

The following is a list of recommended view types which can be utilized as needed:

  1. Overview (dashboard view of an object or a group of objects)
  2. List View
  3. Card View
  4. Table View
  5. Topology View

View Selector Detail

View Selector Detail

View Selector

Possible View Selector icons are listed below and may be used in any combination when two or more view types are supported. When used, icons should appear in the order indicated.

  1. Overview - fa-tachometer
  2. List View - fa-align-justify
  3. Card View - fa-th-large
  4. Table View - fa-table
  5. Topology View - pficon-topology

Image of View Selector Details

View Selector in Toolbar

View Selector icons are always placed in the top right corner. Example with three icons.

Image of Toolbar View Selector

Example with all five icons.

Image of Toolbar View Selector2

View Selector in Breadcrumb

Image of Toolbar View Selector2

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.