ngx foldable

ngx-vainqueur

NGX-Foldable est un ensemble de composants et de services pour vous aider à créer des expériences à double écran pour les appareils pliables ou à double écran, tels que le duo de surface

Voir la démo en direct ou lire la documentation complète.

Comment tester sur votre navigateur

La fonction d'émulation à double écran nécessite les dernières versions Microsoft Edge ou Google Chrome (> = 97).

Si vous avez des versions de navigateur plus anciennes, vous devez activer les drapeaux expérimentaux. Suivez les instructions ici pour configurer votre navigateur pour une émulation double écran.

Utilisation de la bibliothèque

Consultez le code source de démonstration pour voir un exemple d'utilisation de la bibliothèque.

Ajoutez la bibliothèque à votre projet angulaire:

npm install ngx-foldable

Importez la bibliothèque dans votre application:

 import { FoldableModule } from 'ngx-foldable' ;
...

@ NgModule ( {
  ...
  imports : [
    FoldableModule
    ...
  ] ,
  ...
} )
export class AppModule { }

Utilisez les directives fdSplitLayout , fdWindow et fdIfSpan fournies pour créer votre disposition:

 <!--
  SplitLayout supports: flex, grid or absolute
  Styling is only added when a multi screen mode is detected.
-->
< div fdSplitLayout =" grid " >

  <!-- Assign to first window segment -->
  < section fdWindow =" 0 " >
    This will be displayed on the first window segment of a multi screen or single screen device.
    
    < p *fdIfSpan =" 'none'; else alt " > This is only visible on a single screen device. </ p >
    < ng-template #alt > < p > This is only visible on a multi screen device. </ p > </ ng-template >
  </ section >

  <!-- Assign to second window segment -->
  < section fdWindow =" 1 " >
    This will be displayed on the second window segment of a multi screen device.

    < p *fdIfSpan =" 'multi' " > This is only visible on multi screen device, regardless of the orientation. </ p >
    < p *fdIfSpan =" 'dual-vertical' " > This is only visible on dual vertical viewports. </ p >
    < p *fdIfSpan =" 'dual-horizontal' " > This is only visible on dual horizontal viewports. </ p >
  </ section >
</ div >

À l'aide du service ScreenContext , vous pouvez également recevoir des mises à jour lorsque le contexte de l'écran change:

 import { ScreenContext } from 'ngx-foldable' ;
...
export class AppComponent {
  constructor ( private screenContext : ScreenContext ) {
    this . screenContext
      . asObservable ( )
      . subscribe ( ( context ) => {
        console . log ( 'Screen context changed:' , context ) ;
      } ) ;
  }
}

Vous pouvez lire la documentation complète ici.

Contributif

Vous êtes invités à contribuer à ce projet! Assurez-vous d'avoir lu le code de conduite avant de publier un problème ou une demande de traction.

Suivez ces étapes pour exécuter ce projet localement:

1. Clone le référentiel sur votre machine
2. Exécutez npm install pour installer des packages
3. Exécutez npm start pour démarrer le serveur de développement avec l'application de démonstration

Vous pouvez ensuite commencer à apporter des modifications sur le code d'application de bibliothèque ou de démonstration.

Travaux connexes

• Galerie de photos de surface duo: réimplémentation angulaire de la galerie de photos duo de surface en utilisant cette bibliothèque
• réacturation réalisable: une bibliothèque similaire conçue pour réagir
• dispositifs pliables / démos: démos Web pour les appareils pliants.