ngx foldable
5.0.0
NGX-Foldable هي مجموعة من المكونات والخدمات لمساعدتك على بناء تجارب مزدوجة الشاشة للأجهزة القابلة للطي أو المزدوجة ، مثل الثنائي السطحي
شاهد العرض التوضيحي المباشر أو اقرأ الوثائق الكاملة.
تتطلب ميزة مضاهاة الشاشة المزدوجة أحدث إصدارات 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 ) ;
} ) ;
}
}يمكنك قراءة الوثائق الكاملة هنا.
اهلا وسهلا بكم في المساهمة في هذا المشروع! تأكد من قراءة مدونة قواعد السلوك قبل نشر مشكلة أو طلب سحب.
اتبع هذه الخطوات لتشغيل هذا المشروع محليًا:
npm install لتثبيت الحزمnpm start في بدء تشغيل خادم DEV مع تطبيق العرض التجريبييمكنك بعد ذلك البدء في إجراء تعديلات على رمز التطبيق أو العرض التجريبي.
