Vinden en bekijken

Deze pagina legt uit hoe je in de componentmarkt een passend component vindt en vóór het downloaden controleert of het echt werkt.

De componentmarkt openen

Klik na het starten van de lokale service in het linkermenu op "Componentmarkt". Elke kaart in de lijst staat voor een gepubliceerd component.

Boven aan de pagina zijn er vier filters:

Filter	Betekenis	Wanneer gebruiken
Aanbevolen	Aanbevolen sortering op basis van gebruik en beoordeling	Geen specifiek doel, eerst rondkijken
Nieuwste	Aflopend op publicatietijd	De recente output van het team bekijken
Populair	Gesorteerd op aantal downloads	Componenten zoeken die in veel projecten zijn gevalideerd
Alle	Geen filtering op dependency-matching	Je weet zeker dat het component bestaat, maar vindt het niet in de eerste drie lijsten

Waarom sommige componenten alleen in "Alle" verschijnen

De eerste drie lijsten filteren componenten weg waarvan de dependencies niet bij de lokale omgeving passen. Verschijnt een component niet, schakel dan eerst over naar "Alle" om te bevestigen dat het bestaat, en behandel het versieprobleem daarna via Dependency-matching.

Informatie op de kaart

• Naam en auteur: de componentnaam is uniek binnen dezelfde ruimte; de auteur is de publicerende partij.
• Beschrijving: de toelichting die bij het publiceren is ingevuld, om snel het doel te bepalen.
• Dependency-labels: de externe pakketten die daadwerkelijk in de broncode van het component worden gebruikt.
• Statistieken: gebruik zoals aantal downloads en favorieten.

De previewpagina openen

Klik op "Preview" op de kaart; de detailpagina opent in een nieuw tabblad. De detailpagina bestaat uit vijf gebieden:

1. Previewgebied: het daadwerkelijke draaiende resultaat van het component, met wisselen tussen klein venster en volledig scherm.
2. Documentatiegebied: de gerenderde README.md van het component, met properties, events en gebruiksvoorbeelden.
3. Versieselectie: schakel tussen historische versies en vergelijk gedrag vóór het downloaden.
4. Dependency-informatie: de gedeclareerde dependencies van het component, de lokale matchingstatus en ontbrekende items.
5. Weergave-instellingen: wissel de achtergrondkleur om te controleren hoe het component op lichte en donkere achtergronden presteert.

Wat je bij de preview moet controleren

• Het component rendert correct onder jouw huidige frameworkversie (Vue 2 / Vue 3 / React).
• De interactie gedraagt zich zoals verwacht, niet alleen een mooie statische screenshot.
• De dependency-status heeft geen rode waarschuwing; geel betekent een versieverschil dat je kunt volgen.
• De property-tabel in de README komt overeen met het werkelijke gedrag.

Wat als een component niet wordt weergegeven

Controleer in deze volgorde:

1. Zet het filter op "Alle" en bevestig dat het component echt bestaat.
2. Open de detailpagina en bekijk de dependency-status en ontbrekende items.
3. Installeer de ontbrekende dependencies in je lokale project en ververs de pagina.
4. Als het versieverschil de functionaliteit niet beïnvloedt, versoepel je de matchingregel onder "Instellingen → Preview-regel".

De volledige regels en voorbeelden staan in Dependency-matching.

Volgende stappen

• Na bevestiging gaan downloaden: Downloaden en gebruiken
• Eerst een versie aanpassen en dan publiceren: Bijwerken en versies