Einer Ebene mit einer Code-Überschreibung Verhalten hinzufügen

Eine Code-Überschreibung ist eine Funktion aus einem der Code-Module Ihrer Website, die eine Ebene umschließt: eine Überschrift, einen Rahmen, ein Bild, eine Schaltfläche. Auf Ihrer veröffentlichten Website ergänzt die Funktion, was die Ebene allein nicht kann, etwa Klicks zählen oder auf den Mauszeiger reagieren. Die Ebene behält ihren Inhalt und ihr Design. Code-Überschreibungen kommen schrittweise in die Arbeitsbereiche, daher sehen Sie sie vielleicht noch nicht.

Eine Überschreibung hinzufügen

1. Wählen Sie eine Ebene aus. Überschreibungen funktionieren auf jeder Ebene außer einer Code-Komponente und der Seite selbst.
2. Öffnen Sie im Eigenschaftenbereich Code-Überschreibung. Sie erscheint, wenn Ihre Website mindestens ein Code-Modul hat.
3. Wählen Sie unter Modul das Modul.
4. Geben Sie unter Funktion den Namen der Funktion ein, die das Modul exportiert, zum Beispiel withHover, und drücken Sie die Eingabetaste. Der Name besteht aus Buchstaben, Ziffern, _ und $ und beginnt nicht mit einer Ziffer.

Die Überschreibung verwendet die neueste Version des Moduls. Version wechselt zu einer anderen. Überschreibung entfernen nimmt sie weg, ebenso Keine unter Modul.

Die Funktion schreiben

Die Funktion erhält die Ebene als Komponente und gibt eine Komponente zurück, die sie darstellt:

import { useState } from 'react';

export function withHover(Layer) {
  return function WithHover(props) {
    const [over, setOver] = useState(false);
    return (
      <Layer
        {...props}
        onMouseEnter={() => setOver(true)}
        onMouseLeave={() => setOver(false)}
        style={{ outline: over ? '2px solid' : 'none' }}
      />
    );
  };
}

Was sie an die Ebene weitergibt:

• Event-Handler wie onClick oder onMouseEnter. Ereignisse irgendwo in der Ebene erreichen sie.
• style als Objekt. Zahlen sind Pixel, wie in React.
• className, zu den eigenen Klassen der Ebene hinzugefügt.
• Die Attribute data-… und aria-… sowie title.

Alles andere, auch Kinder, wird ignoriert: Der Inhalt der Ebene bleibt so, wie Sie ihn gestaltet haben.

Wo sie läuft

• Auf Ihrer veröffentlichten Website, auch über Vorschaulinks. Der Canvas zeigt die Ebene so, wie Sie sie gestaltet haben.
• Jede Seite, die die Ebene zeigt, führt die Überschreibung aus, in jeder Sprache.
• Fehlt die Funktion oder schlägt sie fehl, bleibt die Ebene wie veröffentlicht, und der Rest der Seite funktioniert weiter.
• Eine Ebene, die eine Folie eines Karussells oder ein Block in einem Text ist, behält ihr Aussehen, verliert aber das Styling dieser Position.