javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +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"`.
*/
@Prop() side: Side = 'start';
@Prop({ reflectToAttr: true }) side: Side = 'start';
@Watch('side')
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.ios.vars";
// 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;
max-width: $split-pane-ios-side-max-width;
@ -14,7 +13,10 @@
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-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-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;
max-width: $split-pane-md-side-max-width;
@ -12,7 +12,10 @@
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-left: $split-pane-md-border;
}

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

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

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

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