clay-link

A reusable Metal Clay component that renders an anchor tag with a set list of attributes. It provides a consistent API across components that use links.

Rendering a Link:

new metal.ClayLink({
    href: 'http://www.metaljs.com/',
    icon: {
        alignment: 'right',
        spritemap: 'path/to/svg/icons.svg',
        symbol: 'add-cell'
    },
    id: 'myLinkId',
    label: '<span>My Other Link Label</span>',
    target: '_blank'
});

Rendering a Link with a Click Event:

new metal.ClayLink({
    events: {
        click: {
            fn: 'toggle'
        }
    },
    href: 'http://www.metaljs.com/',
    icon: {
        alignment: 'right',
        spritemap: 'path/to/svg/icons.svg',
        symbol: 'add-cell'
    },
    id: 'myLinkId',
    label: '<span>My Other Link Label</span>',
    target: '_blank'
});

new metal.ClayLink({
    events: {
        click: {
            fn: function(event) {
                event.preventDefault();
                // do my custom stuff
            }
        }
    },
    href: 'http://www.metaljs.com/',
    icon: {
        alignment: 'right',
        spritemap: 'path/to/svg/icons.svg',
        symbol: 'add-cell'
    },
    id: 'myLinkId',
    label: '<span>My Other Link Label</span>',
    target: '_blank'
});

Setup

1. See metal-clay-components/README.md

2. Build the code:

npm run build

3. Watch task:

npm run watch

Contribute

We'd love to get contributions from you! Please, check our Contributing Guidelines to see how you can help us improve.