CODEWITHSUNDEEP
cssionic-frameworksassionic2
Codebadger
Codebadger

Reputation: 35

Ionic 2 SplitPane changing sass variables not working

I’m using split-pane component and want to change the min-width and max-width of the left panel according to my requirements .

For this I’m changing the the provided sass variables for SplitPane from ionic docs in the variables.scss file.

enter image description here

but the change is not reflected in the main.css file after doing ionic serve.

enter image description here

First I thought it could be problem with sass but I changed another variable called @background-color and it worked .

Please can anyone help with this?

Here is the ionic info

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 1.1.4
    Ionic Framework    : ionic-angular 2.2.0

System:

    Node : v6.11.1
    npm  : 3.10.10
    OS   : Windows 10

Misc:

    backend : legacy

Thanks.

Upvotes: 0

Views: 179

Answers (1)

Abayomi Israel
Abayomi Israel

Reputation: 629

According to the documentation here

By default, SplitPane will expand when the screen is larger than 768px. If you want to customize this, use the when input. The when input can accept any valid media query, as it uses matchMedia() underneath.

<ion-split-pane when="(min-width: 475px)">

  <!--  our side menu  -->
  <ion-menu [content]="content">
  ....
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

You can also customize it in your code

<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
class MyClass {
  constructor(){}
  shouldShow(){
    if(conditionA){
      return true
    } else {
      return false
    }
  }
}

Upvotes: 0

Related Questions