Удалить разделитель ионного элемента

Как удалить разделитель <ion-item>? У меня есть следующий код для отображения 4 элементов подряд:

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
              <ion-item color="dark">
                  <ion-avatar item-left>
                      <img [src]="photo" class="img img-circle"/>
                  </ion-avatar>
                  {{user.name}}
              </ion-item>
              </ion-col>
            </ion-row>

и вывод показывает 4 изображения подряд, как исключение, но каждое изображение имеет белый разделитель под ним. Я не хочу никакого делителя.

Я попытался установить style="border:none", но это не помогло.


ionic-framework divider ionic2
person TheUnreal    schedule 29.12.2016    source источник
comment
показать изображение/скриншот.. Трудно понять... Может быть, ion-col, ion-row имеет какой-то css, который показывает границу.   -  person Atul Sharma    schedule 29.12.2016
comment
Обычно в сеточных системах имеется прокладка для создания воздуха между блоками. Я думаю, что style=padding: 0 в вашем элементе ion-col должен помочь. Но я думаю, что, возможно, вам следует переосмыслить использование ion-row и ion-cols здесь, так как это кажется слишком сложным для ваших нужд.   -  person Benedicte Raae    schedule 29.12.2016

Ответы (8)


arrow_upward
68
arrow_downward

используйте 1_

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
         <ion-item no-lines color="dark"><!-- here -->
              <ion-avatar item-left>
                  <img [src]="photo" class="img img-circle"/>
              </ion-avatar>
              {{user.name}}
         </ion-item>
     </ion-col>
</ion-row>
person Suraj Rao    schedule 29.12.2016
comment
Спасибо @jegadeesh, добавление <IonItem lines="none"> решило мою проблему в Ionic5!! Ваше здоровье! - person Bebbolin; 15.05.2020

arrow_upward
54
arrow_downward

По какой-то причине это не сработало для меня. Но наличие lines="none" отлично сработало.

Для ионной версии 4

<ion-item lines="none"> </ion-item>

Взято из ionic docs... https://ionicframework.com/docs/api/list

person Rmalmoe    schedule 30.01.2019
comment
Это для ionic v4 и выше. - person Suraj Rao; 08.02.2019
comment
Спасибо Ionic за то, что снова все изменили. - person Dicer; 26.03.2019
comment
Это работает в angular 8, отмеченное решение не работает - person ASomN; 31.03.2020

arrow_upward
9
arrow_downward

Для ionic v4 вы должны использовать свойство lines:

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
         <ion-item lines="none" color="dark">
              <ion-avatar item-left>
                  <img [src]="photo" class="img img-circle"/>
              </ion-avatar>
              {{user.name}}
         </ion-item>
    </ion-col>
</ion-row>
person Team Elite    schedule 26.04.2019

arrow_upward
7
arrow_downward

Примените это для Ionic V4. Это действительно сработает. Удачного кодирования.

<ion-item lines="none">
</ion-item>
person Maksudul Hasan Raju    schedule 15.12.2019

arrow_upward
5
arrow_downward

Если вы хотите глобально отключить линии/границы для всех ваших <ion-item>, просто добавьте следующий код в src/global.scss (по умолчанию при создании приложения Ionic v4 с Angular) вашего приложения.

ion-item {

    --border-width: 0;
    --inner-border-width: 0;
}

Атрибут lines="none" в <ion-item> не делает ничего другого.

Надеюсь, это поможет кому-то.

Привет Unkn0wn0x

person Unkn0wn0x    schedule 19.01.2020
comment
Спасибо. Я искал глобальное решение. - person Tapas Mukherjee; 29.03.2020

arrow_upward
3
arrow_downward

Я пробовал без строки, но это не сработало в ionic 4

Только это работает для меня в ionic 4:

<ion-item lines="none"> </ion-item>

<ion-list>
 <ion-item lines="none" button detail *ngFor="let note of notesService.notes">
      <ion-label>{{ note.title }}</ion-label>
    </ion-item>
</ion-list>
person joelss7    schedule 18.09.2019

arrow_upward
0
arrow_downward

Я на ionic 4, и иногда строки = "none" не работают. Поэтому я использую эту линию.

ion-list:not(.list-lines-none) ion-item::before{
    border-width: 0 !important;
}

И это мой пример ionItem. (Он также имеет свойство скрытой ошибки)

<IonItem lines="none" detail={false}>
    <IonIcon
        className="w-40 h-40 float-left"
        src="/assets/icon/store-black.svg"
    />
    <IonLabel className="flex flex-col ml-10">
        <h5 className="text-base font-bold m-0 ">Lorem ipsum </h5>
        <span className="text-sm leading-tight">Kratki opis</span>
    </IonLabel>
    <IonIcon
        className=" absolute top-50 right-30 w-15 h-15"
        src="/assets/icon/arrow-right.svg"
    />
</IonItem>
person kristian lepi    schedule 27.04.2020

arrow_upward
0
arrow_downward

используйте (lines=none) в вашем ion-item

person Hariharan R    schedule 23.12.2020