Ионная адаптивная сетка на основе ориентации экрана - PullRequest
Новая
       39

Ионная адаптивная сетка на основе ориентации экрана

0 голосов
/ 30 мая 2018

с использованием инфраструктуры и компонентов Ionic3, только атрибутов, свойств (без медиазапросов, если это возможно), кто-нибудь знает, как определить адаптивную сетку на основе ориентации экрана?Я хочу, чтобы макет отображался в одном столбце, когда ориентация экрана «книжная», и в двух столбцах, когда ориентация экрана «горизонтальная», независимо от размера экрана.

Я сделал это с помощью showWhen атрибут, как показано ниже, но он заставляет меня дублировать код, содержащийся в каждом.Есть ли лучшее решение? 

<ion-grid>
  <ion-row>
    <ion-col showWhen="portrait" col-12>
    ...[content_1]...
    </ion-col>
    <ion-col showWhen="landscape" col-6 push-6>
    ...[content_1]...
    </ion-col>
    <ion-col showWhen="portrait" col-12>
    ...[content_2]...
    </ion-col>
    <ion-col showWhen="landscape" col-6 push-6>
    ...[content_2]...
    </ion-col>
  </ion-row>
</ion-grid>

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

найдено!Использование плагина ориентации экрана.Это лучше, потому что мне не нужно дублировать код, как в моем предыдущем решении. 

<ion-grid>
  <ion-row>

    <ion-col [attr.col-12]="screenOrientation.type == 'portrait-primary' ? true : null" [attr.col-6]="screenOrientation.type == 'landscape-primary' ? true : null" [attr.push-6]="screenOrientation.type == 'landscape-primary' ? true : null">
    ...[content_1]...
    </ion-col>

    <ion-col [attr.col-12]="screenOrientation.type == 'portrait-primary' ? true : null" [attr.col-6]="screenOrientation.type == 'landscape-primary' ? true : null" [attr.pull-6]="screenOrientation.type == 'landscape-primary' ? true : null" >
    ...[content_2]...
    </ion-col>

  </ion-row>
</ion-grid>
0 голосов
/ 30 мая 2018

тип ориентации экрана можно узнать с помощью плагина ориентации экрана https://ionicframework.com/docs/native/screen-orientation/

, если имеется только одна строка: 

<ion-grid>
   <ion-row>

           // show columns in the row depending on what screen-orientation type

           <div *ngFor="let content of contents">
               <ion-col *ngIf="screen-orientation-type = 'portrait'" col-6>
                   <div text-wrap [innerHtml]="content.title"></div>
                   <div text-wrap [innerHtml]="content.body"></div>
               </ion-col>
               <ion-col *ngIf="screen-orientation-type = 'landscape'" col-12>
                   <div text-wrap [innerHtml]="content.title"></div>
                   <div text-wrap [innerHtml]="content.body"></div>
               </ion-col>
           </div>
   </ion-row>
</ion-grid>

, если вы получаете содержимое с серверасоздайте API, который будет возвращать значения содержимого

или установите список содержимого в ts 

contents:[
    {
        title?: string,
        body?: string 
    },
    {
        title?: string,
        body?: string 
    }
];

в том же файле ts в конструкторе: 

this.contents = [
    {
        title: '<h1>Content 1</h1>',
        body: '<p>Body here</p>'
    },
    {
        title: '<h1>Content 2</h1>',
        body: '<p>Body here</p>'
    }
]
...