Zum Hauptinhalt springen

Schaltfläche

Schaltfläche in Storybook
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Schaltfläche und den verschiedenen bereitgestellten Alternativen und Varianten. Unter Verwendung der verfügbaren Eigenschaften können Sie verschiedene Varianten einer Schaltfläche erstellen.

Einfache Schaltfläche​

Die Komponente Button ist im Paket @jutro/components verfügbar. Bei der Arbeit mit der Schaltfläche gibt es 4 Grundeigenschaften: label, icon, variant und onClick. In den meisten Fällen sind dies die einzigen Eigenschaften, die Sie verwenden werden.

import Button from '@jutro/components';

// ...

<Button
  label="Click me"
  icon="gw-bathtub"
  onClick={handleClick}
/>;

Schaltfläche nur mit Symbol​

Mit der Eigenschaft hideLabel können Sie eine Schaltfläche nur mit Symbol erstellen, auf der keine Beschriftung, sondern nur das ausgewählte Symbol angezeigt wird. Die Eigenschaft label wird für die aria-label der Schaltfläche verwendet.

<Button
  icon="gw-bathtub"
  label="this will be the aria-label text"
  onClick={handleClick}
  hideLabel
/>

In diesem Fall wird der Wert der Eigenschaft iconPosition ignoriert und das Symbol wird immer zentriert angezeigt.

Asynchrone Schaltfläche​

Wenn mit einer Schaltfläche eine Aktion ausgelöst wird und auf deren Beendigung oder auf ein spezifisches Ereignis gewartet werden muss, lässt sich dies wie folgt festlegen:

import React, { useEffect, useState } from 'react';
import { InlineLoader } from '@jutro/components';
import { Button } from '@jutro/components';
import styles from './AsyncButton.module.css';

function getFromAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Done!');
    }, 2000);
  });
}

export function AsyncButtonExample() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function someAsyncFunction() {
      await getFromAPI();

      setLoading(false);
    }

    if (loading) {
      someAsyncFunction();
    }
  }, [loading]);

  return (
    <Button
      label={loading ? 'Saving' : 'Save'}
      renderIcon={() => <InlineLoader loading={loading} />}
      iconPosition="right"
      disabled={loading}
      onClick={() => setLoading(true)}
    />
  );
}

Schaltfläche mit QuickInfo​

Tooltip wird durch die Kombination Tooltip + Button hinzugefügt

<Tooltip content="This is a tooltip">
  <Button label="Click me" />
</Tooltip>