clay-link

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

1. 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.