หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

NGX ได้

NGX-foldable เป็นชุดของส่วนประกอบและบริการเพื่อช่วยให้คุณสร้างประสบการณ์สองหน้าจอสำหรับอุปกรณ์แบบพับได้หรือสองหน้าจอเช่น 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 ) ;
      } ) ;
  }
}

คุณสามารถอ่านเอกสารฉบับเต็มได้ที่นี่

การบริจาค

คุณยินดีที่จะมีส่วนร่วมในโครงการนี้! ตรวจสอบให้แน่ใจว่าคุณได้อ่านจรรยาบรรณก่อนโพสต์ปัญหาหรือคำขอดึง

ทำตามขั้นตอนเหล่านี้เพื่อเรียกใช้โครงการนี้ในพื้นที่:

  1. โคลนที่เก็บบนเครื่องของคุณ
  2. รัน npm install เพื่อติดตั้งแพ็คเกจ
  3. เรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์ dev ด้วยแอพสาธิต

จากนั้นคุณสามารถเริ่มทำการปรับเปลี่ยนรหัสไลบรารีหรือแอพสาธิต

งานที่เกี่ยวข้อง

  • แกลเลอรี่ภาพพื้นผิวดูโอ: การใช้ Angular re-implementation ของ Surface Duo Photo Gallery ตัวอย่างโดยใช้ไลบรารีนี้
  • React-Foldable: ห้องสมุดที่คล้ายกันสร้างขึ้นสำหรับ React
  • -อุปกรณ์แบบพับได้/การสาธิต: การสาธิตเว็บสำหรับอุปกรณ์พับเก็บได้
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด