ngTile

ngTile Dashboard Tiles (AngularJS & Bootstrap)

Details

ngTile provides a simple way to display an overview of statistics. By default the tiles colors will randomly generate from a set of predefined colors, which can be overwritten.

A tile can be created as an individual or multiple by using the directives provided in the plugin.

Multiple tiles use ng-repeat so will require an array of objects that must be named using the naming convention specified below

Prerequisites

ngTile requires the following dependecies to function correctly:

Files to Download

The easiest way to install is with npm: 

npm install --save ngTile

Download via GitHub:

Code on GitHub

Links via unpkg cdn:

JS File | CSS File

AngularJS Setup

To import the plugin to angular simply declare the ngTile module in your Angular app.

angular.module("myApp", ["ngTile"])

Examples and Usage:

Individual Tiles

An individual tile is set up using the tag: 

<single-tile />

Attribute Usage Example
icon You may use whatever icon plugin you wish, the examples shown are using the Font Awesome icon set. 
icon="fa fa-gbp"
stat The stat attribute will render the value set as plain text. 
stat="£4560.75"
title The title attribute will render the title as plain text. 
title="Money Spent"
color The color attribute is used to set the hex color code for the tile. (This is used to stop generating a random color for the tile). 
color="#879998""
tile-type The tile type chosen will decide which type of tile is displayed e.g. small rectangle, large square 
tile-type="tile-sm-rect
link The link will set a href on the tile. 
link="https://www.google.co.uk"
target The target attr will set a target for the specified href. 
target="_blank"

Example HTML

<div class="row">
    <div class="col-lg-3">
        <single-tile icon="fa fa-users" stat="146" title="Users" color="#879998" tile-type="tile-lg-rect" link="ViewStats/2016-10-10" target="_self"/>
    </div>
</div>

Repeater Tiles

The repater tiles are set up using the tag: 

<tiles />

Attribute Usage Example
tile-params The attributes for the repeated tiles will be set up using an object. 
tile-params="settings1"

Object Properties:

Property Usage Required
data You will need to use the naming convention specfied below.
  • icon: Use the required icon class.
  • stat: Provide a value for the statistic.
  • title: Provide a title for the stat.
  • link: Provide a link for the tiles. (Optional)
  • target: Provide a target for the link. (Optional)
 Yes
colSize The repeated tiles need to be contained within a row, so a column needs to be specified. Yes
tileType Specify the type of tiles you want repeated. Examples on this page. Yes
colors Use this property to overwrite the provided colour pallet. For example use one color to set the repeater tiles to one color. No

Example Object:

$scope.tileSettings = {
        data: [{
                    icon: 'fa fa-search',
                    stat: '365',
                    title: 'Days',
                    link: "https://www.google.co.uk",
                    target: "_blank"
                },
                {
                    icon: 'fa fa-twitter',
                    stat: '15987',
                    title: 'Twitter Users'
                }],
        colSize: "col-lg-6",
        tileType: "tile-md-square",
        colors: ["#663399", "#2c3e50", "#95a5a6", "#26C281"]
    };

Example HTML

<div class="row">
    <tiles tile-params="tileSettings" />
</div>

Tile Types

Use the predefined css in the <pre> tags to set the specific tile.


Rectangle

tile-lg-rect
tile-lg-rect
tile-sm-rect

Square

tile-lg-square
tile-md-square
tile-sm-square

Circle

tile-lg-circle
tile-md-circle
tile-sm-circle

Default Colors

{{i}}