To use the control of the selection system for the Use Dialog dialog in the Onsen UI Guide

Asked 2 years ago, Updated 2 years ago, 123 views

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:
Switch
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?

onsen-ui

2022-09-30 20:45

1 Answers

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>


2022-09-30 20:45

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.