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>