Nutritious Polygonal Meatball

    aptar-tiles

    1.0.3 • Public • Published

    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>
    

    Keywords

    none

    Install

    npm i aptar-tiles

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    396 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar