レスポンシブなグリッドレイアウトの実現方法
こんにちは
Cordova+OnsenUIでリストを表示するアプリを作成しています。
現在はiPadでも上から下へ1列でリストを表示していますが、
iPadの(のように大きな画面の)場合は3列でリストを表示するなどレスポンシブなデザインにしたいと思っていますが、OnsenUIで実現可能でしょうか。
ons-colでは固定で列数を指定しているようなので一つのソースでは難しいかと思っています。
<ons-list>
<ons-list-item class="item">
<ons-row>
<span class="item-title">{{item.title}}</span>
</ons-row>
<ons-row>
<img class="item-image" src="{{item.imageUri}}" />
</ons-row>
</ons-list-item>
<ons-list-item class="item" modifier="chevron" ng-click="showStatus()">
<p class="item-schedule-large"><ons-icon icon="ion-checkmark-circled"></ons-icon> <ons-icon icon="ion-record" size="20px" fixed-width="false" style="color: {{item.statusColor}}"></ons-icon> {{item.status}}</p>
</ons-list-item>
<ons-list-item class="item">
<p class="item-schedule-large"><ons-icon icon="ion-calendar"></ons-icon> {{item.startDatetime}} - {{item.endDatetime}} </p>
</ons-list-item>
<ons-list-item modifier="chevron" class="item" ng-click="showDevice()">
<p class="item-device"><ons-icon icon="ion-ios-pulse-strong"></ons-icon> {{item.deviceName}} ({{item.deviceId}})</p>
</ons-list-item>
<ons-list-item class="item">
<ons-icon icon="ion-thermometer"></ons-icon> Temparature(Outside) <span class="item-value2">{{current.currently.temperature}}℃</span>
<div>{{current.currently.icon}} - {{currentLocationString}}</div>
</ons-list-item>
<ons-list-item class="item">
<ons-icon icon="ion-thermometer"></ons-icon> Temparature(Inside) <span class="item-value2">{{ambientTemp}}℃</span>
<div id="chart_ambientTemp"></div>
</ons-list-item>
<ons-list-item class="item">
<ons-icon icon="ion-ios-sunny-outline"></ons-icon> Light <span class="item-value2">{{light}}lx</span>
<div id="chart_light"></div>
</ons-list-item>
<ons-list-item class="item">
<ons-icon icon="ion-cube"></ons-icon> Slope <span class="item-value2">x:{{gyroX}}, y:{{gyroY}}, z:{{gyroZ}}</span>
<div id="3DCanvas"></div>
</ons-list-item>
</ons-list>