ptc-link

Visual

Overview

A ptcs-link is a link that is similar to the HTML <a> element, with specific styling.

Usage Examples

Basic Usage

<ptcs-link href="http://www.ptc.com" label="PTC"></ptcs-link>

Component API

Properties

Property	Type	Description	Default	Triggers a changed event
alignment	String	Controls the alignment of items. You can set it to "left", "right", or "center".	"left"	No
disabled	Boolean	Disables the link	false	No
singleLine	Boolean	Shows the link text on a single line.	false	No
href	String	Specifies the URL to open when the link is clicked		No
linkRouted	Boolean	Suppresses traversal of the href (to enable link routing)	false	No
label	String	The link label	"Link"	No
target	String	Target tab type: "new", "same" or "popup".	"same"	No
textMaximumWidth	String	The maximum width for the link text		No
tooltip	String	The tooltip that appears when hovering over the link		No
tooltipIcon	String	The icon for the tooltip		No
variant	String	The link variant.	"primary"	No
verticalAlignment	String	Controls the vertical alignment of the link text.
linkType	String	Controls the type of link. It can be either text or image.	"text"	No

NOTE : The below properties are for image links i.e. when linkType = 'image'

Property	Type	Description	Default	Triggers a changed event
leftImageSrc	String	The source / url of the left image.		No
rightImageSrc	String	The source / url of the right image.		No
leftImageSize	String	Specifies the size of the left image.	"auto"	No
rightImageSize	String	Specifies the size of the right image.	"auto"	No
rightImageAlt	String	A descriptive text of the Right image, mainly intended for screen readers.		No
leftImageAlt	String	A descriptive text of the left image, mainly intended for screen readers.		No

Events

Name	Data	Description
a-click	{ a: The <a> element within the ptcs-link, originalEvent: The originating event }	Triggered when the link is clicked

Methods

No methods

Styling

The Parts of a Component

Part	Description
link	The link element
label	The container for the label
images	The container for the images
left-image	The left image of link
right-image	The right image of link

State Attributes

Attribute	Description	Part
disabled	Disables the link	:host, link
variant	Specifies the variant. You can set the link type to "primary" or "secondary". The default is "primary"	:host