Monaca Onsen UI Discord Chat Github Repo

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.