ngx foldable
5.0.0
NGX-faltbar ist eine Reihe von Komponenten und Diensten, mit denen Sie Dual-Screen-Erlebnisse für faltbare oder zwei Bildschirmgeräte wie das Surface-Duo erstellen können
Siehe die Live -Demo oder lesen Sie die vollständige Dokumentation.
Die Funktion mit zwei Bildschirmen erfordert die neuesten Microsoft Edge- oder Google Chrome-Versionen (> = 97).
Wenn Sie über ältere Browserversionen verfügen, müssen Sie experimentelle Flaggen aktivieren. Befolgen Sie die Anweisungen hier, um Ihren Browser für die Emulation mit zwei Bildschirmen einzurichten.
Schauen Sie sich den Demo -Quellcode an, um eine Beispiel Verwendung der Bibliothek zu sehen.
Fügen Sie die Bibliothek Ihrem Winkelprojekt hinzu:
npm install ngx-foldableImportieren Sie die Bibliothek in Ihre App:
import { FoldableModule } from 'ngx-foldable' ;
...
@ NgModule ( {
...
imports : [
FoldableModule
...
] ,
...
} )
export class AppModule { } Verwenden Sie die bereitgestellten fdSplitLayout , fdWindow und fdIfSpan -Direktiven, um Ihr Layout zu erstellen:
<!--
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 > Mit dem ScreenContext -Dienst können Sie auch Aktualisierungen empfangen, wenn sich der Bildschirmkontext ändert:
import { ScreenContext } from 'ngx-foldable' ;
...
export class AppComponent {
constructor ( private screenContext : ScreenContext ) {
this . screenContext
. asObservable ( )
. subscribe ( ( context ) => {
console . log ( 'Screen context changed:' , context ) ;
} ) ;
}
}Sie können die vollständige Dokumentation hier lesen.
Sie können gerne zu diesem Projekt beitragen! Stellen Sie sicher, dass Sie den Verhaltenskodex gelesen haben, bevor Sie ein Problem oder eine Pull -Anfrage veröffentlichen.
Befolgen Sie diese Schritte, um dieses Projekt lokal auszuführen:
npm install aus, um Pakete zu installierennpm start um den Dev -Server mit der Demo -App zu startenSie können dann Änderungen in der Bibliotheks- oder Demo -App -Code vornehmen.
