Sets aria-checked of the wrapped link element.
Same as linkLabel but takes the text content of the component as aria-label value. Is not taking the blank text content but takes display: none, aria-label and aria-hidden values of the child components into account. Also wraps the content in a div element with aria-hidden="true".
Classes added to the div element wrapping the content When "contentAsLabel" is set.
Does not create an actual "a" tag. Basically the same as "pseudo" but without any interaction.
The link only executes when it has already the focus.
The link only executes when it has already the focus and body has one of the classes 'is-xs', 'is-sm', 'is-md', 'is-lg' or 'is-xl', depending of the value provided.
Provide a comma separated string with the values 'xs', 'sm', 'md', 'lg' or 'xl'. Depending on the body class and provided value, the property "doubleClick" is adjusted.
The download attribute of the wrapped link.
The name of the file to be saved on the users computer.
The event "hyloRouterLinkClick" only fires when a "href" is set and in case of "doubleClick" on the second click. With this switch you force the event to fire every time.
Will load the page regularly as it would have been loaded by the browser by typing the url into the address field.
Forces the url to be loaded through the router. Cuts off the server and protocol of the url when set. Ignores the "target" when set.
"forceNewPage" takes precedence.
The "href" attribute of the link.
On default an url starting with a double slash is treated as it would be an internal link. The double slash and the host part of the url is removed so that only the internal path remains.
This option disables this behavior and the url is treated as external link.
Classes added to the wrapped link element.
If set, the wrapped link element gets the attribute aria-label with this value. Also wraps the content in a div element with aria-hidden="true".
The wai-aria role given to the wrapped link element.
The tabindex of the wrapped link element.
Sets the style to show no outline on focus.
If set, no actual link "a" tag is created. Everything is handled by javascript. Can be used to create a link inside another link.
If the linkTabindex is set to less than 0, "aria-hidden" is set to "true" automatically. You can override by setting "aria-hidden" to "false" explicitly.
With the link a query object can be submitted which will be passed along to the hylo-router push function if the hylo-router push function is used.
Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
E.g.: rel="nofollow noopener noreferrer"
Specifies the transition direction when navigating to another page using href. (ionic property)
E.g.: "back" ｜ "forward" ｜ "root" (default: "forward")
On default, the component is not showing a hylo-accessibility-focus border when it gains focus by click, only when tabbed into it. This property disables the default.
Adds a hylo-sr-only component to the wrapped link element. The content will be the same as in the aria-label of the hylo-router-link component and when not set, of the wrapped link element. If no aria-label is set, it will be set to the textContent of the component.
Might help if the screen reader does not read out the content of the component.
The "target" attribute of the link.
Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".
The emitted boolean value indicates whether the component gained or lost the focus.
Fires when the component is or looses active through a key action. The component also toggles the class "hylo-has-keyactive".
The emitted boolean value indicates whether the component gained or lost the active state.
Fires when the component gains or looses "mouseover". The component also toggles the class "hylo-has-mouseover". Does not fire when the "mouseover" was gained through a touch event.
The emitted boolean value indicates whether the component gained or lost "mouseover".
Fires when the hylo-router-link component catches a click event of its child components. The caught click event will be stopped if the hylo-router will be triggered.
Emits the original mouse event.
Generated using TypeDoc
An ion-router-link and anchor tag alternative which works together with a hylo-router component.
If a hylo-router component is present and the target property is either not set or set to "_self", the push function of the hylo-router component is used. Otherwise the wrapped anchor tag is used.
Adds accessibility functionality.
Preferred component to define internal and external links!
If the screen reader reads every single structural element inside the hylo-router-link component or (if used as menuitem) each menu item is counted as 1 of 1, try to numb the native semantics of the structural elements by giving the hylo-router-link component the role="presentation" (and linkRole="menuitem").
Best practice for using the component as a menu item is to set role="presentation", linkRole="menuitem", content-as-label and sr-only-label. You probably need to add a hylo-sr-pause component after each hylo-router-link menu item (accept the last one) as separator of the items. NVDA tends to group the menu items as one without the pause when in browse mode and it helps with windows navigator when navigating back in scan mode.
You can place the text of the link in "span" elements with the classes "hylo-content", "hylo-content-active", "hylo-content-hover", "hylo-content-focus" or "hylo-content-disabled" to provide different text for different states of the link.
If you use the link with a button style and if you place text and an element which is serving as an icon inside the button, the text needs to be enclosed by an element (preferable a "span" element) and any icon element other than the "hylo-icon"-element itself needs to be enclosed by an element (preferable a "span" element) with the css class "hylo-icon" to have the padding applied correctly. This is not necessary if you just add an icon element without any additional text.
You can force the state styles of the component by applying the classes "hylo-visited", "hylo-focus", "hylo-hover", "hylo-active", "hylo-disabled" respectively.
The wrapped anchor tag has the class "hylo-router-link-anchor". The wrapped pseudo tag has the class "hylo-router-link-pseudo" as well as the disabled tag.