граница ионного элемента внутри пользовательского компонента - PullRequest
Новая
       5

граница ионного элемента внутри пользовательского компонента

0 голосов
/ 29 сентября 2018

У меня есть разметка, как показано ниже. 

<ion-item-group>
   <ion-item>First</ion-item>
   <ion-item>Second</ion-item>
   <ion-item>Third</ion-item>
</ion-item-group>

<ion-item-group>
    <custom-component></custom-component>
    <custom-component></custom-component>
</ion-item-group>

#Custom component markup#
<ion-item>Test<ion-item>

Проблема в том, что для элемента ion внутри моего пользовательского компонента стандартная нижняя граница не рисуется.Потому что в DOM они внутри пользовательского компонента.Как вернуть нижнюю границу?

https://stackblitz.com/edit/ionic-7a3ai5?file=app%2Fapp.module.ts. См. Домашний компонент, например

1 Ответ

0 голосов
/ 29 сентября 2018

Похоже, проблема в следующих правилах стиля: 

ion-item-group .item-md .item-wrapper:last-child .item-inner, 
ion-item-group .item-md:last-child .item-inner {
  border: 0;
}

ion-item-group .item-ios:last-child .item-inner, 
ion-item-group .item-wrapper:last-child .item-ios .item-inner {
    border: 0;
}

И они применяются, потому что каждый custom-component включает только один элемент, поэтому каждый элемент является последним дочерним элементом своего родителя.

Одним из способов решения этой проблемы является ручное применение границы Ionic по умолчанию к каждому элементу в вашем пользовательском компоненте (кроме элемента в последнем custom-component, как это делает Ionic).

Рабочая демоверсия 

custom-component {

  /* ------- */  
  /* Android */
  /* ------- */

  /* Add the border to each item */
  .item-md.item-block .item-inner,
  ion-item-group .item-md .item-wrapper:last-child .item-inner, 
  ion-item-group .item-md:last-child .item-inner {
    border-bottom: 1px solid #dedede;
  }

  /* Remove the border from the last custom component item */
  &:last-child {
    .item-md .item-wrapper:last-child .item-inner, 
    .item-md:last-child .item-inner {
        border: 0;
    }
  }

  /* --- */
  /* iOS */
  /* --- */

  /* Add the border to each item */
  .item-ios.item-block .item-inner,
  ion-item-group .item-ios:last-child .item-inner, 
  ion-item-group .item-wrapper:last-child .item-ios .item-inner {
    border-bottom: .55px solid #c8c7cc;
  }

  /* Remove the border from the last custom component item */
  &:last-child {
    .item-ios:last-child .item-inner, 
    .item-wrapper:last-child .item-ios .item-inner {
        border: 0;
    }
  }
}
...