我的离子内容与Ionic 4中的标题重叠。
我正在我的Ionic 4应用程序中工作，我已经安装了Ionic 4选项卡主题，并且通过在app.component.html中添加标题代码使标题变得通用，但问题是我的标题与标题重叠。
这是我的app.component.html
<ion-header>
<ion-toolbar>
<ion-icon name="more" slot="end"></ion-icon>
</ion-toolbar>
</ion-header>
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>这是我的tab1.page.html
<ion-content>
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-subtitle>Get Started</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
</ion-content>我刚刚在Ionic 4中安装了选项卡的新主题，我只做了这些更改。
任何帮助都是非常感谢的。
这是我的StackBlitz
回答 3
Stack Overflow用户
发布于 2019-02-27 09:33:35
为了避免ion-content的重叠，您应该向ion-content添加样式
<ion-content class="content"></ion-content>
.content{
margin-top: 50px;
}你可以试试上面的方法，也可以试试，如果这管用的话。
<ion-content padding>
</ion-content>将填充添加到ion-content标记
您可以在这里查看任何其他解决方案，离子含量与标头重叠。
Stack Overflow用户
发布于 2020-11-25 16:15:15
你能试试这个吗？
<ion-app>
<ion-header>
<ion-toolbar>
<ion-icon name="more" slot="end"></ion-icon>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>
</ion-app>Stack Overflow用户
发布于 2020-10-29 10:54:33
对于那些不想处理近似的css样式的人，@AJT82 82指出了正确的处理方法。通过创建自定义标头组件，您将不必使用任何边距或填充样式。此外，您还可以选择在特定页面上显示自定义标题。
假设我的工具栏需要在组件HomePageModule上，我创建了一个子组件toolbar.ts。然后在home.module.ts中导入它并将其声明到home.page.html中。
toolbar.ts
使用Input从html检索title参数：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-toolbar',
templateUrl: 'toolbar.html',
styleUrls: ['toolbar.scss']
})
export class AppToolbar {
@Input() public title: string;
constructor() {}
}toolbar.html
显示从模块接收到的title：
<ion-header>
<ion-toolbar>
<ion-title>{{title}}</ion-title>
</ion-toolbar>
</ion-header>home.module.ts
导入toolbar的模块：
import { AppToolbar } from './toolbar/toolbar';
@NgModule({
declarations: [AppToolbar]
})
export class HomePageModule {}home.page.html
然后，在home模板中使用title参数声明它：
<app-toolbar [title]="'My Custom Title'"></app-toolbar>
<ion-content>
<!-- content -->
</ion-content>每个页面都应该导入这个组件并将其声明到它的html页面中。通过这样做，toolbar不会超过内容页面，并且可以显示特定的标题。
https://stackoverflow.com/questions/54902046
复制相似问题
腾讯云开发者
