Diggi Docs

Link

Links sind kurze Textelemente, die einen direkten Sprung auf eine andere Seite erlauben oder weiterführende Informationen anzeigen. Links führen zu einer anderen Ansicht oder einer anderen Domain. Die Schriftgröße ist abhängig vom Kontext, in den der Link eingebunden wird.

Eigenschaften

Name	Type	Default Value	Description
ariaLabel	string	undefined	Defines a string value that labels this element
type	'simple' \| 'primary' \| 'inline' \| 'integrated' \| 'button' \| 'button-secondary'	undefined	Type of link
href	string	undefined	URL of the page the link goes to
label	string	undefined	Label to be displayed
title	string\|undefined	undefined	title to be displayed
disabled	boolean	false	Link is disabled or not
target	'_blank' \| '_self' \| undefined	undefined	Specifies where to open the linked document
role	string	undefined	Used to identify an element that creates a hyperlink to a resource that is in the application or external.
tabindex	undefined	undefined
icon	string	undefined	Icon to Display
iconPosition	'left' \| 'right'	undefined	Icon should be positioned on the left or right side
isUiIcon	boolean	false	Whether or not it's an icon from the UI font or not
isHighlighted	boolean	false	Underlined on hover or not? Usually used with 'integrated' style
size	's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl'	undefined	Size of the link
preloadData	"hover" \| "tap" \| undefined	undefined	The type of data preload. "hover" means that preloading will start if the mouse comes to a rest over a link. "tap" means that preloading will start as soon as a touchstart or mousedown event is registered.
preloadCode	"eager" \| "viewport" \| "hover" \| "tap" \| undefined	undefined	Specifies when and what to preload for the link
reload	true \| "" \| "off" \| null \| undefined	undefined	If true a data-sveltekit-reload attribute will be added to this link. It will cause a full-page navigation when the link is clicked.
replaceState	true \| "" \| "off" \| null \| undefined	undefined	If true it won't create a new entry in the browser's session history.
noScroll	true \| "" \| "off" \| null \| undefined	undefined	If true it will prevent scrolling after the link is clicked.
style	string	undefined	Additional css styles

Events

Name	Description
click	Forwarded click
click	Forwarded click

Beispiele

Default Link

Dies ist die Standardausprägung für Links die nicht besonders ausgezeichnet werden müssen. Achtung, in Text-Absätzen darf der Default Link nicht eingesetzt werden. Damit Links in Text-Absätzen als sollte für alle Menschen erkennbar sind, muss hier der Inline Link verwendet werden.

Link label

Link mit Icon

Der Icon Link wird eingesetzt, um ein Link-Ziel spezifischer auszuzeichnen, z. B. einen Download Link.

Link label

Link primary 6xl

Der Primary Link wird für die wichtigste Funktion eines Screens verwendet und grenzt sich durch den nachstehenden Pfeil von den anderen Link-Typen ab.