umbLayoutSelector

    When you have a list of items, you can use the umb-layout-selector directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table).

    Example of the layout selector

    The directive has three attributes:

    • layouts is used to indicate the available layouts that the user should be able to select.
    • active-layout is a reference to the layout currently being used.
    • on-layout-select is a callback function triggered when the user chooses another layout.

    For a view utilizing this directive:

    • The HTML could look something like this:

      <div ng-controller="myController">
          <umb-layout-selector layouts="layouts"
                              active-layout="activeLayout"
                              on-layout-select="selectLayout(layout)">
          </umb-layout-selector>
      </div>
      
    • You'd also need a controller for initializing the different values to be used for the directive:

      angular.module("umbraco").controller("myController", function ($scope) {
      
          // Declare the available layouts
          $scope.layouts = [
              {
                  name: "Grid",
                  icon: "icon-thumbnails-small",
                  path: "gridpath",
                  selected : true
              },
              {
                  name: "List",
                  icon: "icon-list",
                  path: "listpath",
                  selected: true
              }
          ];
      
          // Declare the function called by the directive when user chooses another layout
          $scope.selectLayout = function(layout) {
              $scope.activeLayout = layout;
              $scope.layouts.forEach(element => element.active = false);
              layout.active = true;
          };
      
          // Select the first layout
          $scope.selectLayout($scope.layouts[0]);
      
      });
      

    For each layout:

    • name property indicates the visual name of the layout (eg. used when hovering over the layout in the selector)
    • icon is the CSS selector for the icon of the layout.
    • path attribute indicates a sort of alias, and is used internally for comparing the layouts.
    • Each layout should also have a selected property indicating whether a particular layout is enabled, and thereby visible in the selector.