BlogContacts
BlogGamesContacts

{{item}}

Grid-list toggle button

12.01.2020

AngularJS, Material

Source code
A simple lightweight solution, which is built using a AngularJS Material library without any directives. It uses svg images and IMHO looks like a Material design, at least it fits my blog. See the sample below:
Digit:{{$index}}Hindu-ArabicAD 500
Consider the code snippet for this toggle button. When the user clicks 'listView', then container's layout becomes a 'column' without wrapping, and when user clicks 'gridView', it becomes a 'row' with line wrapping.
JavaScript
'use strict';
application.controller('gridListCtrl', ['$scope',
    function(scope) {
        scope.toggleGridList = function(newValue) {
            if (newValue === "gridView") {
                scope.value = 'gridView';
                scope.layout = 'row';
            } else {
                scope.value = 'listView';
                scope.layout = 'column';
            }
            sessionStorage.setItem('grid-list-toggle-button', scope.value);
        };
        scope.onInit = function () {
            scope.toggleGridList(sessionStorage.getItem('grid-list-toggle-button'));
        };
    }
]);
CSS
.grid-list-toggle {
    padding: 0 !important;
    margin: 8px;
    border-radius: 2px;
    border: 1px solid #c8e6c9;
}
.grid-list-button {
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}
.grid-list-button.selected {
    background-color: #c8e6c9;
}
HTML
<!-- Main content of the page -->
<div ng-controller="gridListCtrl" ng-init="onInit();">
    <div layout="row" layout-padding md-whiteframe="1" layout-align="start center">
        <span>Some text</span>
        <!-- Divider -->
        <div flex></div>
        <!-- Grid-list toggle button -->
        <div layout="row" layout-padding class="grid-list-toggle">
            <md-button class="grid-list-button" ng-click="toggleGridList('listView')" aria-label="List"
                       ng-class="value == 'listView' ? 'selected' : ''">
                <div style="height: 30px">
                    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'>
                        <!-- long-long svg path -->
                    </svg>
                </div>
            </md-button>
            <md-button class="grid-list-button" ng-click="toggleGridList('gridView')" aria-label="Grid"
                       ng-class="value == 'gridView' ? 'selected' : ''">
                <div style="height: 30px">
                    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='30' height='30'>
                        <!-- long-long svg path -->
                    </svg>
                </div>
            </md-button>
        </div>
    </div>
    <div layout="column" md-whiteframe="1" style="min-height: 330px; max-height: 330px;">
        <div layout="{{layout}}" layout-padding style="overflow-y: auto;"
             ng-class="value == 'gridView' ? 'layout-wrap' : 'layout-nowrap'">
            <div layout="row" layout-padding layout-align="start center" class="grid-list-toggle"
                 ng-repeat="number in [].constructor(10) track by $index">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
                    <!-- long-long svg path -->
                </svg>
                <div layout="column">
                    <span>Some description</span>
                    <span>Second line</span>
                </div>
            </div>
        </div>
    </div>
</div>
Privacy policy
Back to Top