如何在离子中创建性别切换按钮

Question

我是 ionic 新手，我希望能够在我的应用程序中创建一个性别切换按钮。我不想使用复选框，而是将复选框转换为如下图所示。

如果我要在 html 和 jQuery 中构建它，它将是这样的

<div class="checkbox">
      <input type="checkbox" name="gender" id="gender" checked />
     </div>
    </div>
    <input type="hidden" name="hidden_gender" id="hidden_gender" value="Male" />

在 jQuery 中

 $('#gender').bootstrapToggle({
  on: 'Male',
  off: 'Female',
  onstyle: 'success',
  offstyle: 'danger'
 });

 $('#gender').change(function(){
  if($(this).prop('checked'))
  {
   $('#hidden_gender').val('Male');
  }
  else
  {
   $('#hidden_gender').val('Female');
  }
 });

谢谢。

Answer 1

我想你要找的是<ion-toggle/>。

有关此组件的文档，请参阅：https://ionicframework.com/docs/components/#toggle

这是我在 Angular 应用程序中使用标签的方式的复制/粘贴：

<ion-toggle [(ngModel)]="track.isChecked" color="secondary"></ion-toggle>