ngx foldable下載ngx foldable源代碼下載

ngx foldable

三方組件

5.0.0

下載

NGX折疊

NGX折疊是一組組件和服務，可幫助您為可折疊或雙屏幕設備建立雙屏幕體驗，例如Surface Duo

請參閱實時演示或閱讀完整文檔。

如何在瀏覽器上測試

雙屏幕仿真功能需要最新的Microsoft Edge或Google Chrome版本（> = 97）。

如果您擁有較舊的瀏覽器版本，則需要啟用實驗標誌。請按照此處的說明進行操作，以設置您的瀏覽器以進行雙屏幕仿真。

圖書館用法

查看演示源代碼以查看庫的示例用法。

將庫添加到您的角度項目中：

npm install ngx-foldable

導入您的應用中的庫：

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

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

使用提供的fdSplitLayout ， fdWindow和fdIfSpan指令來構建您的佈局：

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

使用ScreenContext服務，您還可以在屏幕上下文更改時接收更新：

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