J'ai un menu latéral ionique.Je veux ajouter background-image.Side -Les codes de menu sont les suivants
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-log-out" ng-click="logout()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" style="background-color:red;">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
Dashboard
</ion-item>
<ion-item menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
Statistics
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Comment ajouter une image d'arrière-plan au menu latéral ionique
Vous pouvez définir votre CSS personnalisé comme suit:
.my-container {
background-image: url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");
background-repeat: repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 100%;
position: absolute;
}
.transp .item-content {
background-color: transparent !important;
color: #fff;
}
et appliquez ces classes aux éléments HTML appropriés:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content class="my-container">
<ion-list>
<ion-item class="transp" menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Dashboard
</ion-item>
<ion-item class="transp" menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Statistics
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
Voici un codepen: http://codepen.io/beaver71/pen/WrqgNm
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots