1

例えばSwitchのコード

<label class="switch">
  <input type="checkbox" class="switch__input">
  <div class="switch__toggle"></div>
</label>

を(ダイアログではなく)普通に<ons-page></ons-page>内に書くと
http://ja.onsen.io/reference/css.html#switch
の見た目で表示されるのですが、

ダイアログ内に書くと、次のようになってしまいます。
ダイアログに表示した場合のSwitch
これはチェックボックスらしい表示になってはいますが、チェックすることはできないです。

この他、Radio Button, Segmentなども表示が壊れて操作ができないです。
ダイアログに選択系のコントロールを配置する方法があれば教えていただけないでしょうか。

1 件の回答 1

1

ons-dialogをベースにやってみたら大丈夫そうでした。

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-dialog p {
  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>
    <div id="switch">
      <label class="switch">
        <input type="checkbox" class="switch__input">
        <div class="switch__toggle"></div>
      </label>
    </div>

    <h4>Segment</h4>
    <div id="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>
      Label1
    </label><br>
    <label class="radio-button">
      <input type="radio" name="r">
      <div class="radio-button__checkmark"></div>
      Label2
    </label><br>
  </ons-dialog> 
</ons-template>

この質問に回答するには、ログインする必要があります。