如何将文本放在离子切换中

Question

目前我有一个看起来像这样的离子开关

我想这样做

有没有办法做到这一点？我在某处读到我可以使用 ng-true-value 和 ng-false-value 但这似乎并没有满足我的要求

Answer 1

翻了翻source code，这好像不行。值得注意的是，没有用于在切换按钮中粘贴文本的选项，并且唯一的 transclude 标签也不与切换按钮相关。你当然可以 fork 他们的代码然后自己做，但我认为这不值得。

Answer 2

属性 ng-true-value 和 ng-false-value 用于在选中复选框时为 ng-model 表达式提供特定的自定义值。 ionic 框架不使用它在切换中显示文本。

但这当然是可能的:)

下面是一个指令。在任何现有的 ion-toggle 上点击 ion-toggle-text 就可以了。 On/off 文本可以使用 ng-true-value/ng-false-value 属性或使用 ion-toggle-text 属性的 ; 分隔值来设置。如果未提供文本，则默认为“on”和“off”。

<ion-toggle ion-toggle-text ng-model="simple">
  Simple Example: <b>{{ simple || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text="online;offline" ng-model="customText">
  Custom text: <b>{{ customText || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text ng-true-value="so true" ng-false-value="so false" ng-model="textByValue">
  Text by value: <b>{{ textByValue || 'so false' }}</b>
</ion-toggle>

可以找到 Plunker here。

尽情享受吧。

Answer 3

我也尝试过但没有成功我最近的解决方案是在切换按钮的左侧放置一个 no/yes 文本，如下所示：

Link 代码示例：http://play.ionic.io/app/f3ad6568b33c

实际代码： HTML:

    <div class="toggle-wrapper">
        <span class="toggle-question">Text question here?</span>
        <ion-toggle class="meds-toggle"
                    toggle-class="toggle-energized"
                    ng-model="customText"
                    ng-checked="customText">
          <div class="toggle-text">{{customText ? "YES" : "NO"}}</div>
        </ion-toggle>

  </div>

JS: //这是我控制器中的一个变量 $scope.customText = 假；

CSS:

#meds-refund-form .toggle-wrapper {
  display: inline-block;
  width: 100%;
  margin-bottom: -20px;

}

  .toggle-question {
    font-size: $default-font-size -3;
    float: left;
    margin: 10px;
  }

    .toggle-text {
    width: 10%;
    color: $bright-yellow;

  }

    .meds-toggle {
    margin: 10px;
    width: 5%;
    float: right;
    border: none;
    height: 50px;
  }

Answer 4

我更新了答案中概述的解决方案以支持 Ionic 1.0.3。可以找到 Plunker here

HTML 下面的示例也显示了使用 ng-disabled 属性。

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme">
    Simple Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme" ng-disabled="true">
    Disabled Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text="online;offline"  ng-model="customText" toggle-class="toggle-my-theme">
    Custom text: <b>{{ customText || false }}</b>
  </ion-toggle>
  <ion-toggle ng-model="customText" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

Answer 5

我找到了更好的解决方案...

<ion-toggle></ion-toggle>

使用css代码：

ion-toggle[aria-checked="false"]{
   position: relative;
   width: 70px;
  &::before {
    position: absolute;
    content: "BACK";
    font-size: 10px;
    line-height: 31px;
  }
  &::after {
    position: absolute;
    content: "";
  }
 }
 ion-toggle[aria-checked="true"]{
  position: relative;
  width: 70px;
  &::before {
    position: absolute;
    content: "";
  }
 &::after {
   position: absolute;
   content: "FRONT";
   font-size: 10px;
   line-height: 31px;
   top: 0;
   left: 3px;
   color: #fff;
 }
}

Answer 6

尝试了 Ishita Ray 发布的解决方案，但我不得不修改它，所以我将 css 包含在此处：

ion-toggle {
    width: 100px;
    margin-bottom: 6px;
    position: relative;
    color: $rivly-white;
    font-size: 15px;
    line-height: 31px;

    --background: #92949c;
    --background-checked: #556ee6;

    --handle-background: #ffffff;
    --handle-background-checked: #ffffff;
}

ion-toggle[aria-checked="false"]{

   &::after {
    position: absolute;
    content: "offline";
    top: 0;
    right: 6px;
   }
}

ion-toggle[aria-checked="true"]{

  &::after {
    position: absolute;
    content: "online";
    top: 0;
    left: 6px;
  }
}

Answer 7

enter image description here

我想出了如何通过简单地忘记 ion-toggle 并自己实现它来实现它，我的意思是，听起来很有趣但它对我来说是结果而且你不需要数百行，所以我会留下它在这里它可以对其他人有所帮助！

打字稿

    pendientes=true;
    changeTab() {
        this.pendientes = !this.pendientes;
    }

Html

    <div class="selector"> 
        <ion-button class="ion-no-margin" mode="ios"(click)="changeTab()"  
[color]="pendientes? 'primary':'white'">
          Pendientes
        </ion-button>
        <ion-button class="ion-no-margin"  mode="ios" (click)="changeTab()" [color]="pendientes? 'white':'primary'">
          No verificados
        </ion-button>
      </div>

Css

.selector{
    display: flex;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
    border-radius: 10px;
    background-color: #840868;
}

如何将文本放在离子切换中

How can I place text inside an ion-toggle

html

javascript

toggle

angularjs

ionic