Zum Hauptinhalt springen

Link

Link in Storybook

Beispiele​

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

Dieses Beispiel zeigt den Unterschied zwischen der Eigenschaft to und der Eigenschaft href. Damit können Sie to nutzen, um eine Ziel-URL in der Anwendung angeben 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>
  );
};

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, wenn 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>
  );
};

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>
  );
};