Comments (4)
@Andranik0 Check out v.1.1.51
New property followerElement
implemented.
Try it out:
drawer: CupertinoPane;
constructor() {}
ngOnInit() {
this.drawer = new CupertinoPane('.cuper', {
followerElement: 'ion-fab',
buttonClose: false,
initialBreak: 'bottom',
breaks: {
top: { enabled: true, offset: 290 },
middle: { enabled: false },
bottom: { enabled: true, offset: 110 },
},
});
this.drawer.present({animated: true});
}
<ion-content [fullscreen]="true">
<ion-fab horizontal="end" vertical="center">
<ion-fab-button size="small">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<div class="cuper">
<h1>Header</h1>
<p>Content</p>
</div>
</ion-content>
from panes.
In this example ion-fab following pane onDrag events.
You can complete behavior for other events with similar way.
Feel free to ask if you stuck on some moment.
<ion-content [fullscreen]="true">
<ion-fab horizontal="end" vertical="bottom" id="fab-button">
<ion-fab-button>
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<div class="cupertino-pane">
<h1>Header</h1>
<p>Content</p>
</div>
</ion-content>
public drawer: CupertinoPane;
public fabButton: HTMLElement;
constructor() {}
ngOnInit() {
this.fabButton = document.getElementById('fab-button');
this.drawer = new CupertinoPane('.cupertino-pane', {
onDrag: (ev) => {
this.fabButton.style.bottom = `${window.innerHeight}px`;
this.fabButton.style.transform = `translateY(${this.getPaneTransformY}px)`;
}
});
this.drawer.present();
}
get getPaneTransformY():number {
const translateYRegex = /\.*translateY\((.*)px\)/i;
return parseFloat(translateYRegex.exec((<any>document.querySelector('.pane')).style.transform)[1]);
}
from panes.
Hi @roman-rr,
Thanks for your answer.
Unfortunately, it seems it does not fully take into account the elasticity/bounce property of the pane's moves, and thus leads to unexpected behaviors at the end of the drag.
Could it be possible to directly integrate the fabButton to the pane component in order to display it right above the "draggable" section (to get something similar to the already existing "close button" but outside the pane)? Or maybe fix the behavior described above regarding the use of onDrag?
Some screenshots to let you understand my issue:
(works while we drag: "bottom" of the fabButton is properly set)
(does not work once we stop dragging: "bottom" of the fabButton is set at the drag end and does not follow the animation / the pane's rebound)
TS code:
drawer: CupertinoPane;
fabButton: HTMLElement;
constructor() {}
ngOnInit() {
this.fabButton = document.getElementById('fab-button');
this.drawer = new CupertinoPane('.cuper', {
onDrag: (ev) => {
this.fabButton.style.bottom = `${window.innerHeight}px`;
this.fabButton.style.transform = `translateY(${this.getPaneTransformY}px)`;
},
buttonClose: false,
initialBreak: 'bottom',
breaks: {
top: { enabled: true, offset: 290 },
middle: { enabled: false },
bottom: { enabled: true, offset: 110 },
},
});
this.drawer.present();
}
get getPaneTransformY(): number {
const translateYRegex = /\.*translateY\((.*)px\)/i;
return parseFloat(translateYRegex.exec((<any>document.querySelector('.pane')).style.transform)[1]);
}
HTML code:
<ion-content [fullscreen]="true">
<ion-fab id="fab-button" horizontal="end" vertical="bottom">
<ion-fab-button size="small">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<div class="cuper">
<h1>Header</h1>
<p>Content</p>
</div>
</ion-content>
Thanks a lot!
Andra
from panes.
Hi @roman-rr,
It works perfectly! Good job!
Thanks,
Andra
from panes.
Related Issues (20)
- [BUG] Incorrect processing of removing focus from input HOT 1
- [BUG] Swiperjs within pane HOT 2
- [FEAT] Playground app
- [FEAT] Modal
- [FEAT] Sounds haptics
- [FEAT] Improve touch gestures
- [BUG] Keyboard reset breakpoints to default HOT 1
- [BUG] Ionic apps required await for componentOnReady() before set event listeners HOT 9
- [BUG] Textarea with Keyboard
- [BUG] overflow-y stop working when switching pages HOT 10
- [FEAT] Update changelog & Add husky to project HOT 3
- [FEAT] Add husky to project
- [BUG] ion-select-options appear behind the pane, select itself doesnt. HOT 3
- [BUG] z-Index issue or request to set it manually. HOT 2
- [FEAT] Close all panes on hardware back button event HOT 2
- [BUG] modal appears and overlaps screen if parentElement is gone HOT 1
- [BUG] fitHeight not set height HOT 6
- [FEAT]
- [BUG] calcFitHeight need some time to calc correctly HOT 1
- [BUG] Panes cannot be dragged in Chrome HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from panes.