G
I found that using components is differ from using notifications. Using notifications is normal, but using components, toast will fall down from the bottom of the ons-toolbar, and rising from the top of the ons-bottom-toolbar.
You can check by the following code or check the example here.
HTML:
<ons-page>
<ons-toolbar>
<div class="center">Title</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Components</ons-list-header>
<ons-list-item tappable modifier="longdivider" onclick="toastDown.toggle()">
<div class="center">
Toast Down from the bottom of the ons-tootlbar
</div>
</ons-list-item>
<ons-list-item tappable modifier="longdivider" onclick="toastUp.toggle()">
<div class="center">
Toast Up from the bottom of the ons-bottom-tootlbar
</div>
</ons-list-item>
<ons-list-header>Notifcations</ons-list-header>
<ons-list-item tappable modifier="longdivider" onclick="showToastDown()">
<div class="center">
Toast Down
</div>
</ons-list-item>
<ons-list-item tappable modifier="longdivider" onclick="showToastUp()">
<div class="center">
Toast Up
</div>
</ons-list-item>
</ons-list>
<ons-bottom-toolbar>
</ons-bottom-toolbar>
<ons-toast id="toastUp" animation="ascend">
FABs down!
<button onclick="toastUp.hide()">ok</button>
</ons-toast>
<ons-toast id="toastDown" animation="fall">
FABs down!
<button onclick="toastDown.hide()">ok</button>
</ons-toast>
</ons-page>
JS:
var showToastDown = function() {
ons.notification.toast('Toast!', {
buttonLabel: 'Dismiss',
animation: 'fall',
timeout: 2000
});
};
var showToastUp = function() {
ons.notification.toast('Toast!', {
buttonLabel: 'Dismiss',
animation: 'ascend',
timeout: 2000
});
};