Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (90 sloc) 3.65 KB
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="|Raleway:400,700|Roboto:300,400,500,600,900," rel="stylesheet">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../button/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="../input/style.css">
<link rel="stylesheet" href="../cover/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../assets/css/master.css">
.content {
margin-left: 50px
<script type="text/javascript" src="script.js"></script>
<body class="content">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Toast</h2>
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
<span class="tooltiptext">The dependencies will be installed together with this module</span>
To use this component you need install with the command:
<pre>mobileui install toast</pre>
To use, you need to call the function <code>openToast('YOUR MESSAGE')</code> or <code>openToast(objectCustomized)</code>.
See this small example:
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div|padding,padding body" border="true" height-preview="400px" multiplatform="true">
<body class="padding body">
<button class="blue full radius margin-bottom" onclick="openToast('Simple message here Simp')">Show toast</button>
<button class="blue full radius margin-bottom" onclick="openToastTop()">Show toast top</button>
<button class="blue full radius margin-bottom" onclick="openToastCenter()">Show toast center</button>
<button class="blue full radius margin-bottom" onclick="openToastRed()">Show toast red</button>
<button class="blue full radius margin-bottom" onclick="openCustomToast()">Show custom toast</button>
function openToastTop() {
message: 'Simple message in top!',
position: 'top'
function openToastCenter() {
message: 'Simple message in center!',
position: 'center'
function openToastRed() {
message: 'Simple red message!',
class: 'red radius-big'
function openCustomToast() {
message: 'Custom message',
class: 'full text-big text-strong black-opacity-70 text-white',
position: 'top',
<!-- DONE -->
<script src=""></script>
<script src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
You can’t perform that action at this time.