Zum Hauptinhalt springen

Stepper

Stepper in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Steppers und die verschiedenen Konfigurationsoptionen, die wir bereitstellen.

Zahl eingeben​

Sie können dem Benutzer erlauben, mithilfe der Stepper-Komponente eine Zahl einzugeben. Verwenden Sie dann den Handler, um die ausgewählte Zahl abzurufen.

import { Stepper } from '@jutro/components/new';

// ...

<Stepper
  label="Enter Number"
  name="Number picker"
/>;

Zahl mit Einschränkungen eingeben​

Sie können den Bereich der auszuwählenden Zahlen mit den Eigenschaften min und max einschränken. Dabei handelt es sich um inklusive Grenzen.

import { Stepper } from '@jutro/components/new';

// ...

<Stepper
  label="Enter Number"
  secondaryLabel="From 1 to 10 inclusive"
  min={1}
  max={10}
/>;

Benutzerdefinierte Validierungsmeldung​

Stepper stellt keine spezielle Validierungslogik zur Verfügung, bietet aber die Möglichkeit, die Validierung durch den Entwickler einzubeziehen und die stateMessages-Eigenschaft zur Anzeige der erforderlichen Fehlermeldung zu verwenden.

Dies ist ein Beispiel für die Handhabung der Validierung, wenn ein onChange-Ereignis ausgelöst wird. Geben Sie einen Wert unter 0 oder über 10 ein, ohne die Schaltflächen zum Testen zu verwenden.

export function StepperValidation() {
  const [validationMessages, setValidationMessages] = useState({});
  const max = 10;
  const min = 0;

  const onChange = useCallback((e, newValue) => {
    setValidationMessages({});

    if (newValue && (newValue > max || newValue < min)) {
      setValidationMessages({
        error: ['Value must be between 0 and 10'],
      });
    }
  }, []);

  return (
    <JutroWrapper>
      <div style={{ padding: '2rem 1rem' }}>
        <Stepper
          label="Enter Number"
          secondaryLabel="From 1 to 10 inclusive"
          onChange={handleChange}
          stateMessages={validationMessages}
          min={min}
          max={max}
        />
      </div>
    </JutroWrapper>
  );
}