每侧带有标签的离子切换

Posted 2023-03-16

【中文标题】每侧带有标签的离子切换

【英文标题】：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>]

预期文本与切换对齐

【参考方案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？