ion-Checkbox только на поле кликабельно

Question

Я хочу отделить мой <ion-checkbox> от <ion-label>. Поэтому основная проблема заключается в том, что я должен отображать дополнительную информацию, если вы нажмете на ярлык, но вы не должны активировать флажок. Флажок следует активировать, только если щелкнуть «значок флажка / квадрат флажка».

<div>
  <ion-list>
    <ion-item *ngFor="let list of list">
    <ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
    <ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
  </ion-item></ion-list>
</div>

Может ли кто-нибудь мне помочь?

Answer 1

Для ionic-4 присвойте свойству «position: относительный» флажок ion. Это работает!

ion-checkbox {
   position:relative;
}

Answer 2

Для ионного 4 есть обходной путь, используя слот start ion-item, как указано здесь .

<ion-item lines="full">
  <ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>

  <ion-label slot="start" (click)="labelClicked()">
    This is a separately clickable label
  </ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

При lines="full" нижняя граница фиксируется.

Answer 3

Это помогло мне:

ion-checkbox {
    .item-cover {
        width: 70px;
    }
}

Answer 4

Это не работает с Ionic 4, потому что Shadow Dom создает элемент кнопки, который накладывается на элемент метки и фиксирует события щелчка. Обходной путь для Ionic 4 - обернуть ионный флажок диапазоном и сделать его относительным. Таким образом, кнопка в Shadow Dom будет соответствовать только этому новому диапазону, оставляя метку свободной для назначения пользовательского события щелчка.

<span class="checkbox-container">
    <ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>

.checkbox-container {
   position: relative;      
}

Answer 5

Вы можете попробовать добавить этот кусок кода в свой CSS. Это скроет оверлей, который окутывает ваш флажок и ваш ярлык.

ion-checkbox .item-cover{
  display:none;
}