Стиль пользовательских компонентов и их прорезанные элементы - PullRequest
Новая
       32

Стиль пользовательских компонентов и их прорезанные элементы

0 голосов
/ 28 января 2019

Я перевожу свое приложение с Ionic V3 на V4.Почти готово, кроме ... У меня проблемы со стилем.Например, я перенес свой HTML-код в нечто подобное, используя слоты: 

  <ion-list>
    <ion-item class="list-item" *ngFor="let a of v">
      <ion-avatar slot="start">
        <img class="mainImg" [src]="a.image ? a.image : globals.userImage">
        <img class="candle" [src]="'assets/imgs/home/candle.png'">
      </ion-avatar>
      <h3 class="item-title">{{a.first_name}} {{a.last_name}}</h3>
      <p class="item-description">
        In X days
        <span>
          {{a.day}} {{a.monthName}}
        </span>
      </p>
      <div class="badgeHolder" (click)="gotoSpecialPage()"><ion-badge slot="end">special page</ion-badge></div>
      <span slot="end" class="iconHolder" (click)="gotoNormalPage()"><ion-icon name="arrow-dropright"></ion-icon></span>
    </ion-item>
  </ion-list>

CSS, который у меня был до обновления: 

  ion-list.list {
    margin-bottom: 0;

    div.list-item.item-block {
      background-color: #343B43;
      margin: 0;
      border-bottom: 1px solid #dedede;
      position: relative;

      ion-avatar {
        position: relative;

        img.mainImg {
          width: 60px;
          height: 60px;
        }

        img.candle {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 20%;
          height: auto;
          border-radius: initial;
        }
      }

      div.item-inner {
        border: 0;
        margin: 0;

        h3 {
          color: white;
          font-weight: 600;
          text-transform: uppercase;
        }

        p.item-description {
          color: white;
          font-size: 13px;

          span {
            font-size: 12px;
            color: #9D9992;
          }
        }

        div.badgeHolder {
          text-align: right;
          margin-right: 28px;

          ion-badge {
            background-color: #907027;
            padding: 7px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 300;
            letter-spacing: 1px;
          }
        }

        span.iconHolder {
          background-color: #2B3036;
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 13px;
          color: #907027;
          font-size: 36px;
        }
      }
    }
  }

Так что, конечно, некоторые измененияПонятно, что div.list-item.item-block просто становится ion-item или background-color: #343B43; и может быть преобразовано в --background благодаря переменным css4.Но есть много вещей, которые я не могу легко перенести ... Кроме того, мне бы очень хотелось обойти головную боль, чтобы иметь и переосмыслить каждую строку нашего css-кода в соответствии с переменными css4, доступными в Ionic doc.- это было написано разными людьми, и это заняло бы у меня слишком много времени.

Для предыдущего примера вот как выглядит теневой дом: 

<div class="item-native">
  <slot name="start"></slot>
  <div class="item-inner">
    <div class="input-wrapper" style="">
      <slot style="">
        <!--h3, p, div are here-->
      </slot>
    </div>
    <slot name="end"></slot>
    <div class="item-inner-highlight"></div>
  </div>
</div>

И потому что item-inner отображается в горизонтальном изгибе, мой h3, p, div появляется один за другим - конечно, это не то, что предназначено ...

Итак, у меня есть простое решение применить мои стили к слотам?элементы внутри ионных компонентов теневого дома?

1 Ответ

0 голосов
/ 28 января 2019

Если ionic правильно следует спецификации, глубокие селекторы устарели, и до сих пор нет способа применить css к теневому домену из родительского компонента без использования переменных css4.Существует черновик W3C для реализации Shadow Parts , но он все еще находится в разработке .

...