A UI component for angular apps to display media and text content in tiles. Inspired by material design.

Height of the component is dependening on the width, as the main area will always be a square.

Using a script tag:

<script src="ee-tile.js"></script>
<script>
// Add eeTile as dependency to your module definition
var app = angular.module('YourApp', ['eeTile']);
</script>

Using browserify:

You need to browserify your source code with the brfs transform, if you require ee-tile from index.js source.

var app = angular.module('myApp', [])
require('ee-tile')(app)

The API of the component can be used via attributes on the directive, which has an isolated scope. The tile is devided in four areas:

We call the area with 1 and 2 "main" and the area of 3 and 4 "bottom bar".

You can provide options to the directive to change the default behavior regarding these areas:

<ee-tile options="{...}"></ee-tile>

You can set the background color of the main area using the background option. This will be used as the value for the css background property.

<ee-tile options="{background: 'red'}"></ee-tile>
<ee-tile options="{background: 'rgba(0,0,0,0.5)'}"></ee-tile>

To fill the main area with an image, use the image option to reference a URL. This will be used to set a css background-image url.

<ee-tile options="{image: '../cover.jpg'}"></ee-tile>

If you want an icon displayed on top of the main area, use the icon option. This must be a css class name or space delimited set of names which will be applied as classes to the icon element.

<ee-tile options="{icon: 'ion-information-circled'}"></ee-tile>

To set text to be displayed in the main area, use the text option.

<ee-tile options="{text: 'Lorem ipsum'}"></ee-tile>

The font-size is automatically set to fit and fill the main area; use fitText option to disable this behavior.

<ee-tile options="{text: 'Lorem ipsum', fitText: false}"></ee-tile>

If the text exceeds the length of 140 characters, it will automatically be cut off with an ellipsis. You can change the number of characters or disable this behavior with the ellipsis option.

<ee-tile options="{text: 'Lorem ipsum', ellipsis: 5}"></ee-tile>
<ee-tile options="{text: 'Lorem ipsum', ellipsis: false}"></ee-tile>

To set the background (color) of the bottom bar, use bar.

<ee-tile options="{bar: 'green'}"></ee-tile>

You can also disable the rendering of the bottom bar by passing false to the bar option.

<ee-tile options="{bar: false}"></ee-tile>

You can provide the text for the bottom bar in the barText option. Text will be fixed font-size and automatically cut off by an ellipsis.

<ee-tile options="{barText: 'Foo Bar'}"></ee-tile>

This is build using npm scripts.

npm run serve opens browser for development with livereload.

npm run dist creates browserify bundles in dist/ folder.

npm test runs the tests.

npm run watch executes npm test when index.es6 changes.