[{"data":1,"prerenderedAt":620},["ShallowReactive",2],{"navigation_docs":3,"-overview-module-utilities":106,"-overview-module-utilities-surround":617},[4,36,72],{"title":5,"icon":6,"redirect":7,"path":8,"stem":9,"children":10,"page":35},"Get Started","heroicons-outline:star","/get-started/introduction","/get-started","1.get-started",[11,15,20,25,30],{"title":12,"path":7,"stem":13,"icon":14},"Introduction","1.get-started/1.introduction","uil:info-circle",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/get-started/installation","1.get-started/2.installation","uil:play-circle",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","/get-started/configuration","1.get-started/3.configuration","uil:wrench",{"title":26,"path":27,"stem":28,"icon":29},"Enabling Capacitor","/get-started/enabling-capacitor","1.get-started/4.enabling-capacitor","nonicons:capacitor-16",{"title":31,"path":32,"stem":33,"icon":34},"Watchouts","/get-started/watch-outs","1.get-started/5.watch-outs","uil:exclamation-triangle",false,{"title":37,"icon":38,"redirect":39,"path":40,"stem":41,"children":42,"page":35},"Overview","heroicons-outline:sparkles","/overview/routing","/overview","2.overview",[43,47,52,57,62,67],{"title":44,"path":39,"stem":45,"icon":46},"Routing","2.overview/1.routing","uil:sign-alt",{"title":48,"path":49,"stem":50,"icon":51},"Theming","/overview/theming","2.overview/2.theming","uil:palette",{"title":53,"path":54,"stem":55,"icon":56},"Ionic Auto-Imports","/overview/ionic-auto-imports","2.overview/3.ionic-auto-imports","uil:channel",{"title":58,"path":59,"stem":60,"icon":61},"Module Utilities","/overview/module-utilities","2.overview/4.module-utilities","uil:layer-group",{"title":63,"path":64,"stem":65,"icon":66},"Icons","/overview/icons","2.overview/5.icons","uil:illustration",{"title":68,"path":69,"stem":70,"icon":71},"Deployment","/overview/deployment","2.overview/6.deployment","uil:rocket",{"title":73,"icon":74,"redirect":75,"path":76,"stem":77,"children":78,"page":35},"Cookbook","heroicons-outline:bookmark-alt","/cookbook/customising-app-vue","/cookbook","3.cookbook",[79,82,86,90,94,98,102],{"title":80,"path":75,"stem":81},"Customising app.vue","3.cookbook/1.customising-app-vue",{"title":83,"path":84,"stem":85},"Local Development","/cookbook/local-development","3.cookbook/2.local-development",{"title":87,"path":88,"stem":89},"App Tabs","/cookbook/app-tabs","3.cookbook/3.app-tabs",{"title":91,"path":92,"stem":93},"useHead / Page Meta","/cookbook/page-metadata","3.cookbook/4.page-metadata",{"title":95,"path":96,"stem":97},"iOS and Android Apps","/cookbook/creating-ios-android-apps","3.cookbook/5.creating-ios-android-apps",{"title":99,"path":100,"stem":101},"Web And Device","/cookbook/web-and-device","3.cookbook/6.web-and-device",{"title":103,"path":104,"stem":105},"Live Updates","/cookbook/live-updates","3.cookbook/7.live-updates",{"id":107,"title":58,"body":108,"description":611,"extension":612,"links":611,"meta":613,"navigation":614,"path":59,"seo":615,"stem":60,"__hash__":616},"docs/2.overview/4.module-utilities.md",{"type":109,"value":110,"toc":605},"minimark",[111,120,125,132,139,155,165,592,601],[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://ionicframework.com/docs/utilities/animations",[147],"nofollow","official Ionic docs"," or check out the ",[143,151,154],{"href":152,"rel":153},"https://github.com/nuxt-modules/ionic/blob/main/playground/pages/tabs/tab4.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://ionicframework.com/docs/utilities/animations#installation",[147],[116,163,137],{}," function in the code example below:",[166,167,168,315],"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/IonAnimation>\n\u003C/template>\n","vue","",[116,176,177,193,202,222,237,250,256,262,268,276,282,288,295,305],{"__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,209,212,215,219],{"class":180,"line":204},3,[178,206,208],{"class":207},"spNyl","    :duration",[178,210,211],{"class":184},"=",[178,213,214],{"class":184},"\"",[178,216,218],{"class":217},"sfazB","3000",[178,220,221],{"class":184},"\"\n",[178,223,225,228,230,232,235],{"class":180,"line":224},4,[178,226,227],{"class":207},"    :iterations",[178,229,211],{"class":184},[178,231,214],{"class":184},[178,233,234],{"class":217},"Infinity",[178,236,221],{"class":184},[178,238,240,243,245,247],{"class":180,"line":239},5,[178,241,242],{"class":207},"    :keyframes",[178,244,211],{"class":184},[178,246,214],{"class":184},[178,248,249],{"class":217},"[\n",[178,251,253],{"class":180,"line":252},6,[178,254,255],{"class":217},"      { offset: 0, background: 'red' },\n",[178,257,259],{"class":180,"line":258},7,[178,260,261],{"class":217},"      { offset: 0.72, background: 'var(--background)' },\n",[178,263,265],{"class":180,"line":264},8,[178,266,267],{"class":217},"      { offset: 1, background: 'green' },\n",[178,269,271,274],{"class":180,"line":270},9,[178,272,273],{"class":217},"    ]",[178,275,221],{"class":184},[178,277,279],{"class":180,"line":278},10,[178,280,281],{"class":207},"    playOnMount\n",[178,283,285],{"class":180,"line":284},11,[178,286,287],{"class":184},"  >\n",[178,289,291],{"class":180,"line":290},12,[178,292,294],{"class":293},"sHwdD","    \u003C!-- Content to animate -->\n",[178,296,298,301,303],{"class":180,"line":297},13,[178,299,300],{"class":184},"  \u003C/",[178,302,118],{"class":188},[178,304,192],{"class":184},[178,306,308,311,313],{"class":180,"line":307},14,[178,309,310],{"class":184},"\u003C/",[178,312,189],{"class":188},[178,314,192],{"class":184},[169,316,319],{"className":171,"code":317,"filename":318,"language":173,"meta":174,"style":174},"\u003Cscript setup lang=\"ts\">\n// Template ref of your element\nconst squareRef = ref()\n\n// 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/script>\n","Manual usage",[116,320,321,345,350,368,374,379,393,410,426,439,449,483,509,535,540,545,562,575,583],{"__ignoreMap":174},[178,322,323,325,328,331,334,336,338,341,343],{"class":180,"line":181},[178,324,185],{"class":184},[178,326,327],{"class":188},"script",[178,329,330],{"class":207}," setup",[178,332,333],{"class":207}," lang",[178,335,211],{"class":184},[178,337,214],{"class":184},[178,339,340],{"class":217},"ts",[178,342,214],{"class":184},[178,344,192],{"class":184},[178,346,347],{"class":180,"line":195},[178,348,349],{"class":293},"// Template ref of your element\n",[178,351,352,355,359,361,365],{"class":180,"line":204},[178,353,354],{"class":207},"const",[178,356,358],{"class":357},"sTEyZ"," squareRef ",[178,360,211],{"class":184},[178,362,364],{"class":363},"s2Zo4"," ref",[178,366,367],{"class":357},"()\n",[178,369,370],{"class":180,"line":224},[178,371,373],{"emptyLinePlaceholder":372},true,"\n",[178,375,376],{"class":180,"line":239},[178,377,378],{"class":293},"// Your animation object\n",[178,380,381,383,386,388,391],{"class":180,"line":252},[178,382,354],{"class":207},[178,384,385],{"class":357}," animation ",[178,387,211],{"class":184},[178,389,390],{"class":363}," createAnimation",[178,392,367],{"class":357},[178,394,395,398,401,404,407],{"class":180,"line":258},[178,396,397],{"class":184},"  .",[178,399,400],{"class":363},"addElement",[178,402,403],{"class":357},"(squareRef",[178,405,406],{"class":184},".",[178,408,409],{"class":357},"value)\n",[178,411,412,414,417,420,423],{"class":180,"line":264},[178,413,397],{"class":184},[178,415,416],{"class":363},"duration",[178,418,419],{"class":357},"(",[178,421,218],{"class":422},"sbssI",[178,424,425],{"class":357},")\n",[178,427,428,430,433,435,437],{"class":180,"line":270},[178,429,397],{"class":184},[178,431,432],{"class":363},"iterations",[178,434,419],{"class":357},[178,436,234],{"class":184},[178,438,425],{"class":357},[178,440,441,443,446],{"class":180,"line":278},[178,442,397],{"class":184},[178,444,445],{"class":363},"keyframes",[178,447,448],{"class":357},"([\n",[178,450,451,454,457,460,463,466,469,471,474,477,480],{"class":180,"line":284},[178,452,453],{"class":184},"    {",[178,455,456],{"class":188}," offset",[178,458,459],{"class":184},":",[178,461,462],{"class":422}," 0",[178,464,465],{"class":184},",",[178,467,468],{"class":188}," background",[178,470,459],{"class":184},[178,472,473],{"class":184}," '",[178,475,476],{"class":217},"red",[178,478,479],{"class":184},"'",[178,481,482],{"class":184}," },\n",[178,484,485,487,489,491,494,496,498,500,502,505,507],{"class":180,"line":290},[178,486,453],{"class":184},[178,488,456],{"class":188},[178,490,459],{"class":184},[178,492,493],{"class":422}," 0.72",[178,495,465],{"class":184},[178,497,468],{"class":188},[178,499,459],{"class":184},[178,501,473],{"class":184},[178,503,504],{"class":217},"var(--background)",[178,506,479],{"class":184},[178,508,482],{"class":184},[178,510,511,513,515,517,520,522,524,526,528,531,533],{"class":180,"line":297},[178,512,453],{"class":184},[178,514,456],{"class":188},[178,516,459],{"class":184},[178,518,519],{"class":422}," 1",[178,521,465],{"class":184},[178,523,468],{"class":188},[178,525,459],{"class":184},[178,527,473],{"class":184},[178,529,530],{"class":217},"green",[178,532,479],{"class":184},[178,534,482],{"class":184},[178,536,537],{"class":180,"line":307},[178,538,539],{"class":357},"  ])\n",[178,541,543],{"class":180,"line":542},15,[178,544,373],{"emptyLinePlaceholder":372},[178,546,548,551,553,556,559],{"class":180,"line":547},16,[178,549,550],{"class":363},"onMounted",[178,552,419],{"class":357},[178,554,555],{"class":184},"()",[178,557,558],{"class":207}," =>",[178,560,561],{"class":184}," {\n",[178,563,565,568,570,573],{"class":180,"line":564},17,[178,566,567],{"class":357},"  animation",[178,569,406],{"class":184},[178,571,572],{"class":363},"play",[178,574,367],{"class":188},[178,576,578,581],{"class":180,"line":577},18,[178,579,580],{"class":184},"}",[178,582,425],{"class":357},[178,584,586,588,590],{"class":180,"line":585},19,[178,587,310],{"class":184},[178,589,327],{"class":188},[178,591,192],{"class":184},[593,594,597,598,600],"callout",{"color":595,"icon":596},"info","i-lucide-info","Currently component doesn't support grouped and chained animations. For that usage we still recommend using ",[116,599,137],{}," by itself",[602,603,604],"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 .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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":174,"searchDepth":195,"depth":195,"links":606},[607],{"id":123,"depth":195,"text":124,"children":608},[609],{"id":128,"depth":204,"text":610},"IonAnimation component",null,"md",{},{"icon":61},{"title":58,"description":611},"4ArvfhcueQPTTOPWX1BGXRi0Yozae608JxPMJEOvFTA",[618,619],{"title":53,"path":54,"stem":55,"description":611,"icon":56,"children":-1},{"title":63,"path":64,"stem":65,"description":174,"icon":66,"children":-1},1775601896862]