javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(split-pane): side=end works properly

Browse Source 
fixes #15013
This commit is contained in:
Manu Mtz.-Almeida
2018-08-07 23:40:53 +02:00
parent 2ff585f305
commit dc500035ed
5 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/menu/menu.tsx
View File

@ -90,7 +90,7 @@ export class Menu {
/** /**
* Which side of the view the menu should be placed. Default `"start"`. * Which side of the view the menu should be placed. Default `"start"`.
*/ */
@Prop() side: Side = 'start'; @Prop({ reflectToAttr: true }) side: Side = 'start';
@Watch('side') @Watch('side')
protected sideChanged() { protected sideChanged() {

8
core/src/components/split-pane/split-pane.ios.scss
View File

@ -1,12 +1,11 @@
@import "../../themes/ionic.globals.ios";
@import "./split-pane"; @import "./split-pane";
@import "./split-pane.ios.vars"; @import "./split-pane.ios.vars";
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
.split-pane-ios.split-pane-visible > .split-pane-side { .split-pane-ios.split-pane-visible > .split-pane-side[side=start] {
min-width: $split-pane-ios-side-min-width; min-width: $split-pane-ios-side-min-width;
max-width: $split-pane-ios-side-max-width; max-width: $split-pane-ios-side-max-width;
@ -14,7 +13,10 @@
border-left: 0; border-left: 0;
} }
.split-pane-ios.split-pane-visible > .split-pane-side[side=right] { .split-pane-ios.split-pane-visible > .split-pane-side[side=end] {
min-width: $split-pane-ios-side-min-width;
max-width: $split-pane-ios-side-max-width;
border-right: 0; border-right: 0;
border-left: $split-pane-ios-border; border-left: $split-pane-ios-border;
} }

7
core/src/components/split-pane/split-pane.md.scss
View File

@ -4,7 +4,7 @@
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
.split-pane-md.split-pane-visible > .split-pane-side { .split-pane-md.split-pane-visible > .split-pane-side[side=start] {
min-width: $split-pane-md-side-min-width; min-width: $split-pane-md-side-min-width;
max-width: $split-pane-md-side-max-width; max-width: $split-pane-md-side-max-width;
@ -12,7 +12,10 @@
border-left: 0; border-left: 0;
} }
.split-pane-md.split-pane-visible > .split-pane-side[side=right] { .split-pane-md.split-pane-visible > .split-pane-side[side=end] {
min-width: $split-pane-md-side-min-width;
max-width: $split-pane-md-side-max-width;
border-right: 0; border-right: 0;
border-left: $split-pane-md-border; border-left: $split-pane-md-border;
} }

25
core/src/components/split-pane/split-pane.scss
View File

@ -33,7 +33,6 @@
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
order: -1;
} }
.split-pane-side:not(ion-menu) { .split-pane-side:not(ion-menu) {
@ -41,33 +40,9 @@
} }
.split-pane-visible > .split-pane-side[side=start] { .split-pane-visible > .split-pane-side[side=start] {
@include multi-dir() {
order: -1; order: -1;
} }
}
.split-pane-visible > .split-pane-side[side=end] { .split-pane-visible > .split-pane-side[side=end] {
@include multi-dir() {
order: 1; order: 1;
} }
}
.split-pane-visible > .split-pane-side[side=left] {
@include ltr() {
order: -1;
}
@include rtl() {
order: 1;
}
}
.split-pane-visible > .split-pane-side[side=right] {
@include ltr() {
order: 1;
}
@include rtl() {
order: -1;
}
}

2
core/src/components/split-pane/test/basic/index.html
View File

@ -13,7 +13,7 @@
<ion-app> <ion-app>
<ion-split-pane id="splitPane"> <ion-split-pane id="splitPane">
<ion-menu side="start"> <ion-menu side="end">
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">