[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"navigation_docs":3,"-overview-module-utilities":106,"-overview-module-utilities-surround":686},[4,36,72],{"title":5,"icon":6,"redirect":7,"path":8,"stem":9,"children":10,"page":35},"Get Started","heroicons-outline:star","\u002Fget-started\u002Fintroduction","\u002Fget-started","1.get-started",[11,15,20,25,30],{"title":12,"path":7,"stem":13,"icon":14},"Introduction","1.get-started\u002F1.introduction","uil:info-circle",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F2.installation","uil:play-circle",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F3.configuration","uil:wrench",{"title":26,"path":27,"stem":28,"icon":29},"Enabling Capacitor","\u002Fget-started\u002Fenabling-capacitor","1.get-started\u002F4.enabling-capacitor","nonicons:capacitor-16",{"title":31,"path":32,"stem":33,"icon":34},"Watchouts","\u002Fget-started\u002Fwatch-outs","1.get-started\u002F5.watch-outs","uil:exclamation-triangle",false,{"title":37,"icon":38,"redirect":39,"path":40,"stem":41,"children":42,"page":35},"Overview","heroicons-outline:sparkles","\u002Foverview\u002Frouting","\u002Foverview","2.overview",[43,47,52,57,62,67],{"title":44,"path":39,"stem":45,"icon":46},"Routing","2.overview\u002F1.routing","uil:sign-alt",{"title":48,"path":49,"stem":50,"icon":51},"Theming","\u002Foverview\u002Ftheming","2.overview\u002F2.theming","uil:palette",{"title":53,"path":54,"stem":55,"icon":56},"Ionic Auto-Imports","\u002Foverview\u002Fionic-auto-imports","2.overview\u002F3.ionic-auto-imports","uil:channel",{"title":58,"path":59,"stem":60,"icon":61},"Module Utilities","\u002Foverview\u002Fmodule-utilities","2.overview\u002F4.module-utilities","uil:layer-group",{"title":63,"path":64,"stem":65,"icon":66},"Icons","\u002Foverview\u002Ficons","2.overview\u002F5.icons","uil:illustration",{"title":68,"path":69,"stem":70,"icon":71},"Deployment","\u002Foverview\u002Fdeployment","2.overview\u002F6.deployment","uil:rocket",{"title":73,"icon":74,"redirect":75,"path":76,"stem":77,"children":78,"page":35},"Cookbook","heroicons-outline:bookmark-alt","\u002Fcookbook\u002Fcustomising-app-vue","\u002Fcookbook","3.cookbook",[79,82,86,90,94,98,102],{"title":80,"path":75,"stem":81},"Customising app.vue","3.cookbook\u002F1.customising-app-vue",{"title":83,"path":84,"stem":85},"Local Development","\u002Fcookbook\u002Flocal-development","3.cookbook\u002F2.local-development",{"title":87,"path":88,"stem":89},"App Tabs","\u002Fcookbook\u002Fapp-tabs","3.cookbook\u002F3.app-tabs",{"title":91,"path":92,"stem":93},"useHead \u002F Page Meta","\u002Fcookbook\u002Fpage-metadata","3.cookbook\u002F4.page-metadata",{"title":95,"path":96,"stem":97},"iOS and Android Apps","\u002Fcookbook\u002Fcreating-ios-android-apps","3.cookbook\u002F5.creating-ios-android-apps",{"title":99,"path":100,"stem":101},"Web And Device","\u002Fcookbook\u002Fweb-and-device","3.cookbook\u002F6.web-and-device",{"title":103,"path":104,"stem":105},"Live Updates","\u002Fcookbook\u002Flive-updates","3.cookbook\u002F7.live-updates",{"id":107,"title":58,"body":108,"description":680,"extension":681,"links":680,"meta":682,"navigation":683,"path":59,"seo":684,"stem":60,"__hash__":685},"docs\u002F2.overview\u002F4.module-utilities.md",{"type":109,"value":110,"toc":674},"minimark",[111,120,125,132,139,155,165,661,670],[112,113,114,115,119],"p",{},"This modules aims to provide a few components and helpers for an easier and more seamless integration of Ionic's composables or functions in your app. We currently have the one ",[116,117,118],"code",{},"IonAnimation"," component.",[121,122,124],"h2",{"id":123},"components","Components",[126,127,129,131],"h3",{"id":128},"ionanimation-component",[116,130,118],{}," component",[112,133,134,135,138],{},"This component makes using Ionic's ",[116,136,137],{},"createAnimation"," easier. It matches the majority of props directly to the usual Ionic animation object, to make adoption easier.",[112,140,141,142,149,150],{},"For more information, see ",[143,144,148],"a",{"href":145,"rel":146},"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Futilities\u002Fanimations",[147],"nofollow","official Ionic docs"," or check out the ",[143,151,154],{"href":152,"rel":153},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fionic\u002Fblob\u002Fmain\u002Fplayground\u002Fpages\u002Ftabs\u002Ftab4.vue",[147],"playground examples",[112,156,157,158,164],{},"You can see how it replaces usage of the regular ",[143,159,162],{"href":160,"rel":161},"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Futilities\u002Fanimations#installation",[147],[116,163,137],{}," function in the code example below:",[166,167,168,393],"code-group",{},[169,170,175],"pre",{"className":171,"code":172,"filename":118,"language":173,"meta":174,"style":174},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CIonAnimation\n    :duration=\"3000\"\n    :iterations=\"Infinity\"\n    :keyframes=\"[\n      { offset: 0, background: 'red' },\n      { offset: 0.72, background: 'var(--background)' },\n      { offset: 1, background: 'green' },\n    ]\"\n    playOnMount\n  >\n    \u003C!-- Content to animate -->\n  \u003C\u002FIonAnimation>\n\u003C\u002Ftemplate>\n","vue","",[116,176,177,193,202,225,242,257,292,319,346,354,360,366,373,383],{"__ignoreMap":174},[178,179,182,186,190],"span",{"class":180,"line":181},"line",1,[178,183,185],{"class":184},"sMK4o","\u003C",[178,187,189],{"class":188},"swJcz","template",[178,191,192],{"class":184},">\n",[178,194,196,199],{"class":180,"line":195},2,[178,197,198],{"class":184},"  \u003C",[178,200,201],{"class":188},"IonAnimation\n",[178,203,205,208,212,215,218,222],{"class":180,"line":204},3,[178,206,207],{"class":184},"    :",[178,209,211],{"class":210},"spNyl","duration",[178,213,214],{"class":184},"=",[178,216,217],{"class":184},"\"",[178,219,221],{"class":220},"sbssI","3000",[178,223,224],{"class":184},"\"\n",[178,226,228,230,233,235,237,240],{"class":180,"line":227},4,[178,229,207],{"class":184},[178,231,232],{"class":210},"iterations",[178,234,214],{"class":184},[178,236,217],{"class":184},[178,238,239],{"class":184},"Infinity",[178,241,224],{"class":184},[178,243,245,247,250,252,254],{"class":180,"line":244},5,[178,246,207],{"class":184},[178,248,249],{"class":210},"keyframes",[178,251,214],{"class":184},[178,253,217],{"class":184},[178,255,256],{"class":184},"[\n",[178,258,260,263,266,269,272,275,278,280,283,287,289],{"class":180,"line":259},6,[178,261,262],{"class":184},"      { ",[178,264,265],{"class":188},"offset",[178,267,268],{"class":184},": ",[178,270,271],{"class":220},"0",[178,273,274],{"class":184},", ",[178,276,277],{"class":188},"background",[178,279,268],{"class":184},[178,281,282],{"class":184},"'",[178,284,286],{"class":285},"sfazB","red",[178,288,282],{"class":184},[178,290,291],{"class":184}," },\n",[178,293,295,297,299,301,304,306,308,310,312,315,317],{"class":180,"line":294},7,[178,296,262],{"class":184},[178,298,265],{"class":188},[178,300,268],{"class":184},[178,302,303],{"class":220},"0.72",[178,305,274],{"class":184},[178,307,277],{"class":188},[178,309,268],{"class":184},[178,311,282],{"class":184},[178,313,314],{"class":285},"var(--background)",[178,316,282],{"class":184},[178,318,291],{"class":184},[178,320,322,324,326,328,331,333,335,337,339,342,344],{"class":180,"line":321},8,[178,323,262],{"class":184},[178,325,265],{"class":188},[178,327,268],{"class":184},[178,329,330],{"class":220},"1",[178,332,274],{"class":184},[178,334,277],{"class":188},[178,336,268],{"class":184},[178,338,282],{"class":184},[178,340,341],{"class":285},"green",[178,343,282],{"class":184},[178,345,291],{"class":184},[178,347,349,352],{"class":180,"line":348},9,[178,350,351],{"class":184},"    ]",[178,353,224],{"class":184},[178,355,357],{"class":180,"line":356},10,[178,358,359],{"class":210},"    playOnMount\n",[178,361,363],{"class":180,"line":362},11,[178,364,365],{"class":184},"  >\n",[178,367,369],{"class":180,"line":368},12,[178,370,372],{"class":371},"sHwdD","    \u003C!-- Content to animate -->\n",[178,374,376,379,381],{"class":180,"line":375},13,[178,377,378],{"class":184},"  \u003C\u002F",[178,380,118],{"class":188},[178,382,192],{"class":184},[178,384,386,389,391],{"class":180,"line":385},14,[178,387,388],{"class":184},"\u003C\u002F",[178,390,189],{"class":188},[178,392,192],{"class":184},[169,394,397],{"className":171,"code":395,"filename":396,"language":173,"meta":174,"style":174},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F Template ref of your element\nconst squareRef = ref()\n\n\u002F\u002F Your animation object\nconst animation = createAnimation()\n  .addElement(squareRef.value)\n  .duration(3000)\n  .iterations(Infinity)\n  .keyframes([\n    { offset: 0, background: 'red' },\n    { offset: 0.72, background: 'var(--background)' },\n    { offset: 1, background: 'green' },\n  ])\n\nonMounted(() => {\n  animation.play()\n})\n\u003C\u002Fscript>\n","Manual usage",[116,398,399,423,428,446,452,457,471,488,502,514,523,554,579,604,609,614,631,644,652],{"__ignoreMap":174},[178,400,401,403,406,409,412,414,416,419,421],{"class":180,"line":181},[178,402,185],{"class":184},[178,404,405],{"class":188},"script",[178,407,408],{"class":210}," setup",[178,410,411],{"class":210}," lang",[178,413,214],{"class":184},[178,415,217],{"class":184},[178,417,418],{"class":285},"ts",[178,420,217],{"class":184},[178,422,192],{"class":184},[178,424,425],{"class":180,"line":195},[178,426,427],{"class":371},"\u002F\u002F Template ref of your element\n",[178,429,430,433,437,439,443],{"class":180,"line":204},[178,431,432],{"class":210},"const",[178,434,436],{"class":435},"sTEyZ"," squareRef ",[178,438,214],{"class":184},[178,440,442],{"class":441},"s2Zo4"," ref",[178,444,445],{"class":435},"()\n",[178,447,448],{"class":180,"line":227},[178,449,451],{"emptyLinePlaceholder":450},true,"\n",[178,453,454],{"class":180,"line":244},[178,455,456],{"class":371},"\u002F\u002F Your animation object\n",[178,458,459,461,464,466,469],{"class":180,"line":259},[178,460,432],{"class":210},[178,462,463],{"class":435}," animation ",[178,465,214],{"class":184},[178,467,468],{"class":441}," createAnimation",[178,470,445],{"class":435},[178,472,473,476,479,482,485],{"class":180,"line":294},[178,474,475],{"class":184},"  .",[178,477,478],{"class":441},"addElement",[178,480,481],{"class":435},"(squareRef",[178,483,484],{"class":184},".",[178,486,487],{"class":435},"value)\n",[178,489,490,492,494,497,499],{"class":180,"line":321},[178,491,475],{"class":184},[178,493,211],{"class":441},[178,495,496],{"class":435},"(",[178,498,221],{"class":220},[178,500,501],{"class":435},")\n",[178,503,504,506,508,510,512],{"class":180,"line":348},[178,505,475],{"class":184},[178,507,232],{"class":441},[178,509,496],{"class":435},[178,511,239],{"class":184},[178,513,501],{"class":435},[178,515,516,518,520],{"class":180,"line":356},[178,517,475],{"class":184},[178,519,249],{"class":441},[178,521,522],{"class":435},"([\n",[178,524,525,528,531,534,537,540,543,545,548,550,552],{"class":180,"line":362},[178,526,527],{"class":184},"    {",[178,529,530],{"class":188}," offset",[178,532,533],{"class":184},":",[178,535,536],{"class":220}," 0",[178,538,539],{"class":184},",",[178,541,542],{"class":188}," background",[178,544,533],{"class":184},[178,546,547],{"class":184}," '",[178,549,286],{"class":285},[178,551,282],{"class":184},[178,553,291],{"class":184},[178,555,556,558,560,562,565,567,569,571,573,575,577],{"class":180,"line":368},[178,557,527],{"class":184},[178,559,530],{"class":188},[178,561,533],{"class":184},[178,563,564],{"class":220}," 0.72",[178,566,539],{"class":184},[178,568,542],{"class":188},[178,570,533],{"class":184},[178,572,547],{"class":184},[178,574,314],{"class":285},[178,576,282],{"class":184},[178,578,291],{"class":184},[178,580,581,583,585,587,590,592,594,596,598,600,602],{"class":180,"line":375},[178,582,527],{"class":184},[178,584,530],{"class":188},[178,586,533],{"class":184},[178,588,589],{"class":220}," 1",[178,591,539],{"class":184},[178,593,542],{"class":188},[178,595,533],{"class":184},[178,597,547],{"class":184},[178,599,341],{"class":285},[178,601,282],{"class":184},[178,603,291],{"class":184},[178,605,606],{"class":180,"line":385},[178,607,608],{"class":435},"  ])\n",[178,610,612],{"class":180,"line":611},15,[178,613,451],{"emptyLinePlaceholder":450},[178,615,617,620,622,625,628],{"class":180,"line":616},16,[178,618,619],{"class":441},"onMounted",[178,621,496],{"class":435},[178,623,624],{"class":184},"()",[178,626,627],{"class":210}," =>",[178,629,630],{"class":184}," {\n",[178,632,634,637,639,642],{"class":180,"line":633},17,[178,635,636],{"class":435},"  animation",[178,638,484],{"class":184},[178,640,641],{"class":441},"play",[178,643,445],{"class":188},[178,645,647,650],{"class":180,"line":646},18,[178,648,649],{"class":184},"}",[178,651,501],{"class":435},[178,653,655,657,659],{"class":180,"line":654},19,[178,656,388],{"class":184},[178,658,405],{"class":188},[178,660,192],{"class":184},[662,663,666,667,669],"callout",{"color":664,"icon":665},"info","i-lucide-info","Currently component doesn't support grouped and chained animations. For that usage we still recommend using ",[116,668,137],{}," by itself",[671,672,673],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":174,"searchDepth":195,"depth":195,"links":675},[676],{"id":123,"depth":195,"text":124,"children":677},[678],{"id":128,"depth":204,"text":679},"IonAnimation component",null,"md",{},{"icon":61},{"title":58,"description":680},"nuYxuhmGdtNXvdBJo5WT366xNpPal5PBmuScq1sQhvw",[687,688],{"title":53,"path":54,"stem":55,"description":680,"icon":56,"children":-1},{"title":63,"path":64,"stem":65,"description":174,"icon":66,"children":-1},1786955340943]