Gedrag toevoegen aan een laag met een code-overschrijving

Een code-overschrijving is een functie uit een van de codemodules van je site die een laag omhult: een titel, een frame, een afbeelding, een knop. Op je gepubliceerde site voegt de functie toe wat de laag zelf niet kan, zoals klikken tellen of op de aanwijzer reageren. De laag houdt haar inhoud en haar ontwerp. Code-overschrijvingen komen in stappen naar de werkruimtes, dus misschien zie je ze nog niet.

Een overschrijving koppelen

1. Selecteer één laag. Overschrijvingen werken op elke laag, behalve een codecomponent en de pagina zelf.
2. Open in het eigenschappenpaneel Code-overschrijving. Die verschijnt als je site minstens één codemodule heeft.
3. Kies bij Module de module.
4. Typ bij Functie de naam van de functie die de module exporteert, bijvoorbeeld withHover, en druk op Enter. De naam bestaat uit letters, cijfers, _ en $, en begint niet met een cijfer.

De overschrijving gebruikt de nieuwste versie van de module. Met Versie zet je haar op een andere. Overschrijving verwijderen haalt haar weg, net als Geen bij Module.

De functie schrijven

De functie krijgt de laag als component en geeft een component terug die haar toont:

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

Wat ze aan de laag doorgeeft:

• Event handlers, zoals onClick of onMouseEnter. Gebeurtenissen overal in de laag komen erbij aan.
• style, als object. Getallen zijn pixels, zoals in React.
• className, toegevoegd aan de eigen klassen van de laag.
• Attributen data-… en aria-…, en title.

Al het andere, ook kinderen, wordt genegeerd: de inhoud van de laag blijft zoals je ze ontwierp.

Waar ze werkt

• Op je gepubliceerde site, ook via previewlinks. Het canvas toont de laag zoals je ze ontwierp.
• Elke pagina die de laag toont, voert de overschrijving uit, in elke taal.
• Ontbreekt de functie of mislukt ze, dan blijft de laag zoals ze gepubliceerd is en werkt de rest van de pagina gewoon.
• Een laag die een dia van een carrousel is, of een blok in een tekst, houdt haar uiterlijk maar verliest de stijl van die plaats.