Description
This is Aptar tiles component you can include it as a native element
Supported framework
Any java script framework include pure java script and native html
Version
1.0.3
How to use
In native java script and html apps
1- Include aptar-tiles.js script
<script src="aptar-tiles.js"></script>
2- Add "aptar-tiles" element to your html and attach drop event if you need to do something on drag/drop event such as store the new sort
<aptar-tiles id="tiles"> </aptar-tiles>
3- Populate tiles html attribute with list of your tiles
const =TILES = [
{
size: 'medium',
linkUrl: 'https://google.com',
icon: 'https://lh3.googleusercontent.com/DKoidc0T3T1KvYC2stChcX9zwmjKj1pgmg3hXzGBDQXM8RG_7JjgiuS0CLOh8DUa7as=s180-rw',
title: 'google link',
description: 'google link tile',
type: 'LINK'
},
{
size: 'medium',
linkUrl: 'https://twitter.com',
icon: 'https://upload.wikimedia.org/wikipedia/ar/thumb/9/9f/Twitter_bird_logo_2012.svg/280px-Twitter_bird_logo_2012.svg.png',
title: 'twitter link',
description: 'twitter link tile',
type: 'LINK'
}
]
}
const container = document.getElementById('tiles');
container.addEventListener("drop", function(event) {
drop(event);
});
container.setAttribute('tiles', JSON.stringify(TILES));
Note : you can bind attribute using any java script library such as jquery ,nockoutjs
In angular
1- run npm install aptar-tiles
2- In your angular module allow custom element schemas[CUSTOM_ELEMENTS_SCHEMA]
3- In angular.json in scripts array add "node_modules/aptar-tiles/aptar-tiles.js"
4- In your component add
<aptar-tiles id="tiles" [tiles]="TILES" (drop)="dropfunction($event)"></aptar-tiles>