Question

我正在尝试在离子项目中嵌套的离子切换组件的每一侧添加标签。文本将始终位于较低位置，而我无法使文本向上移动。

我尝试了标签上的各种边距和填充。我曾尝试使用离子记事本组件，但根本无法使这些文本标签向上滑动。没有特殊的css离子项目或离子切换。

 [![<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>]

期望文本与拨动开关对齐

Answer 1

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

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

Answer 2

这就是我所做的并且有效； 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 个答案: