ngx foldable

redondeable

NGX-holdable es un conjunto de componentes y servicios para ayudarlo a construir experiencias de doble pantalla para dispositivos plegables o de doble pantalla, como Surface Duo

Vea la demostración en vivo o lea la documentación completa.

Cómo probar en su navegador

La función de emulación de doble pantalla requiere las últimas versiones de Microsoft Edge o Google Chrome (> = 97).

Si tiene versiones de navegador más antiguas, debe habilitar banderas experimentales. Siga las instrucciones aquí para configurar su navegador para la emulación de doble pantalla.

Uso de la biblioteca

Consulte el código fuente de demostración para ver un uso de ejemplo de la biblioteca.

Agregue la biblioteca a su proyecto angular:

npm install ngx-foldable

Importar la biblioteca en su aplicación:

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

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

Use las directivas fdSplitLayout , fdWindow y fdIfSpan proporcionadas para construir su diseño:

 <!--
  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 >

Usando el servicio ScreenContext , también puede recibir actualizaciones cuando cambia el contexto de la pantalla:

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

Puede leer la documentación completa aquí.

Que contribuye

¡Eres bienvenido a contribuir a este proyecto! Asegúrese de haber leído el código de conducta antes de publicar un problema o una solicitud de extracción.

Siga estos pasos para ejecutar este proyecto localmente:

1. Clonar el repositorio en su máquina
2. Ejecutar npm install para instalar paquetes
3. Ejecutar npm start a iniciar el servidor Dev con la aplicación de demostración

Luego puede comenzar a hacer modificaciones en la biblioteca o el código de la aplicación de demostración.

Trabajo relacionado

• Galería de fotos de Surface Duo: muestra de reimplementación angular de la muestra de la galería de fotos de Surface Duo usando esta biblioteca
• reactable: una biblioteca similar construida para reaccionar
• Devices plegables/demostraciones: demostraciones web para dispositivos plegables.