ngx foldable

NGX-lipat

NGX-Foldable adalah seperangkat komponen dan layanan untuk membantu Anda membangun pengalaman layar ganda untuk perangkat yang dapat dilipat atau layar ganda, seperti duo permukaan

Lihat demo langsung atau baca dokumentasi lengkapnya.

Cara menguji di browser Anda

Fitur emulasi layar ganda membutuhkan versi Microsoft Edge atau Google Chrome terbaru (> = 97).

Jika Anda memiliki versi browser yang lebih tua, Anda perlu mengaktifkan bendera eksperimental. Ikuti instruksi di sini untuk mengatur browser Anda untuk emulasi layar ganda.

Penggunaan Perpustakaan

Lihat kode sumber demo untuk melihat contoh penggunaan perpustakaan.

Tambahkan perpustakaan ke proyek sudut Anda:

npm install ngx-foldable

Impor perpustakaan di aplikasi Anda:

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

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

Gunakan arahan fdSplitLayout , fdWindow dan fdIfSpan untuk membangun tata letak Anda:

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

Menggunakan layanan ScreenContext , Anda juga dapat menerima pembaruan saat konteks layar berubah:

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

Anda dapat membaca dokumentasi lengkap di sini.

Berkontribusi

Anda dipersilakan untuk berkontribusi pada proyek ini! Pastikan Anda telah membaca kode perilaku sebelum memposting masalah atau permintaan tarik.

Ikuti langkah -langkah ini untuk menjalankan proyek ini secara lokal:

1. Klon Repositori di Mesin Anda
2. Jalankan npm install untuk menginstal paket
3. Jalankan npm start Memulai Server Dev dengan Aplikasi Demo

Anda kemudian dapat mulai membuat modifikasi di perpustakaan atau kode aplikasi demo.

Pekerjaan terkait

• Galeri Foto Duo Permukaan: Implementasi ulang sudut dari Surface Duo Photo Gallery Sampel menggunakan perpustakaan ini
• Reactable Foldable: Perpustakaan serupa yang dibangun untuk bereaksi
• Lipat-Devices/Demo: Demo Web untuk perangkat lipat.