As per the title, I would like to make it into two columns, but the line has been broken and the display is different from what I expected.I'm sorry, but could someone tell me the basics?
ons.bootstrap()
.controller('main', function($scope){
$scope.disable=false;
$scope.push=function(page){
$scope.disable=true;
setTimeout(function(p){
myNavigator.pushPage(p);
}, 1500, page);
}
$scope.postPush=function(){
$scope.disable=false;
}
});
.list-container{
width —100%
}
.niretsu {
width: 50%;
}
head>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css"rel="stylesheet"/>
</head>
<bodying-controller="main">
<ons-navigator var="myNavigator" page="page1.html"ons-postpush="postPush()">
</ons-navigator>
</body>
<ons-template id="page1.html">
<ons-page>
<ons-list class="list-container">
<ons-list-header>2 columns</ons-list-header>
<ons-list-item id="1-1" class="niretsu">1-1</ons-list-item>
<ons-list-item id="1-2" class="niretsu"> 1-2</ons-list-item>
<ons-list-item id="2-1" class="niretsu">2-1</ons-list-item>
<ons-list-item id="2-2" class="niretsu">2-2</ons-list-item>
<ons-list-item id="3-1" class="niretsu">3-1</ons-list-item>
<ons-list-item id="3-2" class="niretsu">3-2</ons-list-item>
<ons-list-header>Tappable Numbers</ons-list-header>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page2</div>
</ons-toolbar>
<div style="text-align:center">
<h1>Page2</h1>
<ons-button onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
In the case of Chrome, I think you can arrange it horizontally with a DIV tag.
<ons-template id="page1.html">
<ons-page>
<div style="width:50%;float:left;">
<ons-list>
<ons-list-header>2 columns</ons-list-header>
<ons-list-item id="1-1" class="niretsu">1-1</ons-list-item>
<ons-list-item id="1-2" class="niretsu"> 1-2</ons-list-item>
<ons-list-item id="2-1" class="niretsu">2-1</ons-list-item>
<ons-list-item id="2-2" class="niretsu">2-2</ons-list-item>
<ons-list-item id="3-1" class="niretsu">3-1</ons-list-item>
<ons-list-item id="3-2" class="niretsu">3-2</ons-list-item>
</ons-list>
</div>
<div>
<ons-list>
<ons-list-header>Tappable Numbers</ons-list-header>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
<ons-list-item modulator="tapable">Tap Me</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-template>
Additional
I also checked the Monaca preview.
© 2023 OneMinuteCode. All rights reserved.