BreadcrumbView documentation - SoftHai/responsive-views GitHub Wiki

#BreadcrumbView

##Introducing

The BreadcrumbView was designed to display the path of a hierarchical structure (like the normal Breadcrumb-Controls). The difference is that this don't reload the next level. It adds the next level to the view and buffers the upper views. This makes it easy and fast to go back in the hierarchy.

It supports also the browser-history (optional). To use the back button to navigate back in the structure.

Use Cases

Use case of this control are views where you want to display hierarchical structures (like categories, directories, .....).

Bigger Screen

At the beginning you start with a single view (Red). If you walk the hierarchy down by selecting an item from the list, you create historical items (gray). You can define the view of each state separate (in this case you can see, in the current view (red) it displays an header and a list. In the historical view it displays an rotated header with the name of the Item. Bigger Screens

You can define how many historical items are displayed in 4 size steps (LG,MD,SM,XS also orientated on the bootstrap sizes). By default it displays on XS - 0 history items, SM - 2 history items, MD - 4 history items and on LG - 8 history items. Additional you can define how width the history items should be (for each size step). In this case you don't need much width because it displays only an rotated header. But if you want to show more information in the history view, you can define an higher size. The Width of the current-view are the left width after (number of History items) * (Width of single history item) calculated.

To navigate back you can use different ways:

  • By clicking on an history items, you went back to this level (like clicking in an crumb in an breadcrumb-control).
  • By clicking the browser back button (if function activated)
  • By clicking an Button with a back logic
  • By using the build in Breadcrumb-control (see below). If displayed.

In all cases there is no reload necessary because the views are buffered.

Smaller Screen

Here you can see a smaller version of the same view above. You can see that it displays less history items and also it displays now a breadcrumb-control with the full path (it is configurable at which size the breadcrumb-control is displayed). Bigger Screens

Usage

In the moment there is only a JQuery Version of this control available.

JQuery API

You find an example here:

AngularJS API

Not yet implemented