ux-anchor
Create anchors in your application
<ux-anchor>
is an internal helper component created for ractive-foundation.
It will throw custom events (with custom data) by the use of the attribute ontap
e.g.
<ux-anchor ontap="myEvent:myData1,myData2" … >content</ux-anchor>
Use Cases Manifest Anchor Button - primaryAnchor Button - primaryAnchor Button - primaryExtra detailsNormal {{#events.uxAnchor_9}}- {{this}}
{{/}}
{
"content": "anchor button",
"class": "button primary",
"ariaLabel": "Link",
"href": "#somelink"
}
{{#events.uxAnchor_10}}- {{this}}
{{/}}
{
"content": "anchor button",
"class": "button secondary",
"customEvent": "dosomething:Data"
}
{{#events.uxAnchor_11}}- {{this}}
{{/}}
{
"content": "Tertiary",
"class": "button tertiary",
"customEvent": "dosomething"
}
anchor text
anchor text
{{#events.uxAnchor_13}}- {{this}}
{{/}}
{
"content": "anchor link",
"href": "#somelink"
}
Semantic Event Mapping
anchorClicked - Event to fire when component is clicked
Semantic Data Model
ariaLabel - Set the aria lavel
class - Extra classes to apply to anchor
content - The content of the link if isDataModel is used
ontap - Throw this event rather than anchorClick (event parameters can be passed comma seperated after a colon at the end of the event name
href - The link fot the anchor tag (this or name is required)
role - Set the role of the anchor
tabindex - Set the tab index
target - Set the target of the link
title - Add a title to the link