Как установить флажок в верхней части в элементе ion с элементом, отмеченным флажком? - PullRequest
Новая
       3

Как установить флажок в верхней части в элементе ion с элементом, отмеченным флажком?

0 голосов
/ 07 февраля 2020

У меня есть ion-list, и у каждого предмета есть ion-checkbox и ion-label. Вроде как список задач. Проблема в том, что у меня на label указан текст обтекания (class="ion-text-wrap"), но выравнивание не так, как мне бы хотелось:

I Хотелось бы чтобы флажок был выровнен сверху, а не посередине. Есть ли способ сделать это?

Ответы [ 2 ]

2 голосов
/ 10 февраля 2020

ion-item - это дисплей гибкого класса item-native css. Так что вам просто нужно установить флажок и align-self: start;, чтобы отобразить его сверху: 

<ion-list class="checklist">
    <ion-item>
        <input type="checkbox">
        <label class="ion-text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu mattis, auctor velit ut, suscipit lacus.</label>
    </ion-item>

    <ion-item>
        <input type="checkbox">
        <label class="ion-text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu mattis, auctor velit ut, suscipit lacus.</label>
    </ion-item>
</ion-list>

с css: 

.checklist ion-item > input {
    align-self: start;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
}

Будет отображаться:

enter image description here

Проверено на ioni c 4, также почему бы вам не использовать ion-checkbox?

Надеюсь, это поможет!

1 голос
/ 10 февраля 2020

Самый простой способ решить эту проблему - поместить контейнер вокруг input и label и использовать модель макета flexbox. Flexbox автоматически выровняет по вертикали input и label по верху контейнера, а обернутый текст label останется внутри флажка.

HTML: 

<div class="container">
  <input type="checkbox" name="val1" value="something">
  <label for="vehicle1"> I have a really long label that sits next to this checkbox and wraps around and around and around the box. Watch me go... </label>
</div>

CSS: 

/* Set container with flex */
/* Children will automatically be aligned in a row */
.container {
  display: flex;
  margin: 15px 30px;
  max-width: 500px;
}

label {
  padding-left: 7px;
}

Демонстрация на Codepen: https://codepen.io/staypuftman/pen/mdJJWNq

...