Changement de Côté arrière-plan du Menu d'en-tête et de la couleur dans Ionic2

Je suis très nouveau à Ionique 2 et je suis incapable de changer mon côté menu, la couleur de fond et aussi le menu de l'en-tête couleur de mon application. Toute aide appréciée! Ci-dessous l'extrait de code et le résultat souhaité(image). J'ai numéroté les exigences pour des raisons de commodité. Aussi, il serait très utile si quelqu'un peut aider avec la mise en œuvre de la liste déroulante de l'option(exigence non. 3). Fondamentalement, il devrait contenir une liste de sous-éléments. Merci à l'avance!

<ion-menu [content]="content">
  <ion-header no-border>
    <ion-toolbar color = "white">


            <ion-title class="titletext" style="display:inline-block" > 
               <div style = "width : 100%; height : 100%; background-color : white">
                  <div style = "float:left;width:75%">
                    <h3>MY APP </h3>
                  </div>
                  <div style = "float:right;width:25%">
                   <img src = "assets/icon/reports.PNG" />
               </div>
               </div>
            </ion-title>
            <!--<img  src="assets/icon/Wemart_Icon.png" alt="logo"  height="40px" width = "40px" >  -->

    </ion-toolbar>
  </ion-header>

 <ion-content>
   <div style = "color : #3DBCC0; width:100%; height : 100%">
    <ion-list>

      <!--<button menuClose ion-item *ngFor="let p of myPages" (click)="openPage(p)">
        <span text-color="my-custom-color2">{{p.title}}</span>
      </button>-->

       <button ion-item>
          <ion-icon name="home" item-left></ion-icon> HOME
       </button>

       <button ion-item>
          <ion-icon name="home" item-left></ion-icon> PORTFOLIO ANALYTICS
       </button>

       <button ion-item>
          <ion-icon name="home" item-left></ion-icon> EXPENSES
       </button>

       <button ion-item>
          <ion-icon name="home" item-left></ion-icon> UTILITY ANALYTICS
       </button>

       <button ion-item>
          <ion-icon name="home" item-left></ion-icon> TERMS OF USE
       </button>

       <button ion-item>
          <ion-icon name="home" item-left></ion-icon> SIGN OUT
       </button>

    </ion-list>
  </div>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Changement de Côté arrière-plan du Menu d'en-tête et de la couleur dans Ionic2

Je suis ajoutant des variables.scss code ci-dessous:

//Ionic Variables and Theming. For more info, please see:
//http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";

@import "ionic.globals";


//Shared Variables
//--------------------------------------------------
//To customize the look and feel of this app, you can override
//the Sass variables found in Ionic's source scss files.
//To view all the possible Ionic variables, see:
//http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$toolbar-background: white;
$toolbar-wp-title-text-align : left;

//Named Color Variables
//--------------------------------------------------
//Named colors makes it easy to reuse colors on various components.
//It's highly recommended to change the default colors
//to match your app's branding. Ionic uses a Sass map of
//colors so you can add, rename and remove colors as needed.
//The "primary" color is the only required color in the map.

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  color1 : #8FAADC,
  color2 : #DAE3F3,
  color3: #3DBCC0
);

//App iOS Variables
//--------------------------------------------------
//iOS only Sass variables can go here




//App Material Design Variables
//--------------------------------------------------
//Material Design only Sass variables can go here




//App Windows Variables
//--------------------------------------------------
//Windows only Sass variables can go here




//App Theme
//--------------------------------------------------
//Ionic apps can have different themes applied, which can
//then be future customized. This import comes last
//so that the above variables are used and Ionic's
//default are overridden.

@import "ionic.theme.default";


//Ionicons
//--------------------------------------------------
//The premium icon font for Ionic. For more info, please see:
//http://ionicframework.com/docs/v2/ionicons/

@import "ionic.ionicons";


//Fonts
//--------------------------------------------------

@import "roboto";
@import "noto-sans";
  • ajouter variables.scss
  • pouvez-vous préciser?qu'est-ce exactement à ajouter?
  • ajouter variables.scssle code à la question.
  • J'ai édité ma question et y ont été ajoutées. Plz vérifier! REMARQUE: le premier que j'ai compris maintenant qui peut être fait par la mise à jour de l' $de la barre d'outils de fond de la variable à la couleur souhaitée dans des variables.scss
  • Vérifier cette solution..
InformationsquelleAutor Debo | 2017-07-25