Webviews
Wenn Sie benutzerdefinierte Funktionalität anzeigen müssen, die über die von der VS Code API unterstützten hinausgeht, können Sie Webviews verwenden, die vollständig anpassbar sind. Es ist wichtig zu verstehen, dass Webviews nur verwendet werden sollten, wenn Sie sie absolut benötigen.
✔️ Tun
- Webviews nur verwenden, wenn absolut notwendig
- Erweitern Sie Ihre Erweiterung nur, wenn es kontextbezogen angemessen ist
- Öffnen Sie Webviews nur für das aktive Fenster
- Stellen Sie sicher, dass alle Elemente in der Ansicht themenbezogen sind (siehe das webview-view-sample und die Dokumentation zu Farb-Token)
- Stellen Sie sicher, dass Ihre Ansichten die Barrierefreiheitsrichtlinien befolgen (Farbkontrast, ARIA-Labels, Tastaturnavigation)
- Verwenden Sie Befehlsaktionen in der Werkzeugleiste und in der Ansicht
❌ Nicht tun
- Verwenden für Werbeaktionen (Upgrades, Sponsoren usw.)
- Verwenden für Assistenten
- Auf jedem Fenster öffnen
- Bei Erweiterungsaktualisierungen öffnen (fragen Sie stattdessen über eine Benachrichtigung)
- Funktionalität hinzufügen, die nichts mit dem Editor oder Arbeitsbereich zu tun hat
- Bestehende Funktionalität wiederholen (Willkommensseite, Einstellungen, Konfiguration usw.)
Webview-Beispiele
Einfacher Browser
Diese Erweiterung öffnet eine Browser-Vorschau für den Editor zur Seite.
Dieses Beispiel zeigt die Entwicklung von VS Code Web direkt in VS Code. Ein Webview-Panel wird verwendet, um ein browserähnliches Fenster zu rendern.
Pull Request
Diese Erweiterung zeigt Pull-Anfragen für das Repository des Arbeitsbereichs in einer benutzerdefinierten Baumansicht und verwendet dann ein Webview für eine Detailansicht der Pull-Anfrage.
Webview-Ansichten
Sie können Webviews auch in jedem Ansichtscontainer (Seitenleiste oder Panel) platzieren, und diese Elemente werden als Webview-Ansichten bezeichnet. Dieselben Webview-Richtlinien gelten für Webview-Ansichten.
Diese Webview-Ansicht zeigt Inhalte zum Erstellen einer Pull-Anfrage, die Dropdowns, Eingabefelder und Schaltflächen verwendet.