Toast, Notifications and Components

gobiyau

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
    });
};

gobiyau

I found out the reason, because I put the '<ons-toast> inside <ons-page>, put outside ons-page, everything become normal.