Toast, Notifications and Components
-
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 }); };
-
I found out the reason, because I put the '<ons-toast> inside <ons-page>, put outside ons-page, everything become normal.