如何定制离子4 sidemenu?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何定制离子4 sidemenu?相关的知识,希望对你有一定的参考价值。
我试图定制离子自动生成的侧面菜单时遇到麻烦。
sidemenu位于“app.component.html”,它看起来如下:
<ion-app>
<ion-menu contentId="content1" side="start" >
<ion-header >
<ion-toolbar >
<ion-avatar>
<img [src]="image">
</ion-avatar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
p.title
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main ></ion-router-outlet>
</ion-app>
我试图使用属性“style:background-color:#000000”来改变样式,如果我把它放在每个元素上它都有效,但我想知道是否有一些更简单有效的自定义方式侧面菜单。
谢谢你的团队!
答案
<ion-content class="abc">
</ion-content>
使用内容类以这种方式改变背景:它工作.....
.abc
--background: var(--ion-background-color,linear-gradient(to left,#E67D22, #1C4577)) !important;
或仅使用颜色而不是渐变
.abc
--background: var(--ion-background-color,red) !important;
另一答案
您需要知道的第一件事是离子'<ion-content>','<ion-list>'是指令。您可以使用css操纵这些指令的模板设计。
对于Eg。
在HTML-
<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
p.title
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</div>
在您的应用程序的全局css文件中,即app.scss
.side-nav-menu
//add style if you want any...for eg border, shadow.etc
.side-nav-menu .ion-item
//style for ion-item
注意: - 请记住,指令(属性)名称也是同一指令的类名。例如。如果指令名是ion-item并且你想要将自定义css添加到这个指令,那么你需要在全局scss文件中使用.ion-item类添加css
以上是关于如何定制离子4 sidemenu?的主要内容,如果未能解决你的问题,请参考以下文章
Sublime Text自定制代码片段(Code Snippets)