我正在尝试设置选项卡的样式,使其看起来像链接中显示的内容。
。
我目前具有默认的标签样式,不知道如何调整它使其看起来像链接图像中显示的样子。社区的任何帮助将不胜感激。
这是我的努力
在CHROME Pixel 2 XL模拟器上进行了测试,这一点很重要,因为在不同的屏幕比例下,我使用的变量看起来绝对不同。我个人使用了411x823,这是Pixel 2 XL手机的屏幕尺寸。您将需要通过CSS媒体查询自行处理所有必要的屏幕尺寸,以获取常规解决方案。
初始屏幕:这就是我的开始。我从看起来像默认标签离子应用程序开始。喜欢你所拥有的。由于我们只处理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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句