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