Commit 45085a80 authored by Martin Alvarez-Espinar's avatar Martin Alvarez-Espinar
Browse files

Distribution generated

parent a7fc07f5
Pipeline #18393 failed with stage
in 1 minute and 35 seconds
(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{539:function(t,s,a){"use strict";a.r(s);var e=a(31),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"dialogs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialogs"}},[t._v("#")]),t._v(" Dialogs")]),t._v(" "),a("p",[a("strong",[t._v("User dialogs")])]),t._v(" "),a("h2",{attrs:{id:"manifest-declaration"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manifest-declaration"}},[t._v("#")]),t._v(" Manifest Declaration")]),t._v(" "),a("p",[t._v("You need to declare the use of this API in the "),a("RouterLink",{attrs:{to:"/guide/manifest.html#features"}},[t._v("manifest's "),a("code",[t._v("features")])]),t._v(" member:")],1),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"system.prompt"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"module-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#module-import"}},[t._v("#")]),t._v(" Module Import")]),t._v(" "),a("p",[t._v("Before using this service in a component, you need to "),a("RouterLink",{attrs:{to:"/guide/scripting.html#import-and-export-modules"}},[t._v("import the module")]),t._v(" in the script section of the "),a("a",{attrs:{href:"../guide/ux-documents"}},[t._v("UX document")]),t._v(".")],1),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" prompt "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@system.prompt'")]),t._v(" \n")])])]),a("p",[t._v("Or")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" prompt "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@system.prompt"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),a("p",[t._v("This service has the following methods:")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"#showtoast-message-duration-image-gravity"}},[a("code",[t._v("showToast({message,duration,image,gravity})")])])]),t._v(" "),a("li",[a("a",{attrs:{href:"#showdialog-title-message-buttons-success-cancel-complete"}},[a("code",[t._v("showDialog({title,message,buttons,success,cancel,complete})")])])]),t._v(" "),a("li",[a("a",{attrs:{href:"#showcontextmenu-itemlist-itemcolor-success-cancel-complete"}},[a("code",[t._v("showContextMenu({itemList,itemColor,success,cancel,complete})")])])]),t._v(" "),a("li",[a("a",{attrs:{href:"#showloading-message-loadingcolor-mask"}},[a("code",[t._v("showLoading({message,loadingColor,mask})")])])]),t._v(" "),a("li",[a("a",{attrs:{href:"#hideloading"}},[a("code",[t._v("hideLoading()")])])])]),t._v(" "),a("h3",{attrs:{id:"showtoast-message-duration-image-gravity"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#showtoast-message-duration-image-gravity"}},[t._v("#")]),t._v(" "),a("code",[t._v("showToast({message,duration,image,gravity})")])]),t._v(" "),a("p",[a("strong",[t._v("This method displays a toast message.")])]),t._v(" "),a("h4",{attrs:{id:"arguments"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arguments"}},[t._v("#")]),t._v(" Arguments")]),t._v(" "),a("p",[t._v("This method requires an "),a("code",[t._v("object")]),t._v(" with the following attributes:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("message")]),t._v("\t("),a("code",[t._v("string")]),t._v("). Mandatory text to display in the toast.")]),t._v(" "),a("li",[a("code",[t._v("duration")]),t._v(" ("),a("code",[t._v("number")]),t._v("). Optional attribute with the duration of the toast display in milliseconds.")]),t._v(" "),a("li",[a("code",[t._v("image")]),t._v(" ("),a("code",[t._v("uri")]),t._v("). Optional URI with the path of the local image that will be displayed.")]),t._v(" "),a("li",[a("code",[t._v("gravity")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Optional attribute with the position of the toast on the screen. The value can be: "),a("code",[t._v("bottom")]),t._v(", "),a("code",[t._v("right")]),t._v(", "),a("code",[t._v("left")]),t._v(", "),a("code",[t._v("center")]),t._v(", or "),a("code",[t._v("top")]),t._v(".")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("prompt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n message"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n duration"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"100000"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n image"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Common/logo.png"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n gravity"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'center'")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"showdialog-title-message-buttons-success-cancel-complete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#showdialog-title-message-buttons-success-cancel-complete"}},[t._v("#")]),t._v(" "),a("code",[t._v("showDialog({title,message,buttons,success,cancel,complete})")])]),t._v(" "),a("p",[a("strong",[t._v("This method displays a pop-up dialog.")])]),t._v(" "),a("h4",{attrs:{id:"arguments-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arguments-2"}},[t._v("#")]),t._v(" Arguments")]),t._v(" "),a("p",[t._v("This method requires an "),a("code",[t._v("object")]),t._v(" with the following attributes:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("title")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Optional text with the title of the dialog.")]),t._v(" "),a("li",[a("code",[t._v("message")]),t._v("\t("),a("code",[t._v("string")]),t._v("). Optional text with the content of the dialog.")]),t._v(" "),a("li",[a("code",[t._v("buttons")]),t._v("\t("),a("code",[t._v("array")]),t._v("). Optional list containing the buttons (from one to three buttons). If several items are defined, the first one is is a positive button; the second would be a negative button; and the third item would be a neutral button. Each button is an "),a("code",[t._v("object")]),t._v(" with the following members:\n"),a("ul",[a("li",[a("code",[t._v("text")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Mandatory text with the label of the button.")]),t._v(" "),a("li",[a("code",[t._v("color")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Optional background color of the button.")])])]),t._v(" "),a("li",[a("code",[t._v("success")]),t._v("\t("),a("code",[t._v("function(res)")]),t._v("). Optional callback function corresponding to the successful execution.\n"),a("ul",[a("li",[a("code",[t._v("res.index")]),t._v(" is a "),a("code",[t._v("number")]),t._v(" that indicates the index number in the button sequence of the selected button after interaction.")])])]),t._v(" "),a("li",[a("code",[t._v("cancel")]),t._v(" ("),a("code",[t._v("function()")]),t._v("). Optional callback function corresponding to the canceled execution.")]),t._v(" "),a("li",[a("code",[t._v("complete")]),t._v(" ("),a("code",[t._v("function()")]),t._v("). Optional callback function corresponding to the end of the execution.")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("prompt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showDialog")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n message"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n buttons"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n text"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'OK'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#33dd44'")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n text"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Cancel'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#33dd44'")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handling callback"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("cancel")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cancel"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"showcontextmenu-itemlist-itemcolor-success-cancel-complete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#showcontextmenu-itemlist-itemcolor-success-cancel-complete"}},[t._v("#")]),t._v(" "),a("code",[t._v("showContextMenu({itemList,itemColor,success,cancel,complete})")])]),t._v(" "),a("p",[a("strong",[t._v("This method displays a context menu.")])]),t._v(" "),a("h4",{attrs:{id:"arguments-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arguments-3"}},[t._v("#")]),t._v(" Arguments")]),t._v(" "),a("p",[t._v("This method requires an "),a("code",[t._v("object")]),t._v(" with the following attributes:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("itemList")]),t._v(" ("),a("code",[t._v("array")]),t._v("). Mandatory "),a("code",[t._v("array")]),t._v(" of "),a("code",[t._v("strings")]),t._v(" with the items in the context menu.")]),t._v(" "),a("li",[a("code",[t._v("itemColor")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Optional color of the menu items.")]),t._v(" "),a("li",[a("code",[t._v("success")]),t._v("\t("),a("code",[t._v("function(res)")]),t._v("). Optional callback function corresponding to the successful execution.\n"),a("ul",[a("li",[a("code",[t._v("res.index")]),t._v(" is a "),a("code",[t._v("number")]),t._v(" that indicates the index number in the item sequence of the selected context menu item after user's interaction.")])])]),t._v(" "),a("li",[a("code",[t._v("cancel")]),t._v(" ("),a("code",[t._v("function()")]),t._v("). Optional callback function corresponding to the canceled execution.")]),t._v(" "),a("li",[a("code",[t._v("complete")]),t._v(" ("),a("code",[t._v("function()")]),t._v("). Optional callback function corresponding to the end of the execution.")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("prompt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showContextMenu")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n itemList"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n itemColor"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#ff33ff'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Handling callback"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("cancel")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Cancellation"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"showloading-message-loadingcolor-mask"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#showloading-message-loadingcolor-mask"}},[t._v("#")]),t._v(" "),a("code",[t._v("showLoading({message,loadingColor,mask})")])]),t._v(" "),a("p",[a("strong",[t._v("This method displays a loading pop-up dialog.")])]),t._v(" "),a("h4",{attrs:{id:"arguments-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arguments-4"}},[t._v("#")]),t._v(" Arguments")]),t._v(" "),a("p",[t._v("This method requires an "),a("code",[t._v("object")]),t._v(" with the following attributes:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("message")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Optional text with the message to display ("),a("code",[t._v("Loading...")]),t._v(" by default).")]),t._v(" "),a("li",[a("code",[t._v("loadingColor")]),t._v(" ("),a("code",[t._v("string")]),t._v("). Optional string with the color of the loading animation ("),a("code",[t._v("#CACACA")]),t._v(" by default)")]),t._v(" "),a("li",[a("code",[t._v("mask")]),t._v(" ("),a("code",[t._v("boolean")]),t._v("). Optional flag that indicates whether to use a mask to prevent a touch event on the elements under the loading dialog ("),a("code",[t._v("true")]),t._v(" by default).")])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("To close a loading pop-up, you need to use the "),a("a",{attrs:{href:"#hideloading"}},[a("code",[t._v("prompt.hideLoading()")]),t._v(" method")]),t._v(".")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("prompt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showLoading")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n message"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),t._v(" \n loadingColor"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n mask"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"hideloading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hideloading"}},[t._v("#")]),t._v(" "),a("code",[t._v("hideLoading()")])]),t._v(" "),a("p",[a("strong",[t._v("This method closes a loading pop-up dialog if it is already being shown.")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("prompt"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hideLoading")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{540:function(t,s,a){"use strict";a.r(s);var e=a(31),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"qr-code-scan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qr-code-scan"}},[t._v("#")]),t._v(" QR Code Scan")]),t._v(" "),a("p",[a("strong",[t._v("QR code scan")]),t._v(".")]),t._v(" "),a("h2",{attrs:{id:"manifest-declaration"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manifest-declaration"}},[t._v("#")]),t._v(" Manifest Declaration")]),t._v(" "),a("p",[t._v("You need to declare the use of this API in the "),a("RouterLink",{attrs:{to:"/guide/manifest.html#features"}},[t._v("manifest's "),a("code",[t._v("features")])]),t._v(" member:")],1),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"system.barcode"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"module-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#module-import"}},[t._v("#")]),t._v(" Module Import")]),t._v(" "),a("p",[t._v("Before using this service in a component, you need to "),a("RouterLink",{attrs:{to:"/guide/scripting.html#import-and-export-modules"}},[t._v("import the module")]),t._v(" in the script section of the "),a("a",{attrs:{href:"../guide/ux-documents"}},[t._v("UX document")]),t._v(".")],1),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" barcode "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@system.barcode'")]),t._v(" \n")])])]),a("p",[t._v("Or")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" barcode "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@system.barcode"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),a("p",[t._v("This service has the following methods:")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"#scan-success-fail-cancel-complete"}},[a("code",[t._v("scan({success,fail,cancel,complete})")])])])]),t._v(" "),a("h3",{attrs:{id:"scan-success-fail-cancel-complete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scan-success-fail-cancel-complete"}},[t._v("#")]),t._v(" "),a("code",[t._v("scan({success,fail,cancel,complete})")])]),t._v(" "),a("p",[a("strong",[t._v("This method scans a QR code using the camera of the device")]),t._v(".")]),t._v(" "),a("h4",{attrs:{id:"arguments"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arguments"}},[t._v("#")]),t._v(" Arguments")]),t._v(" "),a("p",[t._v("This method requires an "),a("code",[t._v("object")]),t._v(" with the following attributes:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("success")]),t._v("\t("),a("code",[t._v("function(res)")]),t._v("). Optional callback function corresponding to the successful execution.\n"),a("ul",[a("li",[a("code",[t._v("res.result")]),t._v(" is a "),a("code",[t._v("string")]),t._v(" with the parsed content.")])])]),t._v(" "),a("li",[a("code",[t._v("fail")]),t._v(" ("),a("code",[t._v("function(res, code)")]),t._v("). Optional callback function corresponding to the failed execution.\n"),a("ul",[a("li",[a("code",[t._v("code")]),t._v(" is "),a("code",[t._v("201")]),t._v(" when the user rejects the request for permission to use the camera.")])])]),t._v(" "),a("li",[a("code",[t._v("cancel")]),t._v(" ("),a("code",[t._v("function()")]),t._v("). Optional callback function corresponding to an execution canceled by the user.")]),t._v(" "),a("li",[a("code",[t._v("complete")]),t._v(" ("),a("code",[t._v("function()")]),t._v("). Optional callback function corresponding to the end of the execution.")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("barcode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scan")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handling success: "')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fail")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" code")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handling fail, code="')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" code"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{541:function(t,a,s){"use strict";s.r(a);var e=s(31),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"audio-recording"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#audio-recording"}},[t._v("#")]),t._v(" Audio Recording")]),t._v(" "),s("p",[s("strong",[t._v("Audio recording functions.")])]),t._v(" "),s("h2",{attrs:{id:"manifest-declaration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#manifest-declaration"}},[t._v("#")]),t._v(" Manifest Declaration")]),t._v(" "),s("p",[t._v("You need to declare the use of this API in the "),s("RouterLink",{attrs:{to:"/guide/manifest.html#features"}},[t._v("manifest's "),s("code",[t._v("features")])]),t._v(" member:")],1),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"system.record"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"module-import"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#module-import"}},[t._v("#")]),t._v(" Module Import")]),t._v(" "),s("p",[t._v("Before using this service in a component, you need to "),s("RouterLink",{attrs:{to:"/guide/scripting.html#import-and-export-modules"}},[t._v("import the module")]),t._v(" in the script section of the "),s("a",{attrs:{href:"../guide/ux-documents"}},[t._v("UX document")]),t._v(".")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" record "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@system.record'")]),t._v(" \n")])])]),s("p",[t._v("Or")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" record "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@system.record"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),s("p",[t._v("This service has the following methods:")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"#start-duration-samplerate-numberofchannels-encodebitrate-format-success-fail-complete"}},[s("code",[t._v("start({duration,sampleRate,numberOfChannels,encodeBitRate,format,success,fail,complete})")])])]),t._v(" "),s("li",[s("a",{attrs:{href:"#stop"}},[s("code",[t._v("stop()")])])])]),t._v(" "),s("h3",{attrs:{id:"start-duration-samplerate-numberofchannels-encodebitrate-format-success-fail-complete"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#start-duration-samplerate-numberofchannels-encodebitrate-format-success-fail-complete"}},[t._v("#")]),t._v(" "),s("code",[t._v("start({duration,sampleRate,numberOfChannels,encodeBitRate,format,success,fail,complete})")])]),t._v(" "),s("p",[s("strong",[t._v("Start a recording")]),t._v(".")]),t._v(" "),s("h4",{attrs:{id:"arguments"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#arguments"}},[t._v("#")]),t._v(" Arguments")]),t._v(" "),s("p",[t._v("This method requires an "),s("code",[t._v("object")]),t._v(" with the following attributes:")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("duration")]),t._v(" ("),s("code",[t._v("number")]),t._v("). Optional attribute indicating the duration of the recording, in milliseconds. The value by default is "),s("code",[t._v("-1")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("sampleRate")]),t._v(" ("),s("code",[t._v("number")]),t._v("). Optional attribute with the sampling rate. The options are: "),s("code",[t._v("8000")]),t._v(", "),s("code",[t._v("16000")]),t._v(", and "),s("code",[t._v("44100")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("numberOfChannels")]),t._v(" ("),s("code",[t._v("number")]),t._v("). Optional attribute with the number of recording channels. The options are "),s("code",[t._v("1")]),t._v(" (mono) and "),s("code",[t._v("2")]),t._v(" (stereo).")]),t._v(" "),s("li",[s("code",[t._v("encodeBitRate")]),t._v(" ("),s("code",[t._v("number")]),t._v("). Optional attribute with the encoding bit rate.")]),t._v(" "),s("li",[s("code",[t._v("format")]),t._v(" ("),s("code",[t._v("string")]),t._v("). Optional attribute specifying the audio format. The options are "),s("code",[t._v("3gpp")]),t._v(", "),s("code",[t._v("amr")]),t._v(", and "),s("code",[t._v("aac")]),t._v(". The default value is "),s("code",[t._v("3gpp")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("success")]),t._v("\t("),s("code",[t._v("function(object)")]),t._v("). Optional callback function for success. The function has an "),s("code",[t._v("object")]),t._v(" argument with the following attributes:\n"),s("ul",[s("li",[s("code",[t._v("uri")]),t._v(" ("),s("code",[t._v("string")]),t._v("). Path for storing the recordings, which is in the cache of the app. Recording files are in 3GPP format.")])])]),t._v(" "),s("li",[s("code",[t._v("fail")]),t._v(" ("),s("code",[t._v("function(data, code)")]),t._v("). Optional callback function for failure. The method can produce the following code:\n"),s("ul",[s("li",[s("code",[t._v("201")]),t._v(" when the user rejected the request for the recording permission.")])])]),t._v(" "),s("li",[s("code",[t._v("complete")]),t._v(" ("),s("code",[t._v("function()")]),t._v("). Optional callback function for completion.")])]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("AAC Sampling Rates")]),t._v(" "),s("p",[t._v("If the format is set to "),s("code",[t._v("aac")]),t._v(", the mapping between sampling rates and bit rates is described as follows:")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Sampling Rate")]),t._v(" "),s("th",[t._v("Bit Rate")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("8000")]),t._v(" "),s("td",[t._v("16000-48000")])]),t._v(" "),s("tr",[s("td",[t._v("11025")]),t._v(" "),s("td",[t._v("16000-48000")])]),t._v(" "),s("tr",[s("td",[t._v("12000")]),t._v(" "),s("td",[t._v("24000-64000")])]),t._v(" "),s("tr",[s("td",[t._v("16000")]),t._v(" "),s("td",[t._v("24000-64000")])]),t._v(" "),s("tr",[s("td",[t._v("22050")]),t._v(" "),s("td",[t._v("32000-128000")])]),t._v(" "),s("tr",[s("td",[t._v("24000")]),t._v(" "),s("td",[t._v("32000-128000")])]),t._v(" "),s("tr",[s("td",[t._v("32000")]),t._v(" "),s("td",[t._v("48000-192000")])]),t._v(" "),s("tr",[s("td",[t._v("44100")]),t._v(" "),s("td",[t._v("64000-320000")])]),t._v(" "),s("tr",[s("td",[t._v("48000")]),t._v(" "),s("td",[t._v("64000-320000")])])])])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("record"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("start")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n duration"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n sampleRate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n numberOfChannels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n encodeBitRate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("16000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n format"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aac'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("ret")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Storing at '")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" ret"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uri"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fail")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("erromsg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" errocode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'record.startRecord: '")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" errocode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("': '")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" erromsg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("complete")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'record.startRecord complete'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop"}},[t._v("#")]),t._v(" "),s("code",[t._v("stop()")])]),t._v(" "),s("p",[s("strong",[t._v("Stop a recording")]),t._v(".")]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("record"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/9.21e12ace.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guide</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/guide/" class="sidebar-link">Introduction</a></li><li><a href="/developers/guide/getting-started.html" class="sidebar-link">Getting Started</a></li><li><a href="/developers/guide/directory.html" class="sidebar-link">Directory Structure</a></li><li><a href="/developers/guide/manifest.html" class="sidebar-link">Manifest</a></li><li><a href="/developers/guide/ux-documents.html" class="sidebar-link">UX Documents</a></li><li><a href="/developers/guide/templates.html" class="sidebar-link">Template Syntax</a></li><li><a href="/developers/guide/styling.html" class="sidebar-link">App Styling</a></li><li><a href="/developers/guide/scripting.html" class="sidebar-link">Scripting</a></li><li><a href="/developers/guide/events.html" class="sidebar-link">Event Handling</a></li><li><a href="/developers/guide/lifecycle.html" class="sidebar-link">App/Page Lifecycle</a></li><li><a href="/developers/guide/i18n.html" class="sidebar-link">Internationalization</a></li><li><a href="/developers/guide/components-basics.html" class="sidebar-link">Components Basics</a></li><li><a href="/developers/guide/api-basics.html" class="sidebar-link">APIs and Services Basics</a></li><li><a href="/developers/guide/background.html" class="sidebar-link">Services Running in Background</a></li><li><a href="/developers/guide/distribution.html" class="sidebar-link">Distribution</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>UI Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><img src="/developers/assets/img/list01.4a85e309.gif" alt="List on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#attribute">attribute</a></li></ul></li><li><a href="#css-properties">CSS Properties</a><ul><li><a href="#property">property</a></li></ul></li><li><a href="#events">Events</a><ul><li><a href="#eventname">eventname</a></li></ul></li><li><a href="#methods">Methods</a><ul><li><a href="#method">method</a></li></ul></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>Children elements.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attributes.</p> <ul><li><a href="#attribute"><code>attribute</code></a></li></ul> <h3 id="attribute"><a href="#attribute" class="header-anchor">#</a> <code>attribute</code></h3> <p>Description.</p> <ul><li>Type: <code>type</code></li> <li>Default value: <code>value</code></li> <li>Mandatory: yes/no</li></ul> <p>Description</p> <h2 id="css-properties"><a href="#css-properties" class="header-anchor">#</a> CSS Properties</h2> <p>In addition to the <a href="./styles">common styles</a>, this element supports the following styling properties:</p> <ul><li><a href="#property"><code>property</code></a></li></ul> <h3 id="property"><a href="#property" class="header-anchor">#</a> <code>property</code></h3> <p>Description</p> <ul><li>Type: <code>type</code></li> <li>Default value: <code>value</code></li> <li>Mandatory: yes/no</li></ul> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>In addition to the <a href="./events">common events</a>, this element supports the following events:</p> <ul><li><a href="#eventname"><code>eventname</code></a></li></ul> <h3 id="eventname"><a href="#eventname" class="header-anchor">#</a> <code>eventname</code></h3> <p>Description of the event.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ param1: type, param2: type, param3: type }</code></li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element has the following methods:</p> <h3 id="method"><a href="#method" class="header-anchor">#</a> <code>method</code></h3> <p>Description of the method.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>parameter: type</code> (mandatory). Description (<code>value</code> by default).</li> <li><code>parameter: type</code> (mandatory). Description (<code>value</code> by default).</li></ul> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code>Code
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/_template.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/15/2021, 2:16:22 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/9.21e12ace.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>a | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/10.2156cdfe.js" as="script"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Basic Elements</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/a.html" aria-current="page" class="active sidebar-link">a</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/a.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/a.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/a.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/developers/components/a.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/a.html#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/developers/components/image.html" class="sidebar-link">image</a></li><li><a href="/developers/components/popup.html" class="sidebar-link">popup</a></li><li><a href="/developers/components/progress.html" class="sidebar-link">progress</a></li><li><a href="/developers/components/rating.html" class="sidebar-link">rating</a></li><li><a href="/developers/components/slot.html" class="sidebar-link">slot</a></li><li><a href="/developers/components/span.html" class="sidebar-link">span</a></li><li><a href="/developers/components/text.html" class="sidebar-link">text</a></li><li><a href="/developers/components/web.html" class="sidebar-link">web</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Media</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="a"><a href="#a" class="header-anchor">#</a> <code>a</code></h1> <p>(Anchor). This element defines a hyperlink.</p> <img src="/developers/assets/img/a01.eedf7747.gif" alt="Links on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#href">href</a></li><li><a href="#lines">lines</a></li><li><a href="#color">color</a></li><li><a href="#letter-spacing">letter-spacing</a></li><li><a href="#font-size">font-size</a></li><li><a href="#font-style">font-style</a></li><li><a href="#font-weight">font-weight</a></li><li><a href="#text-decoration">text-decoration</a></li><li><a href="#text-indent">text-indent</a></li><li><a href="#text-align">text-align</a></li><li><a href="#line-height">line-height</a></li><li><a href="#text-overflow">text-overflow</a></li><li><a href="#font-family">font-family</a></li></ul></li><li><a href="#events">Events</a></li><li><a href="#methods">Methods</a></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element supports <a href="./span"><code>span</code></a> elements as children.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attribute.</p> <ul><li><a href="#href"><code>href</code></a></li></ul> <h3 id="href"><a href="#href" class="header-anchor">#</a> <code>href</code></h3> <p>Destination of the link.</p> <ul><li>Type: <code>string</code></li> <li>Default value: <code>value</code></li> <li>Mandatory: no</li></ul> <p>For details about the supported link formats, see the URI parameter in <a href="/developers/services/page-routing.html#push-object">page routing</a>.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You can use <code>?param1=value1</code> to add parameters and access them on page instances through <code>this.param1</code>.</p></div> <p>Examples:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>About?param1=value1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about?param1=value1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.example.org/?param1=value1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="css-properties"><a href="#css-properties" class="header-anchor">#</a> CSS Properties</h1> <p>In addition to the <a href="./styles">common styles</a>, this element supports the following styling properties:</p> <ul><li><a href="#lines"><code>lines</code></a></li> <li><a href="#color"><code>color</code></a></li> <li><a href="#letter-spacing"><code>letter-spacing</code></a></li> <li><a href="#font-size"><code>font-size</code></a></li> <li><a href="#font-style"><code>font-style</code></a></li> <li><a href="#font-weight"><code>font-weight</code></a></li> <li><a href="#text-decoration"><code>text-decoration</code></a></li> <li><a href="#text-indent"><code>text-indent</code></a></li> <li><a href="#text-align"><code>text-align</code></a></li> <li><a href="#line-height"><code>line-height</code></a></li> <li><a href="#text-overflow"><code>text-overflow</code></a></li> <li><a href="#font-family"><code>font-family</code></a></li></ul> <p>This element supports the <a href="/developers/guide/styling.html#css-selectors"><code>:active</code> pseudo-class</a>.</p> <h3 id="lines"><a href="#lines" class="header-anchor">#</a> <code>lines</code></h3> <p>Number of text lines. The value <code>-1</code> indicates unlimited lines.</p> <ul><li>Type: <code>number</code></li> <li>Default value: <code>-1</code></li> <li>Mandatory: no</li></ul> <h3 id="color"><a href="#color" class="header-anchor">#</a> <code>color</code></h3> <p>Color of the font.</p> <ul><li>Type: <code>&lt;color&gt;</code></li> <li>Default value: <code>rgba(0, 0, 0, 0.54)</code></li> <li>Mandatory: no</li></ul> <h3 id="letter-spacing"><a href="#letter-spacing" class="header-anchor">#</a> <code>letter-spacing</code></h3> <p>Space between characters.</p> <ul><li>Type: <code>&lt;length&gt;</code></li> <li>Default value: <code>0px</code></li> <li>Mandatory: no</li></ul> <h3 id="font-size"><a href="#font-size" class="header-anchor">#</a> <code>font-size</code></h3> <p>Font size.</p> <ul><li>Type: <code>&lt;length&gt;</code></li> <li>Default value: <code>30px</code></li> <li>Mandatory: no</li></ul> <h3 id="font-style"><a href="#font-style" class="header-anchor">#</a> <code>font-style</code></h3> <p>Font style selected from the <a href="#font-family">font family</a>.</p> <ul><li>Type: <code>string</code> (<code>italic</code> | <code>normal</code>)</li> <li>Default value: <code>normal</code></li> <li>Mandatory: no</li></ul> <h3 id="font-weight"><a href="#font-weight" class="header-anchor">#</a> <code>font-weight</code></h3> <p>Weight of the font.</p> <ul><li>Type: <code>string</code> (<code>lighter</code> | <code>100</code> | <code>200</code> | <code>300</code> | <code>400</code> | <code>500</code> | <code>600</code> | <code>700</code> | <code>800</code> | <code>900</code> | <code>normal</code> | <code>bold</code> | <code>bolder</code>)</li> <li>Default value: <code>normal</code></li> <li>Mandatory: no</li></ul> <h3 id="text-decoration"><a href="#text-decoration" class="header-anchor">#</a> <code>text-decoration</code></h3> <p>Decoration options to the text.</p> <ul><li>Type: <code>string</code> (<code>underline</code> | <code>line-through</code> | <code>none</code>)</li> <li>Default value: <code>none</code></li> <li>Mandatory: no</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>If you apply the <code>text-decoration</code>, you must set the <a href="#value"><code>value</code></a> attribute.</p></div> <h3 id="text-indent"><a href="#text-indent" class="header-anchor">#</a> <code>text-indent</code></h3> <ul><li>Type: <code>&lt;length-percentage&gt;</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="text-align"><a href="#text-align" class="header-anchor">#</a> <code>text-align</code></h3> <p>Alignment direction of the text, relative to its parent element.</p> <ul><li>Type: <code>string</code> (<code>left</code> | <code>center</code> | <code>right</code>)</li> <li>Default value: <code>left</code></li> <li>Mandatory: no</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>If you use different languages, using different directions, use this attribute together with <a href="/developers/components/attributes.html#dir"><code>dir</code></a>.</p></div> <h3 id="line-height"><a href="#line-height" class="header-anchor">#</a> <code>line-height</code></h3> <p>Line height of the text.</p> <ul><li>Type: <code>&lt;length&gt;</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="text-overflow"><a href="#text-overflow" class="header-anchor">#</a> <code>text-overflow</code></h3> <p>Content shown if overflow is active. It takes effect when the number of lines is specified.</p> <ul><li>Type: <code>string</code> (<code>clip</code> | <code>ellipsis</code>)</li> <li>Default value: <code>clip</code></li> <li>Mandatory: no</li></ul> <h3 id="font-family"><a href="#font-family" class="header-anchor">#</a> <code>font-family</code></h3> <p>Font family of for the text.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <p>To customize fonts, please refer <a href="/developers/components/styles.html#font-face">font-face style</a>.</p> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>This element supports the <a href="./events">common events</a>.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>When the a element is a child to the <a href="text"><code>text</code></a> element, only the <a href="/developers/components/events.html#click"><code>click</code></a> event is supported.</p> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element does not have additional methods.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container row-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://quick-app-initiative.ow2.io/<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>QAI Home Page (web)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row-center mt-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/Component/container/stack<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>stack (quick app) page<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/a.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2021, 8:21:24 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/components/events.html" class="prev">
Common Events
</a></span> <span class="next"><a href="/developers/components/image.html">
image
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/10.2156cdfe.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>animations | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/11.dc71520b.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Basic Elements</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Media</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/animation.html" aria-current="page" class="active sidebar-link">animations</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/animation.html#event-binding" class="sidebar-link">Event Binding</a></li><li class="sidebar-sub-header"><a href="/developers/components/animation.html#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/developers/components/camera.html" class="sidebar-link">camera</a></li><li><a href="/developers/components/canvas.html" class="sidebar-link">canvas</a></li><li><a href="/developers/components/marquee.html" class="sidebar-link">marquee</a></li><li><a href="/developers/components/transform.html" class="sidebar-link">transform property</a></li><li><a href="/developers/components/video.html" class="sidebar-link">video</a></li></ul></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="animations"><a href="#animations" class="header-anchor">#</a> animations</h1> <p>Content coming soon...</p> <p>Visit our <a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative" target="_blank" rel="noopener noreferrer">repository<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative" target="_blank" rel="noopener noreferrer">raise an issue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> if you want to contribute. Thanks you for your collaboration</p> <img src="/developers/assets/img/animation01.87aa836f.gif" alt="Animations on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <h2 id="event-binding"><a href="#event-binding" class="header-anchor">#</a> Event Binding</h2> <p>You can bind an event handler to control the animations using the <code>addEventListener</code> method. This method is implemented by all the <a href="../components">elements</a>.</p> <p>This method has two arguments:</p> <ul><li><code>type</code> (<code>string</code>): Indicating the type of the event to listen: <a href="#animationstart"><code>animationstart</code></a>, <a href="#animationiteration"><code>animationiteration</code></a>, or <a href="#animationend"><code>animationend</code></a>.</li> <li><code>callback</code> (<code>function</code>): The callback function, run after the event is triggered.</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>To have a successful result, you must declare <code>addEventListener</code> and, dynamically modify the <code>class</code> to trigger the CSS-based animation effect.</p></div> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token function">$element</span><span class="token punctuation">(</span><span class="token string">&quot;id&quot;</span><span class="token punctuation">)</span>
element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;animationstart&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
prompt<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
message<span class="token operator">:</span> <span class="token string">'type: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>type <span class="token operator">+</span> <span class="token string">', animationName: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>animationName <span class="token operator">+</span> <span class="token string">', elapsedTime: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>elapsedTime
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;animationend&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
prompt<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
message<span class="token operator">:</span> <span class="token string">'type: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>type <span class="token operator">+</span> <span class="token string">', animationName: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>animationName <span class="token operator">+</span> <span class="token string">', elapsedTime: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>elapsedTime
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;animationiteration&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
prompt<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
message<span class="token operator">:</span> <span class="token string">'type: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>type <span class="token operator">+</span> <span class="token string">', animationName: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>animationName <span class="token operator">+</span> <span class="token string">', elapsedTime: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>elapsedTime
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>animation-container row-center column-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>show {{animation}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mlr-container mt-item row-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>show<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-blue<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">showAnimation</span><span class="token punctuation">&quot;</span></span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.animation-container</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>