23928


こんにちは

Cordova+OnsenUIでリストを表示するアプリを作成しています。  
現在はiPadでも上から下へ１列でリストを表示していますが、  
iPadの（のように大きな画面の）場合は３列でリストを表示するなどレスポンシブなデザインにしたいと思っていますが、OnsenUIで実現可能でしょうか。  
ons-colでは固定で列数を指定しているようなので一つのソースでは難しいかと思っています。

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-04-11T13:44:54.313
23922
2016-04-11T23:56:29.417
2016-04-11T14:20:33.037
8000
12362
question
html onsen-ui
レスポンシブなグリッドレイアウトの実現方法


このようなケースに対応したOnsenUIコンポーネントは今のところ無いと思います。

OnsenUIでリスト表示するからといって、必ずしも`<ons-
list>`タグを使う必要はありません。`<div>`タグや`<ul>`、`<li>`タグ等でwebサイトと同じようにマークアップして適切なcssを当ててください。[Bootstrap](http://getbootstrap.com/)を利用するのも一つの手です。


CC BY-SA 3.0
2016-04-11T23:56:29.417
23928
2016-04-11T23:56:29.417
8532
23922
answer