Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
82 lines (74 loc) · 91.3 KB
/
Copy pathindex.html
File metadata and controls
82 lines (74 loc) · 91.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html> <html class="theme-default typo-default" lang=en> <head> <meta charset=utf-8> <meta content="width=device-width" name=viewport> <meta content=#aa1e1e name=theme-color> <base href=/ > <link href=global.css rel=stylesheet> <link href=prism.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.png rel=icon type=image/png> <style>main.svelte-hpyrv2{position:relative;margin:0 auto;padding:var(--nav-h) var(--side-nav) 0 var(--side-nav);overflow-x:hidden}.design-attribution.svelte-hpyrv2{color:#aaa;font-size:1.2rem;padding:.5rem 1rem}header.svelte-pkbmi6{position:fixed;display:flex;align-items:center;justify-content:space-between;width:100vw;height:var(--nav-h);padding:0 var(--side-nav);margin:0 auto;background-color:#fff;box-shadow:0 -.4rem .9rem .2rem rgba(0,0,0,.5);font-family:var(--font);z-index:10;user-select:none;transform:translate(0,calc(-100% - 1rem));transition:transform .2s}header.visible.svelte-pkbmi6{transform:none}nav.svelte-pkbmi6{position:fixed;top:0;left:0;width:100vw;height:var(--nav-h);padding:0 var(--side-nav) 0 var(--side-nav);display:flex;align-items:center;justify-content:space-between;background-color:transparent;transform:none;transition:none;box-shadow:none}h2.svelte-pkbmi6{display:block;text-transform:uppercase;font-weight:300;font-size:2.8rem;letter-spacing:.12em;line-height:1;margin:0;top:.1rem}.primary.svelte-pkbmi6{list-style:none;font-family:var(--font);margin:0;line-height:1}li.svelte-pkbmi6{display:block;display:none}li.active.svelte-pkbmi6{display:block}ul.svelte-pkbmi6{position:relative;padding:0 2em 0 0;background:url(/icons/chevron.svg) calc(100% - 1em) .05em no-repeat;background-size:1em 1em}ul.svelte-pkbmi6::after{position:absolute;content:'';width:100%;height:100%;left:0;top:0}ul.open.svelte-pkbmi6{padding:0 2em 1em 2em;background:#fff;border-left:1px solid #eee;border-right:1px solid #eee;border-bottom:1px solid #eee;border-radius:0 0 var(--border-r) var(--border-r);align-self:start}ul.open.svelte-pkbmi6 li.svelte-pkbmi6{display:block;text-align:right}ul.open.svelte-pkbmi6::after{display:none}ul.svelte-pkbmi6 li a.svelte-pkbmi6{font-size:var(--h6);padding:0 .8rem}ul.open.svelte-pkbmi6 li a.svelte-pkbmi6{padding:2.3rem .7rem 0 .8rem;display:block}.primary.svelte-pkbmi6 svg{width:2rem;height:2rem}.home.svelte-pkbmi6{position:relative;top:0;width:18rem;color:var(--second);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;z-index:11;padding:.5rem 0 .3rem 4.2rem;background:url(/logo.svg) 0 50% no-repeat;background-size:auto 100%}.active.svelte-pkbmi6{color:var(--prime)}@media(min-width:768px){ul.svelte-pkbmi6{padding:0;background:0 0}ul.open.svelte-pkbmi6{padding:0;background:#fff;border:none;align-self:initial}ul.open.svelte-pkbmi6 li.svelte-pkbmi6{display:inline;text-align:left}ul.open.svelte-pkbmi6 li a.svelte-pkbmi6{font-size:var(--h6);padding:0 .8rem;display:inline}ul.svelte-pkbmi6::after{display:none}li.svelte-pkbmi6{display:inline!important}.hide-if-desktop.svelte-pkbmi6{display:none!important}}.icon.svelte-1gsl016{position:relative;overflow:hidden;vertical-align:middle;-o-object-fit:contain;object-fit:contain;-webkit-transform-origin:center center;transform-origin:center center;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}aside.svelte-1orywqh{position:fixed;background-color:#fff;left:.8rem;bottom:.8rem;width:2em;height:2em;overflow:hidden;border:1px solid #eee;box-shadow:1px 1px 6px rgba(0,0,0,.1);border-radius:var(--border-r);padding:1.6rem;transition:width .2s,height .2s}aside.svelte-1orywqh button.svelte-1orywqh{position:absolute;bottom:0;left:0;width:3.4rem;height:3.4rem}aside.open.svelte-1orywqh{width:calc(100vw - 1.6rem);height:calc(100vh - var(--nav-h) - 7rem)}aside.open.svelte-1orywqh::before{content:'';position:absolute;left:0;bottom:calc(100vh - var(--nav-h) - 10.8rem);width:100%;height:2em;background:linear-gradient(to top,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,1) 100%);pointer-events:none;z-index:2}aside.svelte-1orywqh::after{content:'';position:absolute;left:0;bottom:1.9em;width:100%;height:2em;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,1) 100%);pointer-events:none}.sidebar.svelte-1orywqh{position:absolute;font-family:var(--font);overflow-y:auto;width:calc(100vw - 4.8rem);height:calc(100vh - var(--nav-h) - 10.8rem);padding:2em 0;bottom:2em}.content.svelte-1orywqh{width:100%;max-width:calc(var(--main-width) + var(--side-nav));margin:0 auto;-moz-tab-size:2;padding:var(--top-offset) 0;tab-size:2}@media(min-width:832px){aside.svelte-1orywqh{display:block;width:var(--sidebar-w);height:calc(100vh - var(--nav-h));top:var(--nav-h);left:var(--side-nav);overflow:hidden;box-shadow:none;border:none;overflow:hidden;padding:0}aside.open.svelte-1orywqh::before{display:none}aside.svelte-1orywqh::after{content:'';bottom:0;height:var(--top-offset)}aside.svelte-1orywqh button.svelte-1orywqh{display:none}.sidebar.svelte-1orywqh{padding:var(--top-offset) 3.2rem var(--top-offset) 0;font-family:var(--font);overflow-y:auto;height:100%;bottom:auto;width:calc(var(--sidebar-w) + 5rem)}.content.svelte-1orywqh{max-width:none;padding-left:28rem}}@media(min-width:1200px){aside.svelte-1orywqh{display:block;left:calc(50vw - (60rem - var(--side-nav)))}.content.svelte-1orywqh{width:80rem;padding-left:calc(50vw - 32rem);box-sizing:content-box}}.content.svelte-1orywqh h2.svelte-1orywqh{margin-top:16rem;padding:2rem 1.6rem 5.6rem .2rem;border-top:2px solid var(--second);color:var(--second);line-height:1}.content.svelte-1orywqh section:first-of-type>h2.svelte-1orywqh{margin-top:0}.content.svelte-1orywqh .offset-anchor{position:relative;display:block;top:calc(-1 * (var(--nav-h) + var(--top-offset) - 1rem));width:0;height:0}.content.svelte-1orywqh .anchor{position:absolute;display:block;background:url(/icons/link.svg) 0 50% no-repeat;background-size:1em 1em;width:1.4em;height:1em;left:-1.3em;opacity:0;transition:opacity .2s;border:none!important}@media(min-width:768px){.content.svelte-1orywqh h2:hover .anchor,.content.svelte-1orywqh h3:hover .anchor{opacity:1}}.content.svelte-1orywqh h3,.content.svelte-1orywqh h3>code{font-weight:700;font-size:var(--h3);color:var(--second);margin:6.4rem 0 1.6rem 0;background:0 0;line-height:1}.content.svelte-1orywqh code{padding:.3rem .8rem .3rem;margin:0 .2rem;top:-.1rem;background:#f4f4f4}.content.svelte-1orywqh pre code{padding:0;margin:0;top:0;background:0 0}.content.svelte-1orywqh .icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}section.svelte-1orywqh>p{max-width:var(--linemax)}small.svelte-1orywqh{font-size:var(--h5);float:right;pointer-events:all;color:var(--prime);cursor:pointer}small.svelte-1orywqh a.svelte-1orywqh{all:unset}small.svelte-1orywqh a.svelte-1orywqh:before{all:unset}section.svelte-1orywqh blockquote{color:#0098ff;border:2px solid var(--flash);padding-left:8.8rem}section.svelte-1orywqh blockquote code{background:#e5f4ff!important;color:#0098ff}section.svelte-1orywqh blockquote::before{content:' ';position:absolute;top:calc(50% - 1.5rem);left:3.2rem;width:3rem;height:3rem;background-repeat:no-repeat;background-image:url(/icons/tip.svg)}.guide-toc.svelte-14g2kik li.svelte-14g2kik{display:block;line-height:1.2;margin:0 0 4.8rem 0}.section.svelte-14g2kik{display:block;padding:0 0 .8rem 0;font:400 var(--h6) var(--font);text-transform:uppercase;letter-spacing:.12em}.subsection.svelte-14g2kik{display:block;font-size:1.6rem;font-family:var(--font);padding:.3em 0}.section.svelte-14g2kik:hover,.subsection.svelte-14g2kik:hover{color:var(--flash)}.active.svelte-14g2kik{color:var(--prime)}</style> <noscript id=sapper-head-start></noscript><title>Learn Svelte Native</title><title>Learn Svelte Native</title><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <svg style=display:none> <symbol class=icon id=arrow-left viewBox="0 0 24 24"> <line x1=19 x2=5 y1=12 y2=12></line> <polyline points="12 19 5 12 12 5"></polyline> </symbol> <symbol class=icon id=arrow-right viewBox="0 0 24 24"> <line x1=5 x2=19 y1=12 y2=12></line> <polyline points="12 5 19 12 12 19"></polyline> </symbol> <symbol class=icon id=arrow-up viewBox="0 0 24 24"> <line x1=12 x2=12 y1=19 y2=5></line> <polyline points="5 12 12 5 19 12"></polyline> </symbol> <symbol class=icon id=arrow-down viewBox="0 0 24 24"> <line x1=12 x2=12 y1=5 y2=19></line> <polyline points="19 12 12 19 5 12"></polyline> </symbol> <symbol class=icon id=check viewBox="0 0 24 24"> <polyline points="20 6 9 17 4 12"></polyline> </symbol> <symbol class=icon id=close viewBox="0 0 24 24"> <line x1=18 x2=6 y1=6 y2=18></line> <line x1=6 x2=18 y1=6 y2=18></line> </symbol> <symbol class=icon id=download viewBox="0 0 24 24"> <path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1=12 x2=12 y1=15 y2=3></line> </symbol> <symbol class=icon id=edit viewBox="0 0 24 24"> <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path> <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon> </symbol> <symbol class=icon id=github viewBox="0 0 24 24"> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> </symbol> <symbol class=icon id=git-branch viewBox="0 0 24 24"> <line x1=6 x2=6 y1=3 y2=15></line> <circle cx=18 cy=6 r=3></circle> <circle cx=6 cy=18 r=3></circle> <path d="M18 9a9 9 0 0 1-9 9"></path> </symbol> <symbol class=icon id=log-in viewBox="0 0 24 24"> <path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15"></path> <polyline points="10 17 15 12 10 7"></polyline> <line x1=15 x2=3 y1=12 y2=12></line> </symbol> <symbol class=icon id=maximize viewBox="0 0 24 24"> <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path> </symbol> <symbol class=icon id=maximize-2 viewBox="0 0 24 24"> <polyline points="15 3 21 3 21 9"></polyline> <polyline points="9 21 3 21 3 15"></polyline> <line x1=21 x2=14 y1=3 y2=10></line> <line x1=3 x2=10 y1=21 y2=14></line> </symbol> <symbol class=icon id=menu viewBox="0 0 24 24"> <line x1=3 x2=21 y1=12 y2=12></line> <line x1=3 x2=21 y1=6 y2=6></line> <line x1=3 x2=21 y1=18 y2=18></line> </symbol> <symbol class=icon id=message-square viewBox="0 0 24 24"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </symbol> <symbol class=icon id=minus viewBox="0 0 24 24"> <line x1=5 x2=19 y1=12 y2=12></line> </symbol> <symbol class=icon id=plus viewBox="0 0 24 24"> <line x1=12 x2=12 y1=5 y2=19></line> <line x1=5 x2=19 y1=12 y2=12></line> </symbol> <symbol class=icon id=save viewBox="0 0 24 24"> <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path> <polyline points="17 21 17 13 7 13 7 21"></polyline> <polyline points="7 3 7 8 15 8"></polyline> </symbol> <symbol class=icon id=link viewBox="0 0 24 24"> <path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"></path> <path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"></path> <path d=M7,12L17,12></path> </symbol> <symbol class=icon id=chevron viewBox="0 0 24 24"> <path d="M2,7 L12,17 L20,7"></path> </symbol> </svg> <header class="svelte-pkbmi6 visible"> <nav class=svelte-pkbmi6> <a href=. class="svelte-pkbmi6 home" title=Homepage rel=prefetch> <h2 class=svelte-pkbmi6>Native</h2> </a> <ul class="svelte-pkbmi6 primary"> <li class="svelte-pkbmi6 hide-if-desktop"><a href=. class=svelte-pkbmi6 rel=prefetch>Home</a></li> <li class=svelte-pkbmi6><a href=tutorial class=svelte-pkbmi6 rel=prefetch>Tutorial</a></li> <li class="svelte-pkbmi6 active"><a href=docs class=svelte-pkbmi6 rel=prefetch>API Docs</a></li> <li class=svelte-pkbmi6><a href=blog class=svelte-pkbmi6 rel=prefetch>Blog</a></li> <li class=svelte-pkbmi6><a href=https://v3.svelte.technology/ class=svelte-pkbmi6>Svelte</a></li> <li class=svelte-pkbmi6><a href=https://docs.nativescript.org/start/introduction class=svelte-pkbmi6>NativeScript</a></li> <li class=svelte-pkbmi6> <a href=https://github.com/halfnelson/svelte-native class=svelte-pkbmi6 title="Github Repo"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#github></use> </svg> </a> </li> </ul> </nav> </header> <main class=svelte-hpyrv2> <div class="svelte-1orywqh content linkify listify"> <section class=svelte-1orywqh data-id=important-note> <h2 class=svelte-1orywqh> <span class=offset-anchor id=important-note></span> <a href=#important-note class=anchor aria-hidden></a> Important note <small class=svelte-1orywqh> <a href=https://github.com/halfnelson/svelte-native/edit/master/docs_src/content/docs/0-important-note.md class=svelte-1orywqh title="edit this section"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#edit></use> </svg></a> </small> </h2> <h3> <span class=offset-anchor id=this-is-a-community-project></span> <a href=guide#this-is-a-community-project class=anchor aria-hidden=true></a> This is a community project </h3><p>Svelte Native is developed by members of the the Svelte community who wish to have the same smooth development experience on mobile devices as they have on the web. This project is not an officially supported product of either the NativeScript or Svelte projects.</p> <p>Yet.</p> </section><section class=svelte-1orywqh data-id=introduction> <h2 class=svelte-1orywqh> <span class=offset-anchor id=introduction></span> <a href=#introduction class=anchor aria-hidden></a> Introduction <small class=svelte-1orywqh> <a href=https://github.com/halfnelson/svelte-native/edit/master/docs_src/content/docs/00-introduction.md class=svelte-1orywqh title="edit this section"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#edit></use> </svg></a> </small> </h2> <h4>What is NativeScript?</h4><p> <a href=https://www.nativescript.org/ >NativeScript</a> is an open-source framework to develop apps on the Apple iOS and Android platforms. It is open source and can be found on <a href=https://github.com/nativescript/nativescript>github</a></p> <h4>What is Svelte?</h4><p><a href=https://svelte.technology>Svelte</a> is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.</p> <p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p> <h4>What is Svelte Native</h4><p>Svelte Native is a tool for building mobile applications. It combines NativeScript's access to the native platform views and Svelte's fast and efficient view updates to allow you to build native mobile experiences using tools such as HTML, CSS and Javascript.</p> <p><a href=/blog/svelte-goes-native>Read the introductory blog post</a>.</p> <p><img alt="NativeScript + Svelte = Svelte Native" src=/logos_combined.svg></p> </section><section class=svelte-1orywqh data-id=getting-started> <h2 class=svelte-1orywqh> <span class=offset-anchor id=getting-started></span> <a href=#getting-started class=anchor aria-hidden></a> Getting Started <small class=svelte-1orywqh> <a href=https://github.com/halfnelson/svelte-native/edit/master/docs_src/content/docs/01-getting-started.md class=svelte-1orywqh title="edit this section"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#edit></use> </svg></a> </small> </h2> <h3> <span class=offset-anchor id=quick-start></span> <a href=guide#quick-start class=anchor aria-hidden=true></a> Quick Start </h3><h4>Install Nativescript</h4><p>Svelte-Native works on top of NativeScript. To install NativeScript:</p> <div class=code-block><pre class=language-bash><code>$ <span class="token function">npm</span> <span class="token function">install</span> -g nativescript</code></pre></div><p>Check it worked by running <code>tns</code></p> <p><img alt=Success src=/media/tns-success.png></p> <h4>Install the NativeScript Playground app</h4><p>Svelte-Native really is native, so it needs a mobile device to run. The build setup for iOS or Android can be a pain, so the wizards at Progress have created the NativeScript playground app. This allows us to run Svelte-Native application code without having to build the full mobile application.</p> <p><a href="https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1"><img alt="Get if rom the App Store" src=/media/app-store.png></a> <a href="https://play.google.com/store/apps/details?id=org.nativescript.play"><img alt="Get it from Google Play" src=/media/google-play.png></a></p> <h4>Create a new Svelte-Native app</h4><p>The easiest way to get started is to use the <a href=https://github.com/halfnelson/svelte-native-template>latest template app</a></p> <div class=code-block><pre class=language-bash><code>$ degit halfnelson/svelte-native-template myapp</code></pre></div><p>A fresh svelte-native app will be found in the <code>myapp</code> folder</p> <h4>Launch It</h4><p>Launch your app with:</p> <div class=code-block><pre class=language-bash><code>$ <span class="token function">cd</span> myapp
$ tns preview --bundle</code></pre></div><p>You will need to scan the ascii art QR code using the "Playground" app you installed previously.</p> <img alt="Running App" src=/media/quick-start-screenshot.png width=200> <h3> <span class=offset-anchor id=advanced-install></span> <a href=guide#advanced-install class=anchor aria-hidden=true></a> Advanced Install </h3><p>To compile your apps for distribution, you will need to use setup your system for local compilation.</p> <p>Svelte-Native runs on top of an unmodified NativeScript platform. Installation instructions for your operating system can be found in the <a href=https://docs.nativescript.org/start/quick-setup>Native Script Guide</a></p> <p>Check you have the NativeScript build environment configured correctly by using the Nativescript doctor command:</p> <div class=code-block><pre class=language-bash><code>$ tns doctor</code></pre></div><p>Once that is happy you can do a full compile and launch of your application with</p> <div class=code-block><pre class=language-bash><code>$ tns run android --bundle</code></pre></div><p>or</p> <div class=code-block><pre class=language-bash><code>$ tns run ios --bundle</code></pre></div> </section><section class=svelte-1orywqh data-id=routing> <h2 class=svelte-1orywqh> <span class=offset-anchor id=routing></span> <a href=#routing class=anchor aria-hidden></a> Navigation/Routing <small class=svelte-1orywqh> <a href=https://github.com/halfnelson/svelte-native/edit/master/docs_src/content/docs/10-routing.md class=svelte-1orywqh title="edit this section"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#edit></use> </svg></a> </small> </h2> <p>Since Svelte Native is a thin bridge between Svelte and NativeScript. It is best if you familiarize yourself with the core concept of <a href=https://docs.nativescript.org/core-concepts/navigation>routing in NativeScript</a></p> <p>Routing in Svelte Native is designed to be very similar and the <code>svelte-native</code> module exposes the following functions:</p> <h3> <span class=offset-anchor id=navigate></span> <a href=guide#navigate class=anchor aria-hidden=true></a> navigate </h3><p>Specify the destination page with the mandatory <code>page</code> option. This takes a <code>Svelte</code> component class.</p> <div class="code-block named"><span class=filename> App.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>actionBar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Master<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>To Details directly<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">on:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ () => navigate({ page: Detail }) }<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token language-javascript script">
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./Detail.svelte'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte-native'</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div><h4>Passing props to the target component</h4><p>You can specify the props used to create the Svelte component using the <code>props</code> option.</p> <div class="code-block named"><span class=filename> App.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>actionBar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Master<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>To Details directly<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">on:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{showDetailWithProps}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token language-javascript script">
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./Detail.svelte'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> navigate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte-native'</span>
<span class="token keyword">function</span> <span class="token function">showDetailWithProps</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">navigate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
page<span class="token punctuation">:</span> Detail<span class="token punctuation">,</span>
props<span class="token punctuation">:</span> <span class="token punctuation">{</span> message<span class="token punctuation">:</span> <span class="token string">"Hello from master"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div><h4>Specifying a Frame</h4><p>Each <code><frame></code> element has its own navigation stack. If you are using multiple frames, you may want to specify in which frame the navigation will occur. For example, having a button in the side bar that changes the page in the main area. You can do this by adding the <code>frame</code> option:</p> <div class=code-block><pre class=language-javascript><code><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
page<span class="token punctuation">:</span> Detail<span class="token punctuation">,</span>
frame<span class="token punctuation">:</span> <span class="token string">'<id, or ref, or instance>'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p>The value for the <code>frame</code> option can be one of the following:</p> <ul> <li>the <code>id</code> of the <code><frame></code> component (for example: <code><frame id="main-frame"></code>)</li> <li>a reference to the <code><frame></code> (for example: <code><frame bind:this="{mainFrame}"></code>)</li> <li>a NativeScript <code>Frame</code> instance.</li> </ul> <p>If no frame is specified, the navigation will occur on the <a href=https://docs.nativescript.org/api-reference/modules/_ui_frame_#topmost>topmost</a> frame.</p> <h4>Other Options</h4><p>For more information about the options that you can pass, see <a href=https://docs.nativescript.org/api-reference/interfaces/_ui_frame_.navigationentry>NavigationEntry</a>.</p> <h3> <span class=offset-anchor id=goback></span> <a href=guide#goback class=anchor aria-hidden=true></a> goBack </h3><p>To navigate back to a previous page, use the <code>goBack</code> function.</p> <div class="code-block named"><span class=filename> App.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>actionBar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Detail<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Back to Master<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">on:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{goBack}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token language-javascript script">
<span class="token keyword">import</span> <span class="token punctuation">{</span> goBack <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte-native'</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div><p>To cause the back to happen on another frame, pass in a frame reference or id to the <code>frame</code> option.</p> <div class=code-block><pre class=language-javascript><code> <span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">{</span>frame<span class="token punctuation">:</span> <span class="token string">'sub-nav-frame'</span><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p><code>goBack</code> by default goes back to the previous page, you can go back multiple pages if you specify a <code>page</code> reference in options.</p> <div class=code-block><pre class=language-javascript><code> <span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">{</span>to<span class="token punctuation">:</span> options_page_ref<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div> <h3> <span class=offset-anchor id=showmodal></span> <a href=guide#showmodal class=anchor aria-hidden=true></a> showModal </h3><p>To show a page or component modally use the <code>showModal</code> function. Specify the page to open using the <code>page</code> option and props using the <code>props</code> option (just like in <a href=#navigate>navigate</a>)</p> <div class="code-block named"><span class=filename> App.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>actionBar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Master<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Open Modal<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">on:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{launchModal}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token language-javascript script">
<span class="token keyword">import</span> DetailPage <span class="token keyword">from</span> <span class="token string">'./DetailPage.svelte'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> showModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte-native'</span>
<span class="token keyword">function</span> <span class="token function">launchModal</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span> page<span class="token punctuation">:</span> DetailPage<span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg<span class="token punctuation">:</span> <span class="token string">'hi'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div><div class="code-block named"><span class=filename> DetailPage.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>detail-page-frame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frame</span><span class="token punctuation">></span></span></code></pre></div><p>The other options available correspond directly to those in <a href=https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_base_.showmodaloptions>ShowModalOptions</a> and are passed through to the underlying NativeScript showModal method.</p> <p>The <code>showModal</code> function returns a promise which resolves to whatever is passed to <code>closeModal</code></p> <blockquote> <p><strong>NOTE</strong> The modal is opened in a new navigation context. If you want to allow navigation within the modal, or show an action bar, you will need to wrap the target page in a <code>frame</code> element. If you don't need any navigation within the modal then this won't be necessary.</p> </blockquote> <h3> <span class=offset-anchor id=closemodal></span> <a href=guide#closemodal class=anchor aria-hidden=true></a> closeModal </h3><p>The <code>closeModal</code> function closes the current modal view and optionally returns a value to the caller of the original <code>showModal</code> via a promise result.</p> <div class="code-block named"><span class=filename> App.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>actionBar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Master<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Open Modal<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">on:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{launchModal}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{modalResult}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>stackLayout</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token language-javascript script">
<span class="token keyword">import</span> DetailPage <span class="token keyword">from</span> <span class="token string">'./DetailPage.svelte'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> showModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte-native'</span>
<span class="token keyword">let</span> modalResult <span class="token operator">=</span> <span class="token string">"Waiting for modal"</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">launchModal</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span> page<span class="token punctuation">:</span> DetailPage<span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> msg<span class="token punctuation">:</span> <span class="token string">'hi'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
modalResult <span class="token operator">=</span> <span class="token template-string"><span class="token string">`got result: </span><span class="token interpolation"><span class="token punctuation interpolation-punctuation">${</span>result<span class="token punctuation interpolation-punctuation">}</span></span><span class="token string">`</span></span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div><div class="code-block named"><span class=filename> DetailPage.svelte</span><pre class=language-markup><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>detail-page-frame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Close me<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">on:</span>tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ () => closeModal(<span class="token punctuation">'</span>hi from modal<span class="token punctuation">'</span>) }<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frame</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token language-javascript script">
<span class="token keyword">import</span> <span class="token punctuation">{</span> closeModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte-native'</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> </section><section class=svelte-1orywqh data-id=still-to-come> <h2 class=svelte-1orywqh> <span class=offset-anchor id=still-to-come></span> <a href=#still-to-come class=anchor aria-hidden></a> TODO... <small class=svelte-1orywqh> <a href=https://github.com/halfnelson/svelte-native/edit/master/docs_src/content/docs/99-still-to-come.md class=svelte-1orywqh title="edit this section"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#edit></use> </svg></a> </small> </h2> <p>This documentation is still a work-in-progress, like Svelte Native itself. If there are particular things that are missing or could be improved, then <a href=https://github.com/halfnelson/svelte-native>please raise an issue on GitHub</a>!</p> </section> </div> <aside class="svelte-1orywqh sidebar-container"> <div class="svelte-1orywqh sidebar"> <ul class="svelte-14g2kik guide-toc"> <li class=svelte-14g2kik> <a href=docs#important-note class="svelte-14g2kik section"> Important note </a> <a href=docs#this-is-a-community-project class="svelte-14g2kik subsection"> This is a community project </a> <li class=svelte-14g2kik> <a href=docs#introduction class="svelte-14g2kik section"> Introduction </a> <li class=svelte-14g2kik> <a href=docs#getting-started class="svelte-14g2kik section"> Getting Started </a> <a href=docs#quick-start class="svelte-14g2kik subsection"> Quick Start </a> <a href=docs#advanced-install class="svelte-14g2kik subsection"> Advanced Install </a> <li class=svelte-14g2kik> <a href=docs#routing class="svelte-14g2kik section"> Navigation/Routing </a> <a href=docs#navigate class="svelte-14g2kik subsection"> navigate </a> <a href=docs#goback class="svelte-14g2kik subsection"> goBack </a> <a href=docs#showmodal class="svelte-14g2kik subsection"> showModal </a> <a href=docs#closemodal class="svelte-14g2kik subsection"> closeModal </a> <li class=svelte-14g2kik> <a href=docs#still-to-come class="svelte-14g2kik section"> TODO... </a> </li> </ul> </div> <button class=svelte-1orywqh> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#menu></use> </svg> </button> </aside> </main> <footer class="svelte-hpyrv2 design-attribution"> Website design thanks to the Svelte project. </footer></div> <script>__SAPPER__={baseUrl:"",preloaded:[void 0,(function(a){return {sections:[{html:"\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"this-is-a-community-project\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#this-is-a-community-project\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tThis is a community project\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Cp\u003ESvelte Native is developed by members of the the Svelte community who wish to have the same smooth development experience on mobile devices as they have on the web. This project is not an officially supported product of either the NativeScript or Svelte projects.\u003C\u002Fp\u003E\n\u003Cp\u003EYet.\u003C\u002Fp\u003E\n",metadata:{title:"Important note"},subsections:[{slug:"this-is-a-community-project",title:"This is a community project"}],slug:"important-note",file:"0-important-note.md"},{html:"\u003Ch4\u003EWhat is NativeScript?\u003C\u002Fh4\u003E\u003Cp\u003E \u003Ca href=\"https:\u002F\u002Fwww.nativescript.org\u002F\"\u003ENativeScript\u003C\u002Fa\u003E is an open-source framework to develop apps on the Apple iOS and Android platforms. It is open source and can be found on \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnativescript\u002Fnativescript\"\u003Egithub\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch4\u003EWhat is Svelte?\u003C\u002Fh4\u003E\u003Cp\u003E\u003Ca href=\"https:\u002F\u002Fsvelte.technology\"\u003ESvelte\u003C\u002Fa\u003E is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.\u003C\u002Fp\u003E\n\u003Cp\u003EInstead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.\u003C\u002Fp\u003E\n\u003Ch4\u003EWhat is Svelte Native\u003C\u002Fh4\u003E\u003Cp\u003ESvelte Native is a tool for building mobile applications. It combines NativeScript's access to the native platform views and Svelte's fast and efficient view updates to allow you to build native mobile experiences using tools such as HTML, CSS and Javascript.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"\u002Fblog\u002Fsvelte-goes-native\"\u003ERead the introductory blog post\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cimg src=\"\u002Flogos_combined.svg\" alt=\"NativeScript + Svelte = Svelte Native\"\u003E\u003C\u002Fp\u003E\n",metadata:{title:"Introduction"},subsections:[],slug:"introduction",file:"00-introduction.md"},{html:"\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"quick-start\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#quick-start\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tQuick Start\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Ch4\u003EInstall Nativescript\u003C\u002Fh4\u003E\u003Cp\u003ESvelte-Native works on top of NativeScript. To install NativeScript:\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-bash'\u003E\u003Ccode\u003E$ \u003Cspan class=\"token function\"\u003Enpm\u003C\u002Fspan\u003E \u003Cspan class=\"token function\"\u003Einstall\u003C\u002Fspan\u003E -g nativescript\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ECheck it worked by running \u003Ccode\u003Etns\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cimg src=\"\u002Fmedia\u002Ftns-success.png\" alt=\"Success\"\u003E\u003C\u002Fp\u003E\n\u003Ch4\u003EInstall the NativeScript Playground app\u003C\u002Fh4\u003E\u003Cp\u003ESvelte-Native really is native, so it needs a mobile device to run. The build setup for iOS or Android can be a pain, so the wizards at Progress have created the NativeScript playground app. This allows us to run Svelte-Native application code without having to build the full mobile application.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"https:\u002F\u002Fitunes.apple.com\u002Fus\u002Fapp\u002Fnativescript-playground\u002Fid1263543946?mt=8&ls=1\"\u003E\u003Cimg src=\"\u002Fmedia\u002Fapp-store.png\" alt=\"Get if rom the App Store\"\u003E\u003C\u002Fa\u003E\n\u003Ca href=\"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=org.nativescript.play\"\u003E\u003Cimg src=\"\u002Fmedia\u002Fgoogle-play.png\" alt=\"Get it from Google Play\"\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch4\u003ECreate a new Svelte-Native app\u003C\u002Fh4\u003E\u003Cp\u003EThe easiest way to get started is to use the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhalfnelson\u002Fsvelte-native-template\"\u003Elatest template app\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-bash'\u003E\u003Ccode\u003E$ degit halfnelson\u002Fsvelte-native-template myapp\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EA fresh svelte-native app will be found in the \u003Ccode\u003Emyapp\u003C\u002Fcode\u003E folder\u003C\u002Fp\u003E\n\u003Ch4\u003ELaunch It\u003C\u002Fh4\u003E\u003Cp\u003ELaunch your app with:\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-bash'\u003E\u003Ccode\u003E$ \u003Cspan class=\"token function\"\u003Ecd\u003C\u002Fspan\u003E myapp\n$ tns preview --bundle\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EYou will need to scan the ascii art QR code using the "Playground" app you installed previously.\u003C\u002Fp\u003E\n\u003Cimg src=\"\u002Fmedia\u002Fquick-start-screenshot.png\" width=200 alt=\"Running App\" \u003E\n\n\n\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"advanced-install\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#advanced-install\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tAdvanced Install\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Cp\u003ETo compile your apps for distribution, you will need to use setup your system for local compilation.\u003C\u002Fp\u003E\n\u003Cp\u003ESvelte-Native runs on top of an unmodified NativeScript platform. Installation instructions for your operating system can be found in the \u003Ca href=\"https:\u002F\u002Fdocs.nativescript.org\u002Fstart\u002Fquick-setup\"\u003ENative Script Guide\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ECheck you have the NativeScript build environment configured correctly by using the Nativescript doctor command:\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-bash'\u003E\u003Ccode\u003E$ tns doctor\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EOnce that is happy you can do a full compile and launch of your application with\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-bash'\u003E\u003Ccode\u003E$ tns run android --bundle\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Eor\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-bash'\u003E\u003Ccode\u003E$ tns run ios --bundle\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E",metadata:{title:"Getting Started"},subsections:[{slug:"quick-start",title:"Quick Start"},{slug:"advanced-install",title:"Advanced Install"}],slug:"getting-started",file:"01-getting-started.md"},{html:"\u003Cp\u003ESince Svelte Native is a thin bridge between Svelte and NativeScript. It is best if you familiarize yourself with the core concept of \u003Ca href=\"https:\u002F\u002Fdocs.nativescript.org\u002Fcore-concepts\u002Fnavigation\"\u003Erouting in NativeScript\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ERouting in Svelte Native is designed to be very similar and the \u003Ccode\u003Esvelte-native\u003C\u002Fcode\u003E module exposes the following functions:\u003C\u002Fp\u003E\n\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"navigate\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#navigate\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tnavigate\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Cp\u003ESpecify the destination page with the mandatory \u003Ccode\u003Epage\u003C\u002Fcode\u003E option. This takes a \u003Ccode\u003ESvelte\u003C\u002Fcode\u003E component class.\u003C\u002Fp\u003E\n\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E App.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EactionBar\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EMaster\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Ebutton\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003ETo Details directly\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003E\u003Cspan class=\"token namespace\"\u003Eon:\u003C\u002Fspan\u003Etap\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{ () =\u003E navigate({ page: Detail }) }\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token script language-javascript\"\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E Detail \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'.\u002FDetail.svelte'\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E navigate \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'svelte-native'\u003C\u002Fspan\u003E\n\u003C\u002Fspan\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003EPassing props to the target component\u003C\u002Fh4\u003E\u003Cp\u003EYou can specify the props used to create the Svelte component using the \u003Ccode\u003Eprops\u003C\u002Fcode\u003E option.\u003C\u002Fp\u003E\n\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E App.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EactionBar\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EMaster\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Ebutton\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003ETo Details directly\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003E\u003Cspan class=\"token namespace\"\u003Eon:\u003C\u002Fspan\u003Etap\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{showDetailWithProps}\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token script language-javascript\"\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E Detail \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'.\u002FDetail.svelte'\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E navigate \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'svelte-native'\u003C\u002Fspan\u003E\n\n\t\u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function\"\u003EshowDetailWithProps\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n\t\t\u003Cspan class=\"token function\"\u003Enavigate\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E \n\t\t\tpage\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E Detail\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n\t\t\tprops\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E message\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E\"Hello from master\"\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\n\t\t\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fspan\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch4\u003ESpecifying a Frame\u003C\u002Fh4\u003E\u003Cp\u003EEach \u003Ccode\u003E<frame>\u003C\u002Fcode\u003E element has its own navigation stack. If you are using multiple frames, you may want to specify in which frame the navigation will occur. For example, having a button in the side bar that changes the page in the main area. You can do this by adding the \u003Ccode\u003Eframe\u003C\u002Fcode\u003E option:\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-javascript'\u003E\u003Ccode\u003E\u003Cspan class=\"token function\"\u003Enavigate\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E \n\tpage\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E Detail\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n\tframe\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'<id, or ref, or instance\u003E'\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EThe value for the \u003Ccode\u003Eframe\u003C\u002Fcode\u003E option can be one of the following:\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003Ethe \u003Ccode\u003Eid\u003C\u002Fcode\u003E of the \u003Ccode\u003E<frame>\u003C\u002Fcode\u003E component (for example: \u003Ccode\u003E<frame id="main-frame">\u003C\u002Fcode\u003E)\u003C\u002Fli\u003E\n\u003Cli\u003Ea reference to the \u003Ccode\u003E<frame>\u003C\u002Fcode\u003E (for example: \u003Ccode\u003E<frame bind:this="{mainFrame}">\u003C\u002Fcode\u003E)\u003C\u002Fli\u003E\n\u003Cli\u003Ea NativeScript \u003Ccode\u003EFrame\u003C\u002Fcode\u003E instance.\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp\u003EIf no frame is specified, the navigation will occur on the \u003Ca href=\"https:\u002F\u002Fdocs.nativescript.org\u002Fapi-reference\u002Fmodules\u002F_ui_frame_#topmost\"\u003Etopmost\u003C\u002Fa\u003E frame.\u003C\u002Fp\u003E\n\u003Ch4\u003EOther Options\u003C\u002Fh4\u003E\u003Cp\u003EFor more information about the options that you can pass, see \u003Ca href=\"https:\u002F\u002Fdocs.nativescript.org\u002Fapi-reference\u002Finterfaces\u002F_ui_frame_.navigationentry\"\u003ENavigationEntry\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\n\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"goback\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#goback\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tgoBack\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Cp\u003ETo navigate back to a previous page, use the \u003Ccode\u003EgoBack\u003C\u002Fcode\u003E function.\u003C\u002Fp\u003E\n\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E App.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EactionBar\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EDetail\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Ebutton\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EBack to Master\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003E\u003Cspan class=\"token namespace\"\u003Eon:\u003C\u002Fspan\u003Etap\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{goBack}\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token script language-javascript\"\u003E\n\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E goBack \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'svelte-native'\u003C\u002Fspan\u003E\n\u003C\u002Fspan\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003ETo cause the back to happen on another frame, pass in a frame reference or id to the \u003Ccode\u003Eframe\u003C\u002Fcode\u003E option.\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-javascript'\u003E\u003Ccode\u003E \u003Cspan class=\"token function\"\u003EgoBack\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003Eframe\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'sub-nav-frame'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Ccode\u003EgoBack\u003C\u002Fcode\u003E by default goes back to the previous page, you can go back multiple pages if you specify a \u003Ccode\u003Epage\u003C\u002Fcode\u003E reference in options.\u003C\u002Fp\u003E\n\u003Cdiv class='code-block'\u003E\u003Cpre class='language-javascript'\u003E\u003Ccode\u003E \u003Cspan class=\"token function\"\u003EgoBack\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003Eto\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E options_page_ref\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"showmodal\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#showmodal\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tshowModal\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Cp\u003ETo show a page or component modally use the \u003Ccode\u003EshowModal\u003C\u002Fcode\u003E function. Specify the page to open using the \u003Ccode\u003Epage\u003C\u002Fcode\u003E option and props using the \u003Ccode\u003Eprops\u003C\u002Fcode\u003E option (just like in \u003Ca href=\"#navigate\"\u003Enavigate\u003C\u002Fa\u003E)\u003C\u002Fp\u003E\n\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E App.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EactionBar\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EMaster\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Ebutton\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EOpen Modal\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003E\u003Cspan class=\"token namespace\"\u003Eon:\u003C\u002Fspan\u003Etap\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{launchModal}\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\n\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token script language-javascript\"\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E DetailPage \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'.\u002FDetailPage.svelte'\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E showModal \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'svelte-native'\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function\"\u003ElaunchModal\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n\t\t\u003Cspan class=\"token function\"\u003EshowModal\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E page\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E DetailPage\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E props\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E msg\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'hi'\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fspan\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E DetailPage.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Eframe\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003Edetail-page-frame\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Eframe\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EThe other options available correspond directly to those in \u003Ca href=\"https:\u002F\u002Fdocs.nativescript.org\u002Fapi-reference\u002Finterfaces\u002F_ui_core_view_base_.showmodaloptions\"\u003EShowModalOptions\u003C\u002Fa\u003E and are passed through to the underlying NativeScript showModal method.\u003C\u002Fp\u003E\n\u003Cp\u003EThe \u003Ccode\u003EshowModal\u003C\u002Fcode\u003E function returns a promise which resolves to whatever is passed to \u003Ccode\u003EcloseModal\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cblockquote\u003E\n\u003Cp\u003E\u003Cstrong\u003ENOTE\u003C\u002Fstrong\u003E The modal is opened in a new navigation context. If you want to allow navigation within the modal, or show an action bar, you will need to wrap the target page in a \u003Ccode\u003Eframe\u003C\u002Fcode\u003E element. If you don't need any navigation within the modal then this won't be necessary.\u003C\u002Fp\u003E\n\u003C\u002Fblockquote\u003E\n\n\t\t\t\t\t\t\u003Ch3\u003E\n\t\t\t\t\t\t\t\u003Cspan id=\"closemodal\" class=\"offset-anchor\"\u003E\u003C\u002Fspan\u003E\n\t\t\t\t\t\t\t\u003Ca href=\"guide#closemodal\" class=\"anchor\" aria-hidden=\"true\"\u003E\u003C\u002Fa\u003E\n\t\t\t\t\t\t\tcloseModal\n\t\t\t\t\t\t\u003C\u002Fh3\u003E\u003Cp\u003EThe \u003Ccode\u003EcloseModal\u003C\u002Fcode\u003E function closes the current modal view and optionally returns a value to the caller of the original \u003Ccode\u003EshowModal\u003C\u002Fcode\u003E via a promise result.\u003C\u002Fp\u003E\n\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E App.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EactionBar\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EMaster\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Ebutton\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EOpen Modal\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003E\u003Cspan class=\"token namespace\"\u003Eon:\u003C\u002Fspan\u003Etap\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{launchModal}\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Elabel\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{modalResult}\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003EstackLayout\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token script language-javascript\"\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E DetailPage \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'.\u002FDetailPage.svelte'\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E showModal \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'svelte-native'\u003C\u002Fspan\u003E\n\n\t\u003Cspan class=\"token keyword\"\u003Elet\u003C\u002Fspan\u003E modalResult \u003Cspan class=\"token operator\"\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E\"Waiting for modal\"\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token keyword\"\u003Easync\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function\"\u003ElaunchModal\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n\t\t\u003Cspan class=\"token keyword\"\u003Elet\u003C\u002Fspan\u003E result \u003Cspan class=\"token operator\"\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Eawait\u003C\u002Fspan\u003E \u003Cspan class=\"token function\"\u003EshowModal\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E page\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E DetailPage\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E props\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E msg\u003Cspan class=\"token punctuation\"\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'hi'\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n\t\tmodalResult \u003Cspan class=\"token operator\"\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\"token template-string\"\u003E\u003Cspan class=\"token string\"\u003E`got result: \u003C\u002Fspan\u003E\u003Cspan class=\"token interpolation\"\u003E\u003Cspan class=\"token interpolation-punctuation punctuation\"\u003E${\u003C\u002Fspan\u003Eresult\u003Cspan class=\"token interpolation-punctuation punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token string\"\u003E`\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fspan\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class='code-block named'\u003E\u003Cspan class='filename'\u003E DetailPage.svelte\u003C\u002Fspan\u003E\u003Cpre class='language-markup'\u003E\u003Ccode\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Eframe\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003Edetail-page-frame\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\t\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Ebutton\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003EClose me\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token attr-name\"\u003E\u003Cspan class=\"token namespace\"\u003Eon:\u003C\u002Fspan\u003Etap\u003C\u002Fspan\u003E\u003Cspan class=\"token attr-value\"\u003E\u003Cspan class=\"token punctuation\"\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E{ () =\u003E closeModal(\u003Cspan class=\"token punctuation\"\u003E'\u003C\u002Fspan\u003Ehi from modal\u003Cspan class=\"token punctuation\"\u003E'\u003C\u002Fspan\u003E) }\u003Cspan class=\"token punctuation\"\u003E\"\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E\u002F\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n \u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Epage\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Eframe\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\n\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token script language-javascript\"\u003E\n \u003Cspan class=\"token keyword\"\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E closeModal \u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"token string\"\u003E'svelte-native'\u003C\u002Fspan\u003E\n\u003C\u002Fspan\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token tag\"\u003E\u003Cspan class=\"token punctuation\"\u003E<\u002F\u003C\u002Fspan\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E",metadata:{title:"Navigation\u002FRouting"},subsections:[{slug:a,title:a},{slug:"goback",title:"goBack"},{slug:"showmodal",title:"showModal"},{slug:"closemodal",title:"closeModal"}],slug:"routing",file:"10-routing.md"},{html:"\u003Cp\u003EThis documentation is still a work-in-progress, like Svelte Native itself. If there are particular things that are missing or could be improved, then \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhalfnelson\u002Fsvelte-native\"\u003Eplease raise an issue on GitHub\u003C\u002Fa\u003E!\u003C\u002Fp\u003E\n",metadata:{title:"TODO..."},subsections:[],slug:"still-to-come",file:"99-still-to-come.md"}]}}("navigate"))]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/client/client.f6d186ec.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/client/shimport@0.0.14.js";s.setAttribute("data-main","/client/client.f6d186ec.js")}document.head.appendChild(s)</script>