For example, Switch Code
<label class="switch">
<input type="checkbox" class="switch__input">
<div class="switch__toggle"></div>
</label>
if you write <ons-page></ons-page>
normally (instead of dialogs)
http://ja.onsen.io/reference/css.html#switch
It appears by the appearance of the , but
If you write in a dialog, you will see the following:
when viewed in the dialog
It looks like a check box, but I can't check it.
In addition, the display of Radio Button, Segment, etc. is broken and cannot be operated.
Could you tell me how to place the control of the selection system in the dialog?
Based on ons-dialog, it seemed okay.
ons.bootstrap()
.controller('DialogController', function($scope){
$scope.dialogs={};
$scope.show=function(dlg){
if(!$scope.dialogs[dlg]){
ons.createDialog(dlg).then(function(dialog){
$scope.dialogs [dlg] = dialog;
dialog.show();
});
}
else{
$scope.dialogs [dlg].show();
}
}
});
ons-dialogp{
margin-left —10px;
margin-right —10px;
}
input{
width: 100%;
}
div#switch{
text-align:center;
}
div#segment{
width:280px;
}
<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"/>
<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>
<ons-page>
<ons-toolbar>
<div class="center">Dialog</div>
</ons-toolbar>
<ons-list ng-controller="DialogController">
<ons-list-item ng-click="show('login.html')"modifier="tappable">
Show Dialog
</ons-list-item>
</ons-list>
</ons-page>
<ons-template id="login.html">
<ons-dialog var="dialog" cancelable>
<ons-toolbar inline>
<div class="center">
Dialog
</div>
</ons-toolbar>
<h4>Switch</h4>
<divid="switch">
<label class="switch">
<input type="checkbox" class="switch__input">
<div class="switch__toggle"></div>
</label>
</div>
<h4>Segment</h4>
<divid="segment" class="button-bar">
<div class="button-bar__item">
<input type="radio" name="segment-a"checked>
<button class="button-bar__button">One</button>
</div>
<div class="button-bar__item">
<input type="radio" name="segment-a">
<button class="button-bar__button">Two</button>
</div>
<div class="button-bar__item">
<input type="radio" name="segment-a">
<button class="button-bar__button">Three</button>
</div>
</div>
<h4>Radio Button</h4>
<label class="radio-button">
<input type="radio"name="r"checked="checked">
<div class="radio-button__checkmark"></div>
Label 1
</label><br>
<label class="radio-button">
<input type="radio" name="r">
<div class="radio-button__checkmark"></div>
Label 2
</label><br>
</ons-dialog>
</ons-template>
© 2024 OneMinuteCode. All rights reserved.