ngx foldable

NGX dobrável

NGX Foldable é um conjunto de componentes e serviços para ajudá-lo a criar experiências de tela dupla para dispositivos dobráveis ou de tela dupla, como a dupla de superfície

Veja a demonstração ao vivo ou leia a documentação completa.

Como testar em seu navegador

O recurso de emulação de tela dupla requer as mais recentes versões do Microsoft Edge ou Google Chrome (> = 97).

Se você possui versões mais antigas do navegador, precisará ativar sinalizadores experimentais. Siga as instruções aqui para configurar seu navegador para uma emulação de tela dupla.

Uso da biblioteca

Confira o código -fonte da demonstração para ver um exemplo de uso da biblioteca.

Adicione a biblioteca ao seu projeto angular:

npm install ngx-foldable

Importe a biblioteca em seu aplicativo:

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

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

Use as diretivas fdSplitLayout , fdWindow e fdIfSpan fornecidas para construir seu layout:

 <!--
  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 o serviço ScreenContext , você também pode receber atualizações quando o contexto da tela mudar:

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

Você pode ler a documentação completa aqui.

Contribuindo

Você pode contribuir com este projeto! Verifique se você leu o código de conduta antes de postar um problema ou uma solicitação de tração.

Siga estas etapas para executar este projeto localmente:

1. Clone o repositório em sua máquina
2. Execute npm install para instalar pacotes
3. Execute npm start para iniciar o servidor de desenvolvimento com o aplicativo de demonstração

Você pode começar a fazer modificações no código do aplicativo da biblioteca ou demonstração.

Trabalho relacionado

• Galeria de fotos da dupla de superfície: reimplementação angular da amostra da galeria de fotos da dupla de superfície usando esta biblioteca
• React-dobrável: uma biblioteca semelhante construída para reagir
• Discutidos dobráveis/demos: demos da Web para dispositivos dobráveis.