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

Posted 2023-03-05

【中文标题】如何在离子切换中放置文本

【英文标题】：How can I place text inside an ion-toggle

【发布时间】：2015-05-30 14:47:07

【问题描述】：

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

我想这样做

有没有办法做到这一点？我在某个地方读到我可以使用 ng-true-value 和 ng-false-value 但这似乎并没有达到我想要的效果

【问题讨论】：

我的设计师做到了。我不确定这是否可能

【参考方案1】：

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

但这当然是可能的:)

下面是一个指令。在任何现有的ion-toggle 上拍打ion-toggle-text，你就可以开始了。可以使用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找到。

享受吧。

【讨论】：

这太棒了！但值得注意的是，在当前的 Ionic (1.3.3) 中，切换由于某种原因不再动画（如果你删除了 ion-toggle-text 指令，它就会动画）。

【参考方案2】：

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

代码示例链接：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 = false;

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;
  

【讨论】：

@durron597，我刚刚包含了我的代码，当我提供帮助时无需投票

向您的代码添加链接没有帮助。现在您已将代码添加到答案本身，我已经删除了我的反对意见

@Coding Mc Codington，嗨.. 你能告诉我现在如何在 ionic2 中实现这一点吗？

【参考方案3】：

查看source code，这似乎是不可能的。值得注意的是，在切换按钮中没有粘贴文本的选项，唯一的 transclude 标签也与切换按钮无关。你当然可以分叉他们的代码并自己做，但我认为不值得。

【参考方案4】：

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

<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;
 

【参考方案5】：

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'"> 垂饰 没有验证

CSS

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

【参考方案6】：

我更新了答案中概述的解决方案以支持 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>

【讨论】：

嗨..你能告诉我现在如何在ionic2中实现这一点吗？

@csharpnewbie 你有没有为 Ionic2 找到相同的解决方案？我想要 Ionic-3 中的相同功能。谢谢

@Punita - 不，我没有。抱歉，帮不上什么忙。

【参考方案7】：

尝试了 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;