【问题标题】:Ionic-Toggle with Labels on each side每侧带有标签的离子切换
【发布时间】:2019-11-07 11:13:55
【问题描述】:

我正在尝试为嵌套在 ion 项中的 ion-toggle 组件添加每一侧的标签。文本将始终处于较低位置,我无法让文本向上移动。

我在标签上尝试了各种边距和填充。我曾尝试使用 Ion-note 组件,但我根本无法让此文本标签向上滑动。没有特殊的 css ion ion item 或 ion toggle。

 [![<ion-col  size-md="3" >
                <ion-item>
                    <ion-label position="stacked">Is Technician</ion-label>
                    <div>
                        <label>No</label>
                        <ion-toggle formControlName="isTech" ></ion-toggle>
                        <label >Yes</label>
                    </div>
                </ion-item>
            </ion-col>]

预期文本与切换对齐

【问题讨论】:

    标签: css ionic-framework ion-toggle


    【解决方案1】:

    这就是我所做的,并且有效;D。

    <ion-item>
        <ion-label>Category</ion-label>
           <div class="d-flex align-items-center">
              <span>Plant</span>
                <ion-toggle slot="end" color="primary"></ion-toggle>
               <span class="ml-10">Animal</span>
            </div>
     </ion-item>
    

    我将 div 显示设置为 flex。代码如下。

    .ml-10{
        margin-left: 10px;
    }
    
    .d-flex{
        display: flex;
    }
    
    .align-items-center{
        align-items: center;
    }
    

    Click here to see the result.

    【讨论】:

      【解决方案2】:
      <ion-col  size-md="3" >
                      <ion-item>
                          <ion-label position="stacked">Is Technician</ion-label>
                          <div>
                              <label style="margin-top: 10px; position: fixed;">No</label>
                              <ion-toggle formControlName="isTech" style="margin-left: 35px;" ></ion-toggle>
                              <label style="margin-top: 10px; margin-left: 15px;  position: fixed;">Yes</label>
                          </div>
                      </ion-item>
                  </ion-col>
      

      这似乎适用于网络,但对于移动设备,文本在底部对齐,因此也需要针对移动设备调整页边距。我会使用 ionic 中的平台检查来确定要使用的边距。

      【讨论】:

      • 只有在没有滚动的情况下才有效,因为位置是固定的,但是使位置绝对可以解决问题。
      • 现在,如果有人对使用不同尺寸标签的一种实现有更好的建议,我将不胜感激
      • 为什么不为你的 div 使用 flexbox?
      猜你喜欢
      • 1970-01-01
      • 2018-05-04
      • 2018-07-12
      • 2021-06-28
      • 2018-10-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多