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.

Last updated