forked from halfnelson/svelte-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.json
More file actions
1 lines (1 loc) · 30.7 KB
/
Copy pathdocs.json
File metadata and controls
1 lines (1 loc) · 30.7 KB
1
[{"html":"\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"this-is-a-community-project\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#this-is-a-community-project\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tThis is a community project\n\t\t\t\t\t\t</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>\n<p>Yet.</p>\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":"<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>\n<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>\n<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>\n<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>\n<p><a href=\"/blog/svelte-goes-native\">Read the introductory blog post</a>.</p>\n<p><img src=\"/logos_combined.svg\" alt=\"NativeScript + Svelte = Svelte Native\"></p>\n","metadata":{"title":"Introduction"},"subsections":[],"slug":"introduction","file":"00-introduction.md"},{"html":"\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"quick-start\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#quick-start\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tQuick Start\n\t\t\t\t\t\t</h3><h4>Install Nativescript</h4><p>Svelte-Native works on top of NativeScript. To install NativeScript:</p>\n<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>\n<p><img src=\"/media/tns-success.png\" alt=\"Success\"></p>\n<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>\n<p><a href=\"https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1\"><img src=\"/media/app-store.png\" alt=\"Get if rom the App Store\"></a>\n<a href=\"https://play.google.com/store/apps/details?id=org.nativescript.play\"><img src=\"/media/google-play.png\" alt=\"Get it from Google Play\"></a></p>\n<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>\n<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>\n<h4>Launch It</h4><p>Launch your app with:</p>\n<div class='code-block'><pre class='language-bash'><code>$ <span class=\"token function\">cd</span> myapp\n$ 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>\n<img src=\"/media/quick-start-screenshot.png\" width=200 alt=\"Running App\" >\n\n\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"advanced-install\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#advanced-install\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tAdvanced Install\n\t\t\t\t\t\t</h3><p>To compile your apps for distribution, you will need to use setup your system for local compilation.</p>\n<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>\n<p>Check you have the NativeScript build environment configured correctly by using the Nativescript doctor command:</p>\n<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>\n<div class='code-block'><pre class='language-bash'><code>$ tns run android --bundle</code></pre></div><p>or</p>\n<div class='code-block'><pre class='language-bash'><code>$ tns run ios --bundle</code></pre></div>","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":"<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>\n<p>Routing in Svelte Native is designed to be very similar and the <code>svelte-native</code> module exposes the following functions:</p>\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"navigate\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#navigate\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tnavigate\n\t\t\t\t\t\t</h3><p>Specify the destination page with the mandatory <code>page</code> option. This takes a <code>Svelte</code> component class.</p>\n<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>\n\t<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>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n\t\t<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>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\n\t<span class=\"token keyword\">import</span> Detail <span class=\"token keyword\">from</span> <span class=\"token string\">'./Detail.svelte'</span>\n\t<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>\n</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>\n<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>\n\t<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>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n\t\t<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>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\n\t<span class=\"token keyword\">import</span> Detail <span class=\"token keyword\">from</span> <span class=\"token string\">'./Detail.svelte'</span>\n\t<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>\n\n\t<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>\n\t\t<span class=\"token function\">navigate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> \n\t\t\tpage<span class=\"token punctuation\">:</span> Detail<span class=\"token punctuation\">,</span>\n\t\t\tprops<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>\n\t\t<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t<span class=\"token punctuation\">}</span>\n</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>\n<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> \n\tpage<span class=\"token punctuation\">:</span> Detail<span class=\"token punctuation\">,</span>\n\tframe<span class=\"token punctuation\">:</span> <span class=\"token string\">'<id, or ref, or instance>'</span>\n<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>\n<ul>\n<li>the <code>id</code> of the <code><frame></code> component (for example: <code><frame id="main-frame"></code>)</li>\n<li>a reference to the <code><frame></code> (for example: <code><frame bind:this="{mainFrame}"></code>)</li>\n<li>a NativeScript <code>Frame</code> instance.</li>\n</ul>\n<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>\n<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>\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"goback\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#goback\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tgoBack\n\t\t\t\t\t\t</h3><p>To navigate back to a previous page, use the <code>goBack</code> function.</p>\n<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>\n <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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n\t<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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\n<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>\n</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>\n<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>\n<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>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"showmodal\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#showmodal\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tshowModal\n\t\t\t\t\t\t</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>\n<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>\n <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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n\t <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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\n\t<span class=\"token keyword\">import</span> DetailPage <span class=\"token keyword\">from</span> <span class=\"token string\">'./DetailPage.svelte'</span>\n\t<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>\n\t<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>\n\t\t<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>\n\t<span class=\"token punctuation\">}</span>\n</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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>page</span><span class=\"token punctuation\">></span></span>\n\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n<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>\n<p>The <code>showModal</code> function returns a promise which resolves to whatever is passed to <code>closeModal</code></p>\n<blockquote>\n<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>\n</blockquote>\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t<span id=\"closemodal\" class=\"offset-anchor\"></span>\n\t\t\t\t\t\t\t<a href=\"guide#closemodal\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tcloseModal\n\t\t\t\t\t\t</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>\n<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>\n <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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n\t <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>\n\t <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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>stackLayout</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\n\t<span class=\"token keyword\">import</span> DetailPage <span class=\"token keyword\">from</span> <span class=\"token string\">'./DetailPage.svelte'</span>\n\t<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>\n\n\t<span class=\"token keyword\">let</span> modalResult <span class=\"token operator\">=</span> <span class=\"token string\">\"Waiting for modal\"</span>\n\t<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>\n\t\t<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>\n\t\tmodalResult <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token string\">`got result: </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>result<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">`</span></span>\n\t<span class=\"token punctuation\">}</span>\n</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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>page</span><span class=\"token punctuation\">></span></span>\n\t<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>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>page</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>frame</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script language-javascript\">\n <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>\n</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>","metadata":{"title":"Navigation/Routing"},"subsections":[{"slug":"navigate","title":"navigate"},{"slug":"goback","title":"goBack"},{"slug":"showmodal","title":"showModal"},{"slug":"closemodal","title":"closeModal"}],"slug":"routing","file":"10-routing.md"},{"html":"<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>\n","metadata":{"title":"TODO..."},"subsections":[],"slug":"still-to-come","file":"99-still-to-come.md"}]