Link

Link in Storybook

Verwendung

Überblick

Ein Link ist eine Komponente, die als Navigationselement dient. Er kann in einer Textzeile oder als eigenständiges Element erscheinen. Ein Link kann an ein Symbol, ein Bild oder einen Text angehängt werden.

Zu verwenden

Um Benutzer zu einem anderen Ort zu navigieren – entweder auf derselben Seite oder zu einer anderen Seite oder Website.

Nicht zu verwenden

• Um Daten zu übermitteln oder Maßnahmen zu ergreifen. Verwenden Sie die Schaltflächenkomponente.
• So erstellen Sie die Breadcrumbs einer Website. Verwenden Sie eine dedizierte Breadcrumb-Komponente.

Verwenden Sie eine Link-Komponente, wenn die Aktion nur eine Navigation ist, auch wenn sie Benutzer zu einem anderen Ort führt, an dem sie die Aufgabe ausführen.

Verwenden Sie keine tertiäre Schaltfläche für die Navigation, da dies für die Benutzer verwirrend sein könnte. Tertiäre Aktionsschaltflächen eignen sich besser zum Ausführen von Aktionen im aktuellen Kontext oder auf der aktuellen Seite.

Typen

Es gibt 2 Arten von Links: eigenständige und Inline-Links.

Eigenständige Links werden allein oder direkt nach dem Inhalt angezeigt.

Inline-Links werden in einem Textkörper angezeigt, z. B. in einem Satz oder Absatz.

Formatierung

Aufbau

Die Linkkomponente besteht aus den folgenden Elementen:

1. Beschriftung: Beschreibender Text, der den Kontext liefert und erklärt, wohin der Link führt.
2. Symbol (optional): Visuelle Anzeige, mit der Benutzer leichter erkennen können, was nach dem Klicken passiert.

Externe Verknüpfungen

Verwenden Sie das Symbol gw-open-in-new, wenn ein Link den Benutzer außerhalb einer App navigiert.

Verwenden Sie das Symbol `gw-open-in-new` für externe Links.

Verwenden Sie keine anderen Symbole für externe Links.

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Eigenständige Links

Der Linktext sollte kurz und prägnant sein. Verwenden Sie Substantivphrasen, Verbphrasen oder kurze beschreibende Phrasen, die relevante Schlüsselwörter enthalten, die sich auf das Ziel des Links beziehen.

Verwenden Sie keine vollständigen Sätze für eigenständige Links.

Stellen Sie einen spezifischen Linktext bereit, der den Benutzern hilft, zu wissen, was sie erwartet.

Verwenden Sie keine allgemeinen Phrasen wie „Erfahren Sie mehr“ oder „Klicken Sie hier“, da sie keinen Kontext haben und mehrdeutig sein können.

Inline-Links

Der Linktext muss genügend Kontext enthalten, um den Zweck oder das Ziel des Links zu kommunizieren, ohne sich auf den umgebenden Kontext zu verlassen. Viele Benutzer lesen den angrenzenden Inhalt nicht. Aus diesem Grund sollten die in Links verwendeten Begriffe verständlich sein, wenn sie aus dem Zusammenhang gerissen und allein gelesen werden. Streben Sie kurze, aber aussagekräftige Linkphrasen an, die den verlinkten Inhalt mit relevanten Schlüsselwörtern anzeigen.

Verwenden Sie einen beschreibenden Linktext, der die Benutzer über den Inhalt informiert, den sie finden werden.

Verwenden Sie keine vagen oder allgemeinen Begriffe wie „dies“, „diese“ oder „diesen“.

Versuchen Sie, ein Gleichgewicht zu finden. Der Linktext sollte prägnant, aber beschreibend genug sein, um auch außerhalb des Kontexts Sinn zu ergeben.

Setzen Sie keinen ganzen Satz oder Textblock in einen Link ein. Dies kann Benutzer von Screenreadern frustrieren, die sich den gesamten Link anhören müssen.

Platzieren Sie Links am Ende eines Satzes. Dadurch bleibt die Syntax erhalten.

Vermeiden Sie es, Links in der Mitte von Sätzen zu platzieren, da sie ablenken können. Sie unterbrechen den Fluss für Personen, die den Text scannen, so dass sie anhalten, um um den Link herum zu lesen. Dies kann auch das Lesen für autistische Benutzer schwieriger machen.

Verwenden Sie aussagekräftige Beschriftungen

Links müssen spezifisch und beschreibend sein und für sich allein stehen können. Schreiben Sie einen Linktext, damit Ihre Benutzer auch dann vollständig verstehen können, was sie unter diesem Link finden, auch wenn sie nur die Linkbeschriftung und nichts von dem umgebenden Text lesen.

Verwenden Sie einen kurzen, aber beschreibenden Linktext, der die relevantesten Schlüsselwörter über das Ziel des Links in den Vordergrund stellt.

Verwenden Sie nicht die URL oder den Domänennamen als Linkbeschriftung. Beiden fehlt ein klarer beschreibender Wert, was es für die Nutzer schwierig macht, vorherzusagen, wohin der Link sie führen wird.

Fassen Sie sich kurz

Es gibt zwar keine maximale Wortzahl für Links, aber jedes Wort, das im Link enthalten ist, sollte das Ziel unterstützen, Benutzern zu helfen, das zu finden, was sie brauchen. Kommen Sie auf den Punkt, damit die Benutzer den Link schnell verstehen, während sie die Seite scannen und verarbeiten. Versuchen Sie, Links mit den wichtigsten Wörtern zu versehen.

Seien Sie prägnant und stellen Sie Links mit informationstragender Sprache in den Vordergrund.

Verschwenden Sie keine Worte und verschieben Sie den informativen Text nicht bis zum Ende.

Link-Interpunktion

Eigenständige Links sind keine vollständigen Sätze und haben keine Interpunktion am Ende.

Wenn sich ein Inline-Link am Ende eines Satzes befindet, fügen Sie das Satzzeichen nicht in den Link ein.

Behandeln Sie eigenständige Links als kurze Sätze.

Fügen Sie eigenständige Links keine abschließenden Satzzeichen hinzu.

Groß-/Kleinschreibung

Beachten Sie beim Schreiben von Linktext die Groß-/Kleinschreibung. Beginnen Sie nur die folgenden Wörter mit einem Großbuchstaben:

• Den ersten Buchstaben des ersten Wortes in einem Satz oder einer Wortgruppe
• Substantive und Eigennamen (wie Marken, Produkte und Services) entsprechend den deutschen Orthografieregeln

Weitere Informationen zum Implementieren der Groß-/Kleinschreibung finden Sie unter Groß-/Kleinschreibung.

Beachten Sie die Groß-/Kleinschreibung in Linktexten.

Schreiben Sie nicht alle Wörter in Links groß.

Verhalten

Zustände

Die Link-Komponente hat die Statuswerte für aktiviert, schwebend, aktiv, Fokus, deaktiviert und besucht.

Visualisierung	Zustand	Beschreibung
	Aktiviert (Standard)	Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist.
	Schwebend	Zeigt an, dass der Benutzer den Mauszeiger über dem Element platziert hat (nur Desktop). Links sind unterstrichen, wenn der Mauszeiger darüber schwebt.
	Aktiv	Gibt eine Rückmeldung darüber, dass der Benutzer auf das Element klickt oder tippt.
	Fokussiert	Zeigt an, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Sprachbefehl.
	Deaktiviert	Teilt dem Benutzer mit, dass das Element derzeit nicht interaktiv ist.
	Besucht	Gibt an, dass der Benutzer zuvor auf den verlinkten Inhalt geklickt und ihn angezeigt hat.

Interaktionen

Maus

Benutzer können den Link öffnen, indem sie auf eine beliebige Stelle der Beschriftung oder des zugehörigen Symbols klicken.

Tastatur

Durch Drücken der Enter-Taste wird der Link aktiviert und der Fokus auf das Ziel des Links gesetzt.

Screenreader

Beim Fokussieren wird die Rolle „Link“ von einem Screenreader ausgegeben, ebenso wie ihr textlicher Wert, z. B. „Link, weitere Informationen“ etc. Wenn Sie den deaktivierten Link verwenden, wird der ARIA-Status auf aria-disabled='true' gesetzt. Der Status wird von einem Screenreader als „abgeblendet/nicht verfügbar“ etc. wiedergegeben. Wenn der Link aktiv wird, ändert sich der Status von aria-disabled zu „false“.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie bei der Verwendung dieser Komponente in Ihren Anwendungen die folgenden Anweisungen:

• Vergewissern Sie sich, dass alle Farbänderungen den erforderlichen Schwellenwert von 4,5:1 einhalten.
• Vermeiden Sie die Verwendung von Wörtern und Wortgruppen wie „Hier klicken“ oder „hier“ als Linktext. Erstellen Sie stattdessen einen aussagekräftigen Linktext, der für sich allein genommen Sinn ergibt.

Code

Importanweisung

import { Link } from '@jutro/router/';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

children

Typ

React.ReactNode | IntlMessageShape

Beschreibung

The children elements to render inside the Link.

className

Typ

string

Beschreibung

CSS class name for this component.

disabled

Typ

string

Beschreibung

If set to true, the link is rendered in a disabled state.

history

Typ

historyPropTypes

Beschreibung

Specific router history to use for navigation. It is imported from the history npm package. You can learn more here.

href

Typ

IntlMessageShape

Beschreibung

The destination path when the link is clicked. Use this for paths external to the application.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconPosition

Typ

'left' | 'right'

Beschreibung

Indicates where the icon is placed relative to the text.

Standardwert

'left'

inline

Typ

boolean

Beschreibung

If set to true, the link is displayed inline and not as a block element.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

onKeyPress

Typ

() => void

Beschreibung

Callback when the link is focused and keyboard key pressed.

rel

Typ

string

Beschreibung

The relationship attribute of the linked URL. Used only for external paths.

target

Typ

string: _blank | _self | _parent | _top | framename

Beschreibung

Where to display the linked URL. Used only for external paths.

to

Typ

IntlMessageShape | { pathname?: IntlMessageShape; hash?: IntlMessageShape }

hash

Typ

IntlMessageShape

Beschreibung

Hash to put in the URL.

pathname

Typ

IntlMessageShape

Beschreibung

Link path.

Beschreibung

The destination path when the link is clicked. Use this for paths internal to the application.

activeClassNameVerworfen

Typ

string

Beschreibung

CSS class name for the element when it is active.

exactVerworfen

Typ

boolean

Beschreibung

When set to true, the activeClassName is only applied if the location is matched exactly.

idVerworfen

Typ

string

Beschreibung

Unique identifier for the component.

textClassNameVerworfen

Typ

string

Beschreibung

CSS class name for the link text.

Hooks

Für Link sind keine Hooks verfügbar.

Übersetzungsschlüssel

Mit der Komponente Link sind keine Übersetzungsschlüssel verknüpft.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Folgende Optionen sind verfügbar:

• Design-Token
• className-Eigenschaft
• Übergeben nativer HTML-Attribute
• Ref mit imperativen Handlern
• Native Ereigniseigenschaft

Beispiele

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponente Link verwenden können.

Basislink

Dieses Beispiel zeigt den Unterschied zwischen der Eigenschaft to und der Eigenschaft href. Sie können to nutzen, um eine Ziel-URL in der Anwendung anzugeben, und href zur Navigation zu internen und externen URLs. Wenn Sie die Eigenschaft disabled hinzufügen, können die Links nicht angeklickt werden.

Mit der Eigenschaft icon können Sie ein benutzerdefiniertes Symbol für den Link festlegen.

import React from 'react';
import { Link } from '@jutro/router/';

export const BasicLink = () => {

  return (
    <div>
        This is an <Link to="/link#examples" icon="gw-bathtub">internal link</Link>.
        This is an <Link target="_blank" href="https://docs.guidewire.com/">external link</Link>.
        This is a <Link disabled>disabled link</Link>.
    </div>
  );
};

Verwalten von Link-Ereignissen

Die Link-Komponente kann Ereignisse mithilfe der Eigenschaft onClick behandeln, wenn der Benutzer auf den Link klickt, oder mit onKeyPress, wenn der Benutzer eine Taste drückt, während der Fokus auf dem Link liegt.

import React, { useState } from 'react';
import { Link } from '@jutro/router/';

export const EventsLink = () => {
  const [linkText, setLinkText] = useState("Click me!");
  const handleClick = () => {
    setLinkText("Clicked");
  }; 
  const handlePress = () => {
    setLinkText("Pressed");
  };      
  return (
    <Link
        onClick={handleClick}
        onKeyPress={handlePress}
    >
        {linkText}
    </Link>
  );
};

Untergeordnete Link-Elemente

Sie können jedes Element innerhalb eines Links platzieren, damit es angezeigt wird, wie in diesem Beispiel, in dem ein Link ein strong-Element enthält. Das Hinzufügen bestimmter Elemente, z. B. eines Eingabefelds oder eines Links innerhalb eines Links, kann jedoch die Barrierefreiheit beeinträchtigen.

import React from 'react';
import { Link } from '@jutro/router/';

export const ChildrenLink = () => {
      
  return (
    <div>
        <Link>
            <strong>This is a child element.</strong>
        </Link>
    </div>
  );
};

Änderungsprotokoll

10.1.0

• Unterstützung für Design-Token wurde hinzugefügt.

• Die folgenden Eigenschaften sind veraltet:

  • id
  • activeClassName
  • textClassName
  • exact