svelte-native/docs/guide.json at v0.1.6 · hmmhmmhm/svelte-native

Repository navigation

[{"html":"\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\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>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.\nYet.\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> <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>\n<h4>What is Svelte?</h4><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.\nInstead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.\n<h4>What is Svelte Native</h4>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.\n<a href=\"/blog/svelte-g 8000 oes-native\">Read the introductory blog post</a>.\n<img src=\"/logos_combined.svg\" alt=\"NativeScript + Svelte = Svelte Native\">\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\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>Svelte-Native works on top of NativeScript. To install NativeScript:\n<div class='code-block'><pre class='language-bash'><code>$ npm install -g nativescript</code></pre></div>Check it worked by running <code>tns</code>\n<img src=\"/media/tns-success.png\" alt=\"Success\">\n<h4>Install the NativeScript Playground app</h4>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.\n<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>\n<h4>Create a new Svelte-Native app</h4>The easiest way to get started is to use the <a href=\"https://github.com/halfnelson/svelte-native-template\">latest template app</a>\n<div class='code-block'><pre class='language-bash'><code>$ degit halfnelson/svelte-native-template myapp</code></pre></div>A fresh svelte-native app will be found in the <code>myapp</code> folder\n<h4>Launch It</h4>Launch your app with:\n<div class='code-block'><pre class='language-bash'><code>$ cd myapp\n$ tns preview --bundle</code></pre></div>You will need to scan the ascii art QR code using the "Playground" app you installed previously.\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\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>To compile your apps for distribution, you will need to use setup your system for local compilation.\nSvelte-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>\nCheck you have the NativeScript build environment configured correctly by using the Nativescript doctor command:\n<div class='code-block'><pre class='language-bash'><code>$ tns doctor</code></pre></div>Once that is happy you can do a full compile and launch of your application with\n<div class='code-block'><pre class='language-bash'><code>$ tns run android --bundle</code></pre></div>or\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":"\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#the-goal\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tThe Goal\n\t\t\t\t\t\t</h3>Sometimes it can be easier to learn something if you have a goal to work towards. In this section we will build a Todo app with Svelte Native. It will have the following functionality:\n<ul>\n<li>Basic design<ul>\n<li>Two-tab layout</li>\n<li>One tab shows active tasks and lets you add new tasks</li>\n<li>Second tab lists completed tasks</li>\n</ul>\n</li>\n<li>Basic functionality<ul>\n<li>Add tasks: Users can add tasks as text</li>\n<li>View tasks: Newly added tasks are listed as active and can be tapped</li>\n<li>Complete tasks: Tapping an active task shows an action dialog with options</li>\n<li>Delete tasks: Tapping an active or completed task shows an action dialog with options</li>\n</ul>\n</li>\n<li>Advanced design<ul>\n<li>Input and button for adding tasks are styled</li>\n<li>Tabs are styled</li>\n<li>Active tasks are styled</li>\n<li>Completed tasks are styled</li>\n</ul>\n</li>\n</ul>\n<img src=\"/media/todoapp/nativescript-svelte-todo2.gif\" alt=\"TodoApp\">\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#prerequisites\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tPrerequisites\n\t\t\t\t\t\t</h3>Before you start, please ensure you have at least followed the <a href=\"#quick-start\">Quick Start Guide</a> and can get an application to run on your mobile device or emulator.\nThis guide assumes a existing familiarity with the Svelte framework. Run through <a href=\"https://v3.svelte.technology/tutorial\">Svelte's excellent tutorial</a> to get up to speed.\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#basic-design\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tBasic Design\n\t\t\t\t\t\t</h3>We will start our from a fresh app template:\n<div class='code-block'><pre class='language-bash'><code>$ degit halfnelson/svelte-native-template todoapp\n$ cd todoapp\n$ npm install</code></pre></div>Remove the default <code>.btn</code> rule from <code>app.css</code> and set the contents of App.svelte to:\n<div class='code-block named'> App.svelte<pre class='language-markup'><code><page class=\"page\">\n\t<actionBar title=\"My Tasks\" class=\"action-bar\" />\n\n\t<tabView height=\"100%\" androidTabsPosition=\"bottom\">\n\n\t <tabViewItem title=\"To Do\" textWrap=\"true\">\n\t\t<label>\n\t\t\tThis tab will list active tasks and will let users add new tasks.\n\t\t</label>\n\t </tabViewItem>\n\n\t <tabViewItem title=\"Completed\">\n\t\t<label text=\"This tab will list completed tasks for tracking.\" textWrap=\"true\" />\n\t </tabViewItem>\n\n\t</tabView>\n</page></code></pre></div><blockquote>\nNOTE Notice that all tags start with a lower case letter. This is different to other NativeScript implementations. The lower case letter lets the Svelte compiler know that these are NativeScript views and not Svelte components. Think of <code><page></code> and <code><actionBar></code> as just another set of application building blocks like <code><ul></code> and <code><div></code>.\n</blockquote>\n<h4>What's all that then?</h4>The <code><page></code> element is the top-level user interface element of every Svelte-Native app. All other user interface elements are nested within.\nThe <code><actionBar></code> element shows an action bar for the <code><page></code>. A <code><page></code> cannot contain more than one <code><actionBar></code>.\nTypically, after the <code><actionBar></code>, you will have navigation components (such as a drawer or a tab view) or layout components. These elements control the layout of your app and let you determine how to place other user interface elements inside.\nThe class names on <code>page</code> and <code>actionBar</code> are to help with styling, the default stylesheet includes a reference to the NativeScript core theme. More information on the core theme can be found in the <a href=\"https://docs.nativescript.org/ui/theme\">Nativescript Docs</a>\nThe <code><label></code> tags have been used differently. One has the <code>text=</code> attribute, while the other has the text between the opening and closing tags. Plain text between tags will be automatically assigned to the <code>text</code> attribute of the tag.\n<h4>Progress So Far</h4><img src=\"/media/todoapp/todo-basic-design-1.png\" alt=\"tab 1\" width=300> <img src=\"/media/todoapp/todo-basic-design-2.png\" alt=\"tab 2\" width=300>\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#basic-functionality-add-tasks\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tBasic Functionality: Add Tasks\n\t\t\t\t\t\t</h3>We have our basic design, lets allow the user to add some tasks.\nReplace the contents of the first <code><tabViewItem></code> with:\n<div class='code-block'><pre class='language-markup'><code><stackLayout orientation=\"vertical\" width=\"100%\" height=\"100%\">\n\t<gridLayout columns=\"2*,*\" rows=\"*\" width=\"100%\" height=\"25%\">\n\t\t\n\t\t<textField col=\"0\" row=\"0\" bind:text=\"{textFieldValue}\" hint=\"Type new task...\" editable=\"true\"\n\t\t\ton:returnPress=\"{onButtonTap}\" />\n\t\t<button col=\"1\" row=\"0\" text=\"Add task\" on:tap=\"{onButtonTap}\" />\n\t</gridLayout>\n\n\t<listView class=\"list-group\" items=\"{todos}\" on:itemTap=\"{onItemTap}\" style=\"height:75%\">\n\t\t<Template let:item>\n\t\t\t<label text=\"{item.name}\" class=\"list-group-item-heading\" textWrap=\"true\" />\n\t\t</Template>\n\t</listView>\n</stackLayout></code></pre></div>and to the bottom of the file add a script tag:\n<div class='code-block'><pre class='language-markup'><code><script>\n\timport { Template } from 'svelte-native/components'\n\n\tlet todos = []\n\tlet textFieldValue = \"\"\n\n\tfunction onItemTap(args) {\n\t console.log('Item with index: ' + args.index + ' tapped');\n\t}\n\n\tfunction onButtonTap() {\n\t if (textFieldValue === \"\") return; // Prevents users from entering an empty string.\n\t console.log(\"New task added: \" + textFieldValue + \".\"); // Logs the newly added task in the console for debugging.\n\t todos = [{ name: textFieldValue }, ...todos] // Adds tasks in the ToDo array. Newly added tasks are immediately shown on the screen.\n\t textFieldValue = \"\"; // Clears the text field so that users can start adding new tasks immediately.\n\t}\n</script></code></pre></div><h4>What did we just do?</h4>To allow the user to enter a todo item, we need to capture the name of the task. We did this by adding a <code><textField></code>. A <code><button></code> was added to submit the task and a <code><listView></code> to display the task.\nSince this functionality required adding 3 elements to the tabview, we use layouts to tell NativeScript where to place each item. <code><stackLayout></code> places items in a row either vertical or horizontal. We used it to place our input form above the <code><listView></code>. <code><gridView></code> is used to layout items in a predefined grid. It is used to place the <code><button></code> to the right and take up half the space of the <code><textInput></code>.\nThe <code><listView></code> contains a <code><Template></code> which is a Svelte component used to render each item. The template component needs to be imported just like all Svelte components.\nWhen <code>onButtonTap</code> callback is fired, the code we added to the script element, will build a new <code>todos</code> array including the added item, and clear the text field. The <code>onItemTap</code> callback will just log which list item index was tapped using <code>console.log</code> which works fine in NativeScript.\n<blockquote>\nNOTE <code><listView></code> will look for the first <code><Template></code> component in its children. The template component acts similar to a slot and will render its content for each item. This is exposed to the content as <code>item</code> via the <code>let:item</code> on the template element.\n</blockquote>\n<h4>Progress So Far</h4><img alt=\"We can add items\" src=\"/media/todoapp/todo-add-item.png\" width=350>\n\nIt isn't pretty, but it works!\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#basic-functionality-complete-delete-tasks\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tBasic functionality: Complete/Delete Tasks\n\t\t\t\t\t\t</h3>Nobody likes a todo list that only gets longer. We should add the ability to mark a task as complete, or to remove it if we added it by accident.\nAt the very top of the script tag, add this import\n<div class='code-block'><pre class='language-javascript'><code> import { action } from \"tns-core-modules/ui/dialogs\";</code></pre></div>Near the top of the script tag after the <code>let todos=[]</code> add another declaration <code>let dones=[]</code> so completed tasks have somewhere to go.\nThen replace our <code>onItemTap</code> function with this new one:\n<div class='code-block'><pre class='language-javascript'><code> function onItemTap(args) {\n\taction(\"What do you want to do with this task?\", \"Cancel\", [\n\t \"Mark completed\",\n\t \"Delete forever\"\n\t]).then(result => {\n\t console.log(result); // Logs the selected option for debugging.\n\t let item = todos[args.index];\n\t switch (result) {\n\t\tcase \"Mark completed\":\n\t\t dones = [item, ...dones]; // Places the tapped active task at the top of the completed tasks.\n\t\t todos = todos.filter(t => t != item); // Removes the tapped active task.\n\t\t break;\n\t\tcase \"Delete forever\":\n\t\t todos = todos.filter(t => t != item); // Removes the tapped active task.\n\t\t break;\n\t\tcase \"Cancel\" || undefined: // Dismisses the dialog\n\t\t break;\n\t }\n\t});\n }</code></pre></div><h4>Breaking it down</h4>Native script comes with a <code>dialogs</code> module that allows us to show small modal windows to obtain data from a user. We added an import to this module so that we could use the <code>action</code> method we added to the <code>onItemTap</code> method. When the user selects "Mark completed" we find the item using the <code>args.index</code> we get from the event, and remove the item from the <code>todos</code>, then we add the item to our new <code>dones</code> array. The delete command just removes the item from the <code>todos</code>.\n<blockquote>\nNOTE Notice that we reassign the <code>dones</code> and <code>todos</code> variables during delete or complete operations. Svelte's reactive variables work at the top level and cannot detect changes in an array. By assigning a new value to <code>dones</code> and <code>todos</code> we are ensuring that any template that depends on those variables will be updated.\n</blockquote>\n<h4>Progress So Far</h4><img alt=\"Popup In Action\" src=\"/media/todoapp/todo-mark-compete.png\" width=350>\n\n\n\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#basic-functionality-the-completed-tab\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tBasic functionality: The Completed Tab\n\t\t\t\t\t\t</h3>To get that sense of satisfaction from completing an item on your todo list, it would be good to be able to see the item on the completed tab. In this section we will add a listview to display the items and allow you to delete them or restore them to the todos using an action.\nFirst add the <code>listView</code> below to the second tab replacing the <code>label</code>\n<div class='code-block'><pre class='language-markup'><code><listView class=\"list-group\" items=\"{dones}\" on:itemTap=\"{onDoneTap}\">\n\t<Template let:item>\n\t\t<label text=\"{item.name}\" class=\"list-group-item-heading\" textWrap=\"true\" />\n\t</Template>\n</listView></code></pre></div>Then add the code for the onDoneTap to the script block:\n<div class='code-block'><pre class='language-javascript'><code>function onDoneTap(args) {\n action(\"What do you want to do with this task?\", \"Cancel\", [\n\t\"Mark To Do\",\n\t\"Delete forever\"\n ]).then(result => {\n\tconsole.log(result); // Logs the selected option for debugging.\n\tlet item = dones[args.index]\n\tswitch (result) {\n\t case \"Mark To Do\":\n\t\ttodos = [item, ...todos]; // Places the tapped active task at the top of the completed tasks.\n\t\tdones = dones.filter(t => t != item); // Removes the tapped active task.\n\t\tbreak;\n\t case \"Delete forever\":\n\t\tdones = dones.filter(t => t != item); // Removes the tapped active task.\n\t\tbreak;\n\t case \"Cancel\" || undefined: // Dismisses the dialog\n\t\tbreak;\n\t}\n });\n}</code></pre></div><h4>What we just did</h4>To display our done items we added the <code>listView</code> to the "completed" <code>tabViewItem</code> and bound it to the <code>dones</code> variable we defined in last step.\nWe added an event handler to handle taps on the "completed" items. This handler is very similar to the hander added in the last section, except that it works on the <code>dones</code> array and not the <code>todos</code>.\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#advanced-design-styled-input\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tAdvanced design: Styled input\n\t\t\t\t\t\t</h3>The basic functionality of the todo app is complete. But it isn't going to win any beauty contests. To delight our users we will take a few minutes to apply some styling. In this section we will style the text box and button elements.\nAt the bottom of <code>App.svelte</code> add the following style tag:\n<div class='code-block'><pre class='language-markup'><code><style>\n button { \n\t font-size: 15; \n\t font-weight: bold; \n\t color: white; \n\t background-color: #2847D2; \n\t height: 40;\n\t margin-top: 10; \n\t margin-bottom: 10; \n\t margin-right: 10; \n\t margin-left: 10; \n\t border-radius: 20px; \n }\n\n textField {\n\t font-size: 20;\n\t color: #2847D2;\n\t margin-top: 10;\n\t margin-bottom: 10;\n\t margin-right: 5;\n\t margin-left: 20;\n }\n</style></code></pre></div><h4>A style tag in a native application!?</h4>When you work with NativeScript and Svelte, you can use application-wide CSS, scoped CSS, or inline CSS to style your app. Application-wide CSS is applied first and is handled in <code>app.css</code> in the root of your project. This tutorial does not explore application-wide CSS. See also: <a href=\"https://docs.nativescript.org/ui/styling\">Styling</a>.\nScoped CSS is applied to the current component only and is handled in each component's <code><style></code> block. This tutorial relies almost exclusively on scoped CSS and inline CSS. See also: <a href=\"https://v3.svelte.technology/docs#scoped-styles\">Scoped Styles</a>.\nWith type selectors, you can select a UI component and apply styling to it. To select a type, use the component name as provided in the code. For example, to select the tab view, use <code>TabView</code>.\n<h4>Progress So Far</h4><img alt=\"style button\" src=\"/media/todoapp/todo-styled-button.png\" width=350>\n\n\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#advanced-design-styled-tabs\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tAdvanced design: Styled tabs\n\t\t\t\t\t\t</h3>The application is looking better, but we can do something about those tabs.\nAdd the <code>selectedTabTextColor</code> and <code>tabTextFontSize</code> property to the <code><TabView></code>.\n<div class='code-block'><pre class='language-markup'><code> <tabView& 8000 lt;/span> height=\"100%\" androidTabsPosition=\"bottom\" selectedTabTextColor=\"#2847D2\" tabTextFontSize=\"15\" ></code></pre></div>Apply the <code>textTransform</code> property to the separate tabs. You can use this property only on the <code><TabViewItem></code> level.\n<div class='code-block'><pre class='language-markup'><code> <tabViewItem title=\"To Do\" textTransform=\"uppercase\" ></code></pre></div><div class='code-block'><pre class='language-markup'><code> <tabViewItem title=\"Completed\" textTransform=\"uppercase\"></code></pre></div><h4>That is not CSS!</h4><code><TabView></code> provides some styling properties out of the box. You can apply a text transform to each tab title (<code>textTransform</code>) and change the font size and color globally (<code>tabTextFontSize</code>, <code>tabTextColor</code>, <code>selectedTabTextColor</code>). You can also change the background color of your tabs <code>tabBackgroundColor</code>.\n<blockquote>\nTIP Most css properties in NativeScript have a corresponding attribute you can apply directly to the element\n</blockquote>\n<h4>Progress So Far</h4><img alt=\"style button\" src=\"/media/todoapp/todo-styled-tabs.png\" width=350>\n\n\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<a href=\"guide#advanced-design-styled-lists\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tAdvanced design: Styled Lists\n\t\t\t\t\t\t</h3>The list items are a little bunched up. Lets add some padding to them, and make the active todo items coloured and the completed items crossed out.\nEdit the two <code><listView></code> tags and add the <code>separatorColor="transparent"</code> as an attribute:\n<div class='code-block'><pre class='language-markup'><code><listView class=\"list-group\" items=\"{todos}\" on:itemTap=\"{onItemTap}\" style=\"height:75%\" separatorColor=\"transparent\"></code></pre></div>and \n<div class='code-block'><pre class='language-markup'><code><listView class=\"list-group\" items=\"{dones}\" on:itemTap=\"{onDoneTap}\" separatorColor=\"transparent\"></code></pre></div>To the label in the <code>listView</code> for the <code>todos</code> add <code>todo-item active</code> to the class attribute\n<div class='code-block'><pre class='language-markup'><code> <label text=\"{item.name}\" class=\"list-group-item-heading todo-item active\" textWrap=\"true\" /></code></pre></div>to the dones label add <code>todo-item completed</code>\n<div class='code-block'><pre class='language-markup'><code> <label text=\"{item.name}\" class=\"list-group-item-heading todo-item completed\" textWrap=\"true\" /></code></pre></div>Add the following CSS rules to the <code>style</code> tag\n<div class='code-block'><pre class='language-css'><code>\n.todo-item {\n font-size: 20;\n margin-left: 20;\n padding-top: 5;\n padding-bottom: 10;\n}\n\n.todo-item.active {\n font-weight: bold;\n color: #2847D2;\n}\n\n.todo-item.completed {\n color: #d3d3d3;\n text-decoration: line-through;\n}\n</code></pre></div><h4>I see what you did there</h4>In NativeScript you aren't restricted to just using element names as CSS selectors. We added some classes to the labels and applied CSS rules to those classes.\nWe also applied a <code>separatorColor</code> attribute directly to <code>listView</code> to remove the lines between the items for a cleaner list.\n<h4>Our Finished Product</h4><img alt=\"todos\" src=\"/media/todoapp/todo-styled-list1.png\" width=350>\n<img alt=\"dones\" src=\"/media/todoapp/todo-styled-list2.png\" width=350>\n\n","metadata":{"title":"Your First App"},"subsections":[{"slug":"the-goal","title":"The Goal"},{"slug":"prerequisites","title":"Prerequisites"},{"slug":"basic-design","title":"Basic Design"},{"slug":"basic-functionality-add-tasks","title":"Basic Functionality: Add Tasks"},{"slug":"basic-functionality-complete-delete-tasks","title":"Basic functionality: Complete/Delete Tasks"},{"slug":"basic-functionality-the-completed-tab","title":"Basic functionality: The Completed Tab"},{"slug":"advanced-design-styled-input","title":"Advanced design: Styled input"},{"slug":"advanced-design-styled-tabs","title":"Advanced design: Styled tabs"},{"slug":"advanced-design-styled-lists","title":"Advanced design: Styled Lists"}],"slug":"todo-app-example","file":"05-todo-app-example.md"},{"html":"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>\nRouting in Svelte Native is designed to be very similar and the <code>svelte-native</code> module exposes the following functions:\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\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>Specify the destination page with the mandatory <code>page</code> option. This takes a <code>Svelte</code> component class.\n<div class='code-block'><pre class='language-markup'><code>\n<page>\n\t<actionBar title=\"Master\" />\n\t<stackLayout>\n\t\t<button text=\"To Details directly\" on:tap=\"{ () => navigate({ page: Detail }) }\" />\n\t</stackLayout>\n</page>\n\n<script>\n\timport Detail from './Detail.svelte'\n\timport { navigate } from 'svelte-native'\n</script></code></pre></div><h4>Passing props to the target component</h4>You can specify the props used to create the Svelte component using the <code>props</code> option.\n<div class='code-block'><pre class='language-markup'><code>\n<page>\n\t<actionBar title=\"Master\" />\n\t<stackLayout>\n\t\t<button text=\"To Details directly\" on:tap=\"{showDetailWithProps}\" />\n\t</stackLayout>\n</page>\n\n<script>\n\timport Detail from './Detail.svelte'\n\timport { navigate } from 'svelte-native'\n\n\tfunction showDetailWithProps() {\n\t\tnavigate({ \n\t\t\tpage: Detail,\n\t\t\tprops: { message: \"Hello from master\" }\n\t\t});\n\t}\n</script></code></pre></div><h4>Specifying a Frame</h4>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:\n<div class='code-block'><pre class='language-javascript'><code>navigate({ \n\tpage: Detail,\n\tframe: '<id, or ref, or instance>'\n});</code></pre></div>The value for the <code>frame</code> option can be one of the following:\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>\nIf 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.\n<h4>Other Options</h4>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>.\n\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\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>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\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>","metadata":{"title":"Navigation/Routing"},"subsections":[{"slug":"navigate","title":"navigate"},{"slug":"goback","title":"goBack"},{"slug":"showmodal","title":"showModal"}],"slug":"routing","file":"10-routing.md"},{"html":"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>!\n","metadata":{"title":"TODO..."},"subsections":[],"slug":"still-to-come","file":"99-still-to-come.md"}]

FilesExpand file tree

guide.json

Latest commit

History

guide.json

File metadata and controls