screenfull-fullscreen-api
Ajouter un bouton plein écran aux applications web
Besoin d'une prise en charge du plein écran multi-navigateurs pour votre application web. Cette compétence fournit des modèles complets pour implémenter des boutons de basculement en plein écran, des modes d'affichage immersifs et des vues de présentation en utilisant la bibliothèque screenfull avec Angular.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「screenfull-fullscreen-api」を使用しています。 Ajouter un basculement plein écran à mon composant tableau de bord
期待される結果:
- Créé FullscreenToggleComponent avec gestion d'état basée sur les signaux
- Utilise screenfull.toggle() pour basculer entre le mode normal et le mode plein écran
- Écoute les événements 'change' de screenfull pour mettre à jour l'état de l'interface
- Inclut un repli gracieux lorsque l'API plein écran n'est pas prise en charge
- Nettoyé les écouteurs d'événements dans le cycle de vie du composant
「screenfull-fullscreen-api」を使用しています。 Créer une visionneuse d'images en plein écran pour ma galerie de photos
期待される結果:
- Construit ConstructionPhotosComponent avec fonctionnalité de clic pour voir
- Implémente screenfull.request() pour la visualisation immersive des photos
- Ajouté la gestion de la touche échappement pour quitter le mode plein écran
- Créé une superposition fluide avec affichage des informations de la photo
- Inclus un nettoyage approprié lors de la sortie du plein écran
「screenfull-fullscreen-api」を使用しています。 Créer un mode présentation avec navigation entre diapositives
期待される結果:
- Créé PresentationModeComponent avec état de diapositive calculé
- Ajouté des raccourcis clavier : Touches fléchées pour la navigation, Échappement pour quitter
- Implémenté une gestion appropriée du cycle de vie avec nettoyage des écouteurs d'événements
- Stylisé en mode sombre pour une expérience de présentation immersive
- Ajouté des contrôles de diapositive suivant/précédent avec états désactivés
セキュリティ監査
安全Documentation-only skill containing instructional markdown with code examples for using the screenfull library. No executable code, no network calls, no file system access, no environment variable reading. Purely a reference guide for implementing browser fullscreen API functionality.
リスク要因
🌐 ネットワークアクセス (7)
📁 ファイルシステムへのアクセス (1)
⚙️ 外部コマンド (20)
品質スコア
作れるもの
Créer des tableaux de bord immersifs
Créer des vues de tableau de bord qui s'étendent en plein écran pour une meilleure visibilité des données pendant les présentations
Créer des visionneuses multimédias
Créer des galeries d'images et des lecteurs vidéo en plein écran avec des transitions fluides et des contrôles
Ajouter des modes présentation
Implémenter des visionneuses de diapositives de présentation avec navigation au clavier pour des expériences de diaporama
これらのプロンプトを試す
Ajouter un bouton de basculement en plein écran à mon composant Angular en utilisant la bibliothèque screenfull
Faire passer un élément div spécifique en plein écran en utilisant screenfull avec les signaux Angular
Créer un composant visionneuse d'images en plein écran qui affiche les photos en mode immersif
Créer un composant mode présentation avec des diapositives et une navigation au clavier pour suivant et précédent
ベストプラクティス
- Toujours vérifier screenfull.isEnabled avant d'utiliser les méthodes de l'API plein écran
- Fournir des boutons de sortie du plein écran clairs et gérer correctement la touche Échappement
- Nettoyer les écouteurs d'événements lorsque les composants sont détruits pour éviter les fuites de mémoire
回避
- Ne pas supposer que l'API plein écran est toujours disponible dans tous les navigateurs
- Éviter de forcer le plein écran sans interaction utilisateur ou clic explicite sur un bouton
- Ne pas ignorer les limitations des navigateurs mobiles pour la prise en charge du plein écran