Editor X: Een aangepast element aan je website toevoegen
Leestijd 5 minuten
Editor X schakelt over naar Wix Studio, ons nieuwe platform voor bedrijven en freelancers.Lees meer over Wix Studio
Verbeter je website met je eigen ontwerpfuncties en CSS-mogelijkheden met behulp van aangepaste elementen. Je kunt elke Javascript-component toevoegen door een aangepast element te koppelen aan een server-URL of een Velo-bestand. Indien nodig kun je rechtstreeks vanuit Editor X meer kenmerken instellen.
Lees meer over:
Voordat je begint:
Zorg ervoor dat je website een Premiumpakket heeft en een gekoppeld domein zonder Editor X-advertenties. Lees meer
Wat zijn aangepaste elementen?
Met aangepaste elementen kun je je eigen HTML-tags gebruiken op je Editor X-website. Deze elementen werken in alle ondersteunde browsers en kunnen worden gebruikt met elke JavaScript ES6-bibliotheek of -framework dat werkt met HTML 5.
Voorbeelden van handige aangepaste elementen
Codevereisten
Tips:
- Je kunt aangepaste elementen van externe bronnen gebruiken. Zorg er wel voor dat je de Tagnaam in Eigenschappen bijwerkt wanneer je het aangepaste element aan je pagina toevoegt.
- De prestaties van je aangepaste element zijn afhankelijk van de implementatie.
Het aangepaste element toevoegen en instellen
Voeg zoveel aangepaste elementen aan je website toe als je nodig hebt. Nadat je een aangepast element naar je pagina hebt gesleept, definieer je de bron ervan (server-URL of een Velo-bestand) en geef je het een tagnaam om te verschijnen in het paginaregister.
Laat me zien hoe
.Gebruik het Inspector-paneel
om ervoor te zorgen dat je aangepaste element er goed uitziet op alle breekpunten. Je kunt de grootte, het dokken, de uitlijning en meer aanpassen.
om ervoor te zorgen dat je aangepaste element er goed uitziet op alle breekpunten. Je kunt de grootte, het dokken, de uitlijning en meer aanpassen. Let op:
Standaard verschijnen aangepaste elementen in het customElements-register van je pagina. De tagnaam die je invoert voor je aangepaste element definieert de naam in dit register.
De kenmerken van het aangepaste element instellen
Maak verdere aanpassingen aan de eigenschappen en het gedrag van je element door HTML-kenmerken in te stellen. Met het Element kenmerken-paneel kun je kenmerken rechtstreeks vanuit Editor X toevoegen, bewerken en verwijderen, zodat je de eigenlijke code niet hoeft te openen.
Laat me zien hoe
Belangrijk:
De code voor je aangepaste element moet de gedefinieerde attributen erkennen en verwerken. Anders werken ze niet goed.
Voorbeeld van een aangepast element
Hieronder zie je een voorbeeld van het toevoegen van een eenvoudig aangepast element aan je website. In de instructies wordt uitgelegd hoe je de 'Hello World'-tekst aan je website kunt toevoegen.
Eerst moet je het element en zijn gedrag maken en coderen in een JavaScript-bestand.
Laat me zien hoe
Definieer vervolgens de klasse van het aangepaste element.
In dit voorbeeld hebben we het gedefinieerd als HelloWorld en we zullen dezelfde naam gebruiken bij het registreren van het aangepaste element. De connectedCallback()-functie hieronder is een callback-functie voor de levenscyclus die automatisch wordt geactiveerd wanneer het element aan DOM wordt gekoppeld.
1class HelloWorld extends HTMLElement {
2 connectedCallback() {
3 this.innerHTML = '<br/><br/><br/>Hello World!';
4 }
5}
6customElements.define('hello-world', HelloWorld);Na het definiëren van de klasse van het aangepaste element, registreren we het met de
customElements.define(name, class)-methode. Wanneer je het aangepaste element aan je website toevoegt, voer je de geregistreerde naam in als de tagnaam. Eenmaal geregistreerd, kan het aangepaste element op je website worden gebruikt.
1CustomElementRegistry.define('hello-world', HelloWorld);Op zoek naar meer geavanceerde informatie?
Klik hier om te lezen hoe je dit element kunt gebruiken met Velo by Wix.
Vond je dit artikel nuttig?
|