Question

仅使用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>

Answer 1

使用屏幕方向插件可以知道

屏幕方向类型 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>'
    }
]

Answer 2

找到了！使用屏幕方向插件。这样更好，因为我不必像以前的解决方案那样复制代码。

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

基于屏幕方向的离子响应网格

2 个答案: