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([[24],{410:function(t,a,s){t.exports=s.p+"assets/img/progress01.7b5b6202.gif"},470:function(t,a,s){"use strict";s.r(a);var e=s(31),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"progress"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#progress"}},[t._v("#")]),t._v(" "),e("code",[t._v("progress")])]),t._v(" "),e("p",[t._v("Progress indicator.")]),t._v(" "),e("img",{staticStyle:{height:"500px","border-radius":"6px",border:"1px #333333 solid"},attrs:{src:s(410),alt:"Progress statuses on a Quick App"}}),t._v(" "),e("p",[t._v("("),e("a",{attrs:{href:"#example"}},[t._v("Example code")]),t._v(")")]),t._v(" "),e("p"),e("div",{staticClass:"table-of-contents"},[e("ul",[e("li",[e("a",{attrs:{href:"#children-elements"}},[t._v("Children Elements")])]),e("li",[e("a",{attrs:{href:"#attributes"}},[t._v("Attributes")]),e("ul",[e("li",[e("a",{attrs:{href:"#percent"}},[t._v("percent")])]),e("li",[e("a",{attrs:{href:"#type"}},[t._v("type")])])])]),e("li",[e("a",{attrs:{href:"#css-properties"}},[t._v("CSS Properties")]),e("ul",[e("li",[e("a",{attrs:{href:"#color"}},[t._v("color")])]),e("li",[e("a",{attrs:{href:"#stroke-width"}},[t._v("stroke-width")])]),e("li",[e("a",{attrs:{href:"#layer-color"}},[t._v("layer-color")])])])]),e("li",[e("a",{attrs:{href:"#events"}},[t._v("Events")])]),e("li",[e("a",{attrs:{href:"#methods"}},[t._v("Methods")])]),e("li",[e("a",{attrs:{href:"#example"}},[t._v("Example")])])])]),e("p"),t._v(" "),e("h2",{attrs:{id:"children-elements"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#children-elements"}},[t._v("#")]),t._v(" Children Elements")]),t._v(" "),e("p",[t._v("This element doesn't support children elements.")]),t._v(" "),e("h2",{attrs:{id:"attributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" Attributes")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./attributes"}},[t._v("common attributes")]),t._v(", this element may contain the following attributes.")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#percent"}},[e("code",[t._v("percent")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#type"}},[e("code",[t._v("type")])])])]),t._v(" "),e("h3",{attrs:{id:"percent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#percent"}},[t._v("#")]),t._v(" "),e("code",[t._v("percent")])]),t._v(" "),e("p",[t._v("This attribute indicates the value of the progress as a percentage.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("number")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("0")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),e("p",[t._v("This attribute is invalid when "),e("a",{attrs:{href:"#type"}},[e("code",[t._v("type")])]),t._v(" is "),e("code",[t._v("circular")]),t._v(".\nDecimal values will be rounded off to integers.")])]),t._v(" "),e("h3",{attrs:{id:"type"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#type"}},[t._v("#")]),t._v(" "),e("code",[t._v("type")])]),t._v(" "),e("p",[t._v("Type of the progress bar.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("horizontal")]),t._v(" | "),e("code",[t._v("circular")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("horizontal")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("The value of this attribute cannot be modified dynamically.")])]),t._v(" "),e("h2",{attrs:{id:"css-properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#css-properties"}},[t._v("#")]),t._v(" CSS Properties")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./styles"}},[t._v("common styles")]),t._v(", this element supports the following styling properties:")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#color"}},[e("code",[t._v("color")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#stroke-width"}},[e("code",[t._v("stroke-width")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#layer-color"}},[e("code",[t._v("layer-color")])])])]),t._v(" "),e("p",[t._v("This element supports the "),e("RouterLink",{attrs:{to:"/guide/styling.html#css-selectors"}},[e("code",[t._v(":active")]),t._v(" pseudo-class")]),t._v(".")],1),t._v(" "),e("h3",{attrs:{id:"color"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[t._v("#")]),t._v(" "),e("code",[t._v("color")])]),t._v(" "),e("p",[t._v("Color of the progress bar.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<color>")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("#33b4ff")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"stroke-width"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stroke-width"}},[t._v("#")]),t._v(" "),e("code",[t._v("stroke-width")])]),t._v(" "),e("p",[t._v("Width of a horizontal progress bar.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<length>")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("32px")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"layer-color"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#layer-color"}},[t._v("#")]),t._v(" "),e("code",[t._v("layer-color")])]),t._v(" "),e("p",[t._v("Background color of a progress bar.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<color>")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("#f0f0f0")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),e("ul",[e("li",[t._v("For a "),e("code",[t._v("horizontal")]),t._v(" progress bar, the background color by default is "),e("code",[t._v("#f0f0f0")]),t._v(".")]),t._v(" "),e("li",[t._v("For a "),e("code",[t._v("circular")]),t._v(" progress bar, the "),e("code",[t._v("width")]),t._v(" and "),e("code",[t._v("height")]),t._v(" are "),e("code",[t._v("32px")]),t._v(" by default. If the "),e("code",[t._v("width")]),t._v(" and "),e("code",[t._v("height")]),t._v(" are different, the smaller value will be applied to both properties.")]),t._v(" "),e("li",[t._v("To set the width of a progress bar, you should place the "),e("code",[t._v("progress")]),t._v(" element into a "),e("a",{attrs:{href:"./div"}},[e("code",[t._v("div")])]),t._v(" element and set the "),e("code",[t._v("div")]),t._v("'s width.")])])]),t._v(" "),e("h2",{attrs:{id:"events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),e("p",[t._v("This element support all the "),e("a",{attrs:{href:"./events"}},[t._v("common events")]),t._v(", with the exception of "),e("RouterLink",{attrs:{to:"/components/events.html#swipe"}},[e("code",[t._v("swipe")])]),t._v(".")],1),t._v(" "),e("h2",{attrs:{id:"methods"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),e("p",[t._v("This element does not have additional methods.")]),t._v(" "),e("h2",{attrs:{id:"example"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("case-title mt-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('type="horizontal"'),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item-container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("progress-box row-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("progress")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("percent")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("40"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("horizontal-progress"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("progress")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("case-title mt-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('type="circular"'),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item-container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("progress-box row-center column-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("progress")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("circular"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("circular-progress"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("progress")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".progress-box")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".horizontal-progress")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("stroke-width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".circular-progress")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("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
(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{411:function(t,a,s){t.exports=s.p+"assets/img/rating01.2fef427c.gif"},471:function(t,a,s){"use strict";s.r(a);var e=s(31),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"rating"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rating"}},[t._v("#")]),t._v(" "),e("code",[t._v("rating")])]),t._v(" "),e("p",[t._v("Star-based rating input field.")]),t._v(" "),e("img",{staticStyle:{height:"500px","border-radius":"6px",border:"1px #333333 solid"},attrs:{src:s(411),alt:"Rating stars on a Quick App"}}),t._v(" "),e("p",[t._v("("),e("a",{attrs:{href:"#example"}},[t._v("Example code")]),t._v(")")]),t._v(" "),e("p"),e("div",{staticClass:"table-of-contents"},[e("ul",[e("li",[e("a",{attrs:{href:"#children-elements"}},[t._v("Children Elements")])]),e("li",[e("a",{attrs:{href:"#attributes"}},[t._v("Attributes")]),e("ul",[e("li",[e("a",{attrs:{href:"#numstars"}},[t._v("numstars")])]),e("li",[e("a",{attrs:{href:"#rating"}},[t._v("rating")])]),e("li",[e("a",{attrs:{href:"#stepsize"}},[t._v("stepsize")])]),e("li",[e("a",{attrs:{href:"#indicator"}},[t._v("indicator")])])])]),e("li",[e("a",{attrs:{href:"#css-properties"}},[t._v("CSS Properties")]),e("ul",[e("li",[e("a",{attrs:{href:"#star-background"}},[t._v("star-background")])]),e("li",[e("a",{attrs:{href:"#star-foreground"}},[t._v("star-foreground")])]),e("li",[e("a",{attrs:{href:"#star-secondary"}},[t._v("star-secondary")])]),e("li",[e("a",{attrs:{href:"#width"}},[t._v("width")])]),e("li",[e("a",{attrs:{href:"#height"}},[t._v("height")])])])]),e("li",[e("a",{attrs:{href:"#events"}},[t._v("Events")]),e("ul",[e("li",[e("a",{attrs:{href:"#change"}},[t._v("change")])])])]),e("li",[e("a",{attrs:{href:"#methods"}},[t._v("Methods")])]),e("li",[e("a",{attrs:{href:"#example"}},[t._v("Example")])])])]),e("p"),t._v(" "),e("h2",{attrs:{id:"children-elements"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#children-elements"}},[t._v("#")]),t._v(" Children Elements")]),t._v(" "),e("p",[t._v("This element doesn't support any element as child node.")]),t._v(" "),e("h2",{attrs:{id:"attributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" Attributes")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./attributes"}},[t._v("common attributes")]),t._v(", this element may contain the following attributes.")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#numstars"}},[e("code",[t._v("numstars")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#rating"}},[e("code",[t._v("rating")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#stepsize"}},[e("code",[t._v("stepsize")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#indicator"}},[e("code",[t._v("indicator")])])])]),t._v(" "),e("h3",{attrs:{id:"numstars"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#numstars"}},[t._v("#")]),t._v(" "),e("code",[t._v("numstars")])]),t._v(" "),e("p",[t._v("This attribute indicates the number of star elements to be displayed on a rating bar.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("number")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("5")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"rating-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rating-2"}},[t._v("#")]),t._v(" "),e("code",[t._v("rating")])]),t._v(" "),e("p",[t._v("The current value with the number of selected stars.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("number")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("5")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"stepsize"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stepsize"}},[t._v("#")]),t._v(" "),e("code",[t._v("stepsize")])]),t._v(" "),e("p",[t._v("This attribute indicates the size of the steps for the rating.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("number")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("0.5")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"indicator"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indicator"}},[t._v("#")]),t._v(" "),e("code",[t._v("indicator")])]),t._v(" "),e("p",[t._v("Flag to indicate if rating field is editable ("),e("code",[t._v("false")]),t._v(") or not ("),e("code",[t._v("true")]),t._v(").")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("boolean")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("false")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h2",{attrs:{id:"css-properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#css-properties"}},[t._v("#")]),t._v(" CSS Properties")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./styles"}},[t._v("common styles")]),t._v(", this element supports the following styling properties:")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#star-background"}},[e("code",[t._v("star-background")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#star-foreground"}},[e("code",[t._v("star-foreground")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#star-secondary"}},[e("code",[t._v("star-secondary")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#width"}},[e("code",[t._v("width")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#height"}},[e("code",[t._v("height")])])])]),t._v(" "),e("p",[t._v("This element supports the "),e("RouterLink",{attrs:{to:"/guide/styling.html#css-selectors"}},[e("code",[t._v(":active")]),t._v(" pseudo-class")]),t._v(".")],1),t._v(" "),e("h3",{attrs:{id:"star-background"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#star-background"}},[t._v("#")]),t._v(" "),e("code",[t._v("star-background")])]),t._v(" "),e("p",[t._v("Background image of the selectable element (when it is not selected). The URI specified in this element may contain either a local resource or a base64-encoded image.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("uri")])]),t._v(" "),e("li",[t._v("Default value: -")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"star-foreground"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#star-foreground"}},[t._v("#")]),t._v(" "),e("code",[t._v("star-foreground")])]),t._v(" "),e("p",[t._v("Image of the selectable element when it's selected. The URI specified in this element may contain either a local resource or a base64-encoded image.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("uri")])]),t._v(" "),e("li",[t._v("Default value: -")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"star-secondary"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#star-secondary"}},[t._v("#")]),t._v(" "),e("code",[t._v("star-secondary")])]),t._v(" "),e("p",[t._v("Secondary image of the selectable element when it's selected. The URI specified in this element may contain either a local resource or a base64-encoded image.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("uri")])]),t._v(" "),e("li",[t._v("Default value: -")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"width"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#width"}},[t._v("#")]),t._v(" "),e("code",[t._v("width")])]),t._v(" "),e("p",[t._v("Attribute that indicates the width of the stars rating bar.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("<length>")]),t._v(" | "),e("code",[t._v("<percentage>")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: ("),e("code",[t._v("numstars")]),t._v(" value x width of a star)")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"height"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#height"}},[t._v("#")]),t._v(" "),e("code",[t._v("height")])]),t._v(" "),e("p",[t._v("Height of a star.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("<length>")]),t._v(" | "),e("code",[t._v("<percentage>")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: (height of a star)")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h2",{attrs:{id:"events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),e("p",[t._v("This element supports the "),e("a",{attrs:{href:"./events"}},[t._v("common events")]),t._v(", with the exception of "),e("RouterLink",{attrs:{to:"/components/events.html#click"}},[e("code",[t._v("click")])]),t._v(", "),e("RouterLink",{attrs:{to:"/components/events.html#longpress"}},[e("code",[t._v("longpress")])]),t._v(", and "),e("RouterLink",{attrs:{to:"/components/events.html#swipe"}},[e("code",[t._v("swipe")])]),t._v(". In addition to this, this element supports the following event:")],1),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#change"}},[e("code",[t._v("change")])])])]),t._v(" "),e("h3",{attrs:{id:"change"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#change"}},[t._v("#")]),t._v(" "),e("code",[t._v("change")])]),t._v(" "),e("p",[t._v("This event is triggered when the current value of a rating input changes.")]),t._v(" "),e("p",[e("strong",[t._v("Additional parameters")]),t._v(":")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("{ rating: number }")])])]),t._v(" "),e("h2",{attrs:{id:"methods"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),e("p",[t._v("This element does not have additional methods.")]),t._v(" "),e("h2",{attrs:{id:"example"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("case-title mt-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Slide on the stars to rate"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item-container rating-container row-center column-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rating")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ratingStyle"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rating")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("2"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("rating")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".rating-container")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 320px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".ratingStyle")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("star-background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("/Common/img/ic_stars_gray_mid.png"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("star-foreground")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("/Common/img/ic_stars_blue_mid.png"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("star-secondary")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("/Common/img/ic_stars_blue_half_mid.png"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 64px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("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
(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{412:function(t,a,s){t.exports=s.p+"assets/img/refresh01.acd154e4.gif"},472:function(t,a,s){"use strict";s.r(a);var e=s(31),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"refresh"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refresh"}},[t._v("#")]),t._v(" "),e("code",[t._v("refresh")])]),t._v(" "),e("p",[e("a",{attrs:{href:"https://en.wikipedia.org/wiki/Pull-to-refresh",target:"_blank",rel:"noopener noreferrer"}},[t._v("Pull-to-refresh"),e("OutboundLink")],1),t._v(" mechanism.")]),t._v(" "),e("img",{staticStyle:{height:"500px","border-radius":"6px",border:"1px #333333 solid"},attrs:{src:s(412),alt:"Refresh component on a Quick App"}}),t._v(" "),e("p",[t._v("("),e("a",{attrs:{href:"#example"}},[t._v("Example code")]),t._v(")")]),t._v(" "),e("p"),e("div",{staticClass:"table-of-contents"},[e("ul",[e("li",[e("a",{attrs:{href:"#children-elements"}},[t._v("Children Elements")])]),e("li",[e("a",{attrs:{href:"#attributes"}},[t._v("Attributes")]),e("ul",[e("li",[e("a",{attrs:{href:"#offset"}},[t._v("offset")])]),e("li",[e("a",{attrs:{href:"#refreshing"}},[t._v("refreshing")])]),e("li",[e("a",{attrs:{href:"#type"}},[t._v("type")])]),e("li",[e("a",{attrs:{href:"#indicator"}},[t._v("indicator")])])])]),e("li",[e("a",{attrs:{href:"#css-properties"}},[t._v("CSS Properties")]),e("ul",[e("li",[e("a",{attrs:{href:"#background-color"}},[t._v("background-color")])]),e("li",[e("a",{attrs:{href:"#progress-color"}},[t._v("progress-color")])])])]),e("li",[e("a",{attrs:{href:"#events"}},[t._v("Events")]),e("ul",[e("li",[e("a",{attrs:{href:"#refresh-refreshing"}},[t._v("refresh({refreshing})")])])])]),e("li",[e("a",{attrs:{href:"#methods"}},[t._v("Methods")])]),e("li",[e("a",{attrs:{href:"#example"}},[t._v("Example")])])])]),e("p"),t._v(" "),e("h2",{attrs:{id:"children-elements"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#children-elements"}},[t._v("#")]),t._v(" Children Elements")]),t._v(" "),e("p",[t._v("This element supports any "),e("RouterLink",{attrs:{to:"/components/"}},[t._v("element")]),t._v(" as children nodes.")],1),t._v(" "),e("h2",{attrs:{id:"attributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" Attributes")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./attributes"}},[t._v("common attributes")]),t._v(", this element may contain the following attributes.")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#offset"}},[e("code",[t._v("offset")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#refreshing"}},[e("code",[t._v("refreshing")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#type"}},[e("code",[t._v("type")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#indicator"}},[e("code",[t._v("indicator")])])])]),t._v(" "),e("h3",{attrs:{id:"offset"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#offset"}},[t._v("#")]),t._v(" "),e("code",[t._v("offset")])]),t._v(" "),e("p",[t._v("Distance of the refresh element to the top of the viewport where the element is not moved.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" (length)")]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("132px")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"refreshing"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refreshing"}},[t._v("#")]),t._v(" "),e("code",[t._v("refreshing")])]),t._v(" "),e("p",[t._v("Flag that indicates if an element is being refreshed.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("boolean")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("false")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"type"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#type"}},[t._v("#")]),t._v(" "),e("code",[t._v("type")])]),t._v(" "),e("p",[t._v("Type of the behavior of the system refresh action.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("material")]),t._v(" | "),e("code",[t._v("overscroll")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("material")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("p",[t._v("The value "),e("code",[t._v("material")]),t._v(" indicates that the page stops moving when a user continues pulling after the boundary is reached. On the other hand, "),e("code",[t._v("overscroll")]),t._v(" enables the page to move a little beyond that limit, showing a bouncing effect.")]),t._v(" "),e("h3",{attrs:{id:"indicator"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#indicator"}},[t._v("#")]),t._v(" "),e("code",[t._v("indicator")])]),t._v(" "),e("p",[t._v("Flag that indicates whether an item is an indicator.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("boolean")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("false")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h2",{attrs:{id:"css-properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#css-properties"}},[t._v("#")]),t._v(" CSS Properties")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./styles"}},[t._v("common styles")]),t._v(", this element supports the following styling properties:")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#background-color"}},[e("code",[t._v("background-color")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#progress-color"}},[e("code",[t._v("progress-color")])])])]),t._v(" "),e("h3",{attrs:{id:"background-color"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#background-color"}},[t._v("#")]),t._v(" "),e("code",[t._v("background-color")])]),t._v(" "),e("p",[t._v("Background color.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<color>")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("white")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"progress-color"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#progress-color"}},[t._v("#")]),t._v(" "),e("code",[t._v("progress-color")])]),t._v(" "),e("p",[t._v("Loading animation foreground color.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<color>")])]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("black")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h2",{attrs:{id:"events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./events"}},[t._v("common events")]),t._v(", this element supports the following events:")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#refresh-refreshing"}},[e("code",[t._v("refresh({refreshing})")])])])]),t._v(" "),e("h3",{attrs:{id:"refresh-refreshing"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refresh-refreshing"}},[t._v("#")]),t._v(" "),e("code",[t._v("refresh({refreshing})")])]),t._v(" "),e("p",[t._v("Event triggered with a user pulls down a refresh element.")]),t._v(" "),e("p",[e("strong",[t._v("Additional parameters")]),t._v(":")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("object")]),t._v(" with the following attributes:\n"),e("ul",[e("li",[e("code",[t._v("{ refreshing: number }")])])])])]),t._v(" "),e("h2",{attrs:{id:"methods"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),e("p",[t._v("This element does not have additional methods.")]),t._v(" "),e("h2",{attrs:{id:"example"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container mt-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("refresh")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("refresh"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("refreshing")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{isRefreshing}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onrefresh")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("refresh"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item-container tip-container row-center column-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("color-secondary"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Pull down to refresh"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mlr-container row-center mt-btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("button"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Stop Refreshing"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn-blue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token special-attr"}},[e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onclick")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),e("span",{pre:!0,attrs:{class:"token value javascript language-javascript"}},[t._v("stopRefresh")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("refresh")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sass"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token style"}},[e("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".tip-container")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transparent"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".refresh")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n module"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n isRefreshing"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopRefresh")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isRefreshing "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("refresh")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isRefreshing "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refreshing"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isRefreshing "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("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
(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{413:function(t,a,s){t.exports=s.p+"assets/img/richtext01.864d4c1c.jpg"},473:function(t,a,s){"use strict";s.r(a);var n=s(31),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"richtext"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#richtext"}},[t._v("#")]),t._v(" "),n("code",[t._v("richtext")])]),t._v(" "),n("p",[t._v("Content coming soon...")]),t._v(" "),n("p",[t._v("Visit our "),n("a",{attrs:{href:"https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative",target:"_blank",rel:"noopener noreferrer"}},[t._v("repository"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative",target:"_blank",rel:"noopener noreferrer"}},[t._v("raise an issue"),n("OutboundLink")],1),t._v(" if you want to contribute. Thanks you for your collaboration")]),t._v(" "),n("img",{staticStyle:{height:"500px","border-radius":"6px",border:"1px #333333 solid"},attrs:{src:s(413),alt:"Richtext on a Quick App"}}),t._v(" "),n("p",[t._v("("),n("a",{attrs:{href:"#example"}},[t._v("Example code")]),t._v(")")]),t._v(" "),n("h2",{attrs:{id:"example"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item-container mt-item"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("richtext")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("html"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{htmlText}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("richtext")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token script"}},[n("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n htmlText"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'<p class="item-title">h1</p><h1>Quick App</h1><p class="item-title">h2</p><h2>Quick App</h2><p class="item-title">h3</p><h3>Quick App</h3><p class="item-title">h4</p><h4>Quick App</h4><p class="item-title">h5</p><h5>Quick App</h5><p class="item-title">h6</p><h6>Quick App</h6>\'')]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{350:function(t,a,s){t.exports=s.p+"assets/img/select01.6991bedc.gif"},474:function(t,a,s){"use strict";s.r(a);var e=s(31),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select"}},[t._v("#")]),t._v(" "),e("code",[t._v("select")])]),t._v(" "),e("p",[t._v("Form control enabling users to select items in a list of "),e("a",{attrs:{href:"./option"}},[t._v("options")]),t._v(".")]),t._v(" "),e("img",{staticStyle:{height:"500px","border-radius":"6px",border:"1px #333333 solid"},attrs:{src:s(350),alt:"Select component on a Quick App"}}),t._v(" "),e("p",[t._v("("),e("a",{attrs:{href:"#example"}},[t._v("Example code")]),t._v(")")]),t._v(" "),e("p"),e("div",{staticClass:"table-of-contents"},[e("ul",[e("li",[e("a",{attrs:{href:"#children-elements"}},[t._v("Children Elements")])]),e("li",[e("a",{attrs:{href:"#attributes"}},[t._v("Attributes")])]),e("li",[e("a",{attrs:{href:"#css-properties"}},[t._v("CSS Properties")]),e("ul",[e("li",[e("a",{attrs:{href:"#color"}},[t._v("color")])]),e("li",[e("a",{attrs:{href:"#font-size"}},[t._v("font-size")])]),e("li",[e("a",{attrs:{href:"#font-weight"}},[t._v("font-weight")])]),e("li",[e("a",{attrs:{href:"#text-decoration"}},[t._v("text-decoration")])]),e("li",[e("a",{attrs:{href:"#font-style"}},[t._v("font-style")])]),e("li",[e("a",{attrs:{href:"#font-family"}},[t._v("font-family")])])])]),e("li",[e("a",{attrs:{href:"#events"}},[t._v("Events")]),e("ul",[e("li",[e("a",{attrs:{href:"#change"}},[t._v("change")])])])]),e("li",[e("a",{attrs:{href:"#methods"}},[t._v("Methods")])]),e("li",[e("a",{attrs:{href:"#example"}},[t._v("Example")])])])]),e("p"),t._v(" "),e("h2",{attrs:{id:"children-elements"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#children-elements"}},[t._v("#")]),t._v(" Children Elements")]),t._v(" "),e("p",[t._v("This element only supports "),e("a",{attrs:{href:"./option"}},[e("code",[t._v("option")]),t._v(" elements")]),t._v(" as children nodes.")]),t._v(" "),e("h2",{attrs:{id:"attributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" Attributes")]),t._v(" "),e("p",[t._v("This element supports the "),e("a",{attrs:{href:"./attributes"}},[t._v("common attributes")]),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"css-properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#css-properties"}},[t._v("#")]),t._v(" CSS Properties")]),t._v(" "),e("p",[t._v("In addition to the "),e("a",{attrs:{href:"./styles"}},[t._v("common styles")]),t._v(", this element supports the following styling properties:")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#color"}},[e("code",[t._v("color")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#font-size"}},[e("code",[t._v("font-size")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#font-weight"}},[e("code",[t._v("font-weight")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#text-decoration"}},[e("code",[t._v("text-decoration")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#font-style"}},[e("code",[t._v("font-style")])])]),t._v(" "),e("li",[e("a",{attrs:{href:"#font-family"}},[e("code",[t._v("font-family")])])])]),t._v(" "),e("h3",{attrs:{id:"color"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[t._v("#")]),t._v(" "),e("code",[t._v("color")])]),t._v(" "),e("p",[t._v("Color of the font.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<color>")])]),t._v(" "),e("li",[t._v("Default value: (system)")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"font-size"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#font-size"}},[t._v("#")]),t._v(" "),e("code",[t._v("font-size")])]),t._v(" "),e("p",[t._v("Font size.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("<length>")])]),t._v(" "),e("li",[t._v("Default value: (system)")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"font-weight"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#font-weight"}},[t._v("#")]),t._v(" "),e("code",[t._v("font-weight")])]),t._v(" "),e("p",[t._v("Weight of the font.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("lighter")]),t._v(" | "),e("code",[t._v("100")]),t._v(" | "),e("code",[t._v("200")]),t._v(" | "),e("code",[t._v("300")]),t._v(" | "),e("code",[t._v("400")]),t._v(" | "),e("code",[t._v("500")]),t._v(" | "),e("code",[t._v("600")]),t._v(" | "),e("code",[t._v("700")]),t._v(" | "),e("code",[t._v("800")]),t._v(" | "),e("code",[t._v("900")]),t._v(" | "),e("code",[t._v("normal")]),t._v(" | "),e("code",[t._v("bold")]),t._v(" | "),e("code",[t._v("bolder")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("normal")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"text-decoration"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#text-decoration"}},[t._v("#")]),t._v(" "),e("code",[t._v("text-decoration")])]),t._v(" "),e("p",[t._v("Decoration options to the text.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("underline")]),t._v(" | "),e("code",[t._v("line-through")]),t._v(" | "),e("code",[t._v("none")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("none")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"font-style"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#font-style"}},[t._v("#")]),t._v(" "),e("code",[t._v("font-style")])]),t._v(" "),e("p",[t._v("Font style selected from the "),e("a",{attrs:{href:"#font-family"}},[t._v("font family")]),t._v(".")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")]),t._v(" ("),e("code",[t._v("italic")]),t._v(" |\t"),e("code",[t._v("normal")]),t._v(")")]),t._v(" "),e("li",[t._v("Default value: "),e("code",[t._v("normal")])]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("h3",{attrs:{id:"font-family"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#font-family"}},[t._v("#")]),t._v(" "),e("code",[t._v("font-family")])]),t._v(" "),e("p",[t._v("Font family of for the text.")]),t._v(" "),e("ul",[e("li",[t._v("Type: "),e("code",[t._v("string")])]),t._v(" "),e("li",[t._v("Default value: -")]),t._v(" "),e("li",[t._v("Mandatory: no")])]),t._v(" "),e("p",[t._v("To customize fonts, please refer "),e("RouterLink",{attrs:{to:"/components/styles.html#font-face"}},[t._v("font-face style")]),t._v(".")],1),t._v(" "),e("h2",{attrs:{id:"events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),e("p",[t._v("This element support the "),e("a",{attrs:{href:"./events"}},[t._v("common events")]),t._v(", with the exception of "),e("a",{attrs:{href:"./events#click"}},[e("code",[t._v("click")])]),t._v(", "),e("a",{attrs:{href:"./events#longpress"}},[e("code",[t._v("longpress")])]),t._v(", and "),e("a",{attrs:{href:"./events#swipe"}},[e("code",[t._v("swipe")])]),t._v(". Apart from this, the element supports the following event:")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"#change"}},[e("code",[t._v("change")])])])]),t._v(" "),e("h3",{attrs:{id:"change"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#change"}},[t._v("#")]),t._v(" "),e("code",[t._v("change")])]),t._v(" "),e("p",[t._v("This event is triggered when the selected value in the list changes.")]),t._v(" "),e("p",[e("strong",[t._v("Additional parameters")]),t._v(":")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("{ newValue: string }")]),t._v(". A string with the new value in the selection.")])]),t._v(" "),e("h2",{attrs:{id:"methods"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),e("p",[t._v("This element does not have additional methods.")]),t._v(" "),e("h2",{attrs:{id:"example"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" Example")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("case-title mt-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("What is your favourite fruit?"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mlr-container select-container bro-s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("select")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("select"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item1"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Orange"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("option")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item2"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("selected")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("true"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Banana"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("option")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item3"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Lemon"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("option")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item4"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Strawberry"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("option")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Blueberry"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("option")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("select")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"