ngx foldable
5.0.0
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 ) ;
} ) ;
}
}Вы можете прочитать полную документацию здесь.
Вы можете внести свой вклад в этот проект! Убедитесь, что вы прочитали Кодекс поведения перед публикацией проблемы или запроса на привлечение.
Следуйте этим шагам, чтобы запустить этот проект на местном уровне:
npm install для установки пакетовnpm start запустить сервер Dev с демонстрационным приложениемЗатем вы можете начать вносить модификации в библиотеке или демо -приложении.
