Ioni c 4 вкладок: как создавать собственные вкладки

Question

Я пытаюсь стилизовать свои вкладки, чтобы они выглядели так, как показано в ссылке.

.

В настоящее время у меня есть стиль вкладки по умолчанию, и я не знаю, как go настроить его так, чтобы он выглядел так, как показано на связанном изображении. Любая помощь от сообщества будет оценена.

Answer 1

Вот моя проблема,

ИСПЫТАНО НА CHROME Эмулятор Pixel 2 XL это важно, потому что переменные, которые я использовал, будут совершенно отличаться на разных экранах ios , Я лично использовал 411x823 , который является размером экрана на телефоне Pixel 2 XL. Вам нужно будет самостоятельно обработать все необходимые случаи измерения экрана с помощью css медиазапросов, чтобы получить общее решение.

Начальный экран: Это то, с чего я начал. Я начал с того, что похоже на приложение вкладок по умолчанию ioni c. Как то, что у вас есть. Так как мы имеем дело только с html и scss, это то, что я покажу.

tabs-page.scss начальный файл.

.tabbar {
  justify-content: center;
}

.tab-button {
  max-width: 200px;
}

::ng-deep ion-icon.icon-button {
  background: var(--ion-color-primary-tint)!important;
  color: white;
  border-radius: 50%!important;
}

tabs-page.html начальный файл.

<ion-tabs>
  <ion-tab-bar *ngIf="tabSlot === 'bottom'" slot="bottom">

    <ion-tab-button tab="marketplace">
      <ion-icon mode="md" name="home"></ion-icon>
      <ion-label>Marketplace</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="friends">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Friends</ion-label>
      <ion-badge *ngIf="friendCount > 0" color="danger">{{friendCount}}</ion-badge>
    </ion-tab-button>

    <ion-tab-button (click)="openRequestPage()">
      <ion-icon name="add-circle-outline" class="icon-button"></ion-icon>
      <ion-label>Request</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
      <ion-icon name="notifications"></ion-icon>
      <ion-label>Notifications</ion-label>
      <ion-badge *ngIf="notificationCount > 0" color="danger">{{notificationCount}}</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

Конечный экран: Это то, что вы ищете в грубом смысле.

Конечный результат: Это то, что я в итоге создал из кода, с которого я начал. Решение включает использование атрибута box-shadow css для придания "отрицательного" стиля border-radius. И тогда вам нужно расположить центральную кнопку чуть выше tab-bar. Я использовал этот учебник , чтобы направлять меня. Также выяснить, как работает box-shadow, можно разобраться со спецификой.

tabs-page.scss конечный файл.

.tabbar {
  justify-content: center;
}

.tab-button {
  max-width: 200px;
}

::ng-deep ion-icon.icon-button {
  background: var(--ion-color-primary-tint)!important;
  color: white;
  border-radius: 50%!important;
}

:host ::ng-deep .tabs-inner {
  position: unset!important;
  contain: size style!important;
}

.bottom-tab-bar {
  --background: transparent;
  --border: 0;
}

ion-tab-button {
  --background: beige;
}

.button-center {
  --background: transparent!important;
  ion-icon {
    height: 50px;
    width: 50px;
    font-size: 75px;
  }
}

ion-tab-bar {
  &:before {
    box-shadow: 0 387px 0 300px beige;
    position: absolute;
    margin-top: -48px;
    padding: 56px;
    border-radius: 65%;
    content: '';
  }
}

.inner-left-btn {
  border-radius: 0 39% 0 0; // create the curved style on the left side of the center
}

.inner-right-btn {
  border-radius: 39% 0 0 0; // create the curved style on the right side of the center
}

.inner-center-btn {
  position: absolute;
  left: calc(50% - 35px); // position your button in the center
  bottom: 20px; // position your button slightly above the half bezel
  font-size: 70px;
  --background: transparent;
}

tabs-page.html конечный файл.

<ion-tabs>
  <ion-icon name="add-circle-outline" class="icon-button inner-center-btn" (click)="openRequestPage()"></ion-icon>

  <ion-tab-bar *ngIf="tabSlot === 'bottom'" slot="bottom" class="bottom-tab-bar">

    <ion-tab-button tab="marketplace">
      <ion-icon mode="md" name="home"></ion-icon>
      <ion-label>Marketplace</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="friends" class="inner-left-btn">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Friends</ion-label>
      <ion-badge *ngIf="friendCount > 0" color="danger">{{friendCount}}</ion-badge>
    </ion-tab-button>

    <ion-tab-button class="button-center">
      <div></div>
    </ion-tab-button>

    <ion-tab-button tab="notifications" class="inner-right-btn">
      <ion-icon name="notifications"></ion-icon>
      <ion-label>Notifications</ion-label>
      <ion-badge *ngIf="notificationCount > 0" color="danger">{{notificationCount}}</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>