svelte-native/docs/docs.json at livereload · 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=\"docs#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-goes-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=\"docs#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=\"docs#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":"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=\"docs#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 named'> App.svelte<pre class='language-markup'><code><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 named'> App.svelte<pre class='language-markup'><code><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=\"docs#goback\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tgoBack\n\t\t\t\t\t\t</h3>To navigate back to a previous page, use the <code>goBack</code> function.\n<div class='code-block named'> App.svelte<pre class='language-markup'><code><page>\n <actionBar title=\"Detail\"/>\n <stackLayout>\n\t<button text=\"Back to Master\" on:tap=\"{goBack}\" />\n </stackLayout>\n</page>\n\n<script>\nimport { goBack } from 'svelte-native'\n</script></code></pre></div>To cause the back to happen on another frame, pass in a frame reference or id to the <code>frame</code> option.\n<div class='code-block'><pre class='language-javascript'><code> goBack({frame: 'sub-nav-frame'})</code></pre></div><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.\n<div class='code-block'><pre class='language-javascript'><code> goBack({to: options_page_ref})</code></pre></div>\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=\"docs#showmodal\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tshowModal\n\t\t\t\t\t\t</h3>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>)\n<div class='code-block named'> App.svelte<pre class='language-markup'><code><page>\n <actionBar title=\"Master\" />\n <stackLayout>\n\t <button text=\"Open Modal\" on:tap=\"{launchModal}\" />\n </stackLayout>\n</page>\n\n\n<script>\n\timport DetailPage from './DetailPage.svelte'\n\timport { showModal } from 'svelte-native'\n\tfunction launchModal() {\n\t\tshowModal({ page: DetailPage, props: { msg: 'hi' } })\n\t}\n</script></code></pre></div><div class='code-block named'> DetailPage.svelte<pre class='language-markup'><code><frame id=\"detail-page-frame\">\n <page>\n\n </page>\n</frame></code></pre></div>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.\nThe <code>showModal</code> function returns a promise which resolves to whatever is passed to <code>closeModal</code>\n<blockquote>\nNOTE 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.\n</blockquote>\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=\"docs#closemodal\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tcloseModal\n\t\t\t\t\t\t</h3>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.\n<div class='code-block named'> App.svelte<pre class='language-markup'><code><page>\n <actionBar title=\"Master\" />\n <stackLayout>\n\t <button text=\"Open Modal\" on:tap=\"{launchModal}\" />\n\t <label text=\"{modalResult}\" />\n </stackLayout>\n</page>\n<script>\n\timport DetailPage from './DetailPage.svelte'\n\timport { showModal } from 'svelte-native'\n\n\tlet modalResult = \"Waiting for modal\"\n\tasync function launchModal() {\n\t\tlet result = await showModal({ page: DetailPage, props: { msg: 'hi' } })\n\t\tmodalResult = `got result: ${result}`\n\t}\n</script></code></pre></div><div class='code-block named'> DetailPage.svelte<pre class='language-markup'><code><frame id=\"detail-page-frame\">\n <page>\n\t<button text=\"Close me\" on:tap=\"{ () => closeModal('hi from modal') }\" />\n </page>\n</frame>\n<script>\n import { closeModal } from 'svelte-native'\n</script></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":"\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=\"docs#template-component\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tTemplate Component\n\t\t\t\t\t\t</h3>The <code><Template></code> svelte component lets you define markup that is reused as a template. It is currently used to render listItems in the <code><listView></code> component.\n<h4>Basic usage</h4><div class='code-block'><pre class='language-markup'><code><page>\n <listView items=\"{items}\">\n\t<Template let:item={i}>\n\t <label text=\"{i}\" />\n\t</Template>\n </listView>\n</page>\n<script>\n import { Template } from 'svelte-native/components'\n let items = ['one', 'two', 'three']\n</script></code></pre></div><blockquote>\nNOTE The template element here has a capital <code>T</code> and is imported from <code>svelte-native/components</code>. This is because it is a Svelte component not a NativeScript element.\n</blockquote>\n<h4>Advanced usage</h4>You can use <code>Template</code> to implement custom NativeScript elements that require a template or multiple templates.\nWhen <code>Template</code> is rendered by svelte, it outputs a special DOM element called <code>template</code> which has a <code>component</code> attribute. Implementations such as svelte native's binding to <code>listView</code> look for the <code>template</code> elements and use the component to instantiate and render the template content.\nAny extra properties added to the <code>Template</code> component are passed down and added to the <code>template</code> DOM element.\nFor concrete example of this pattern see svelte native's <a href=\"https://github.com/halfnelson/svelte-native/blob/master/src/dom/native/ListViewElement.ts#L50\">listView element source</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=\"docs#property-element\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tProperty Element\n\t\t\t\t\t\t</h3>Some NativeScript controls have properties that expect NativeScript views as values. To make this possible using markup, Svelte Native introduces the property element. This element works like the ones in the NativeScript core documentation and set some property of their parent view with the value of the first child of the property element. The tag name is the name of the parent element followed by the property name. For example <code><page.actionbar></code> would set the <code>actionbar</code> property of the parent <code>page</code> element.\n<h4>An Example</h4>The <code><radSideDrawer></code> component is part of the <a href=\"https://docs.nativescript.org/ui/professional-ui-components/SideDrawer/getting-started\">Progress NativeScript UI</a> package.\nThe <code><radSideDrawer></code> component requires the <code>drawerContent</code> and <code>mainContent</code> properties to be set to <code>View</code> instances. Using Property Elements, you can do this with a few lines of code:\n<div class='code-block'><pre class='language-markup'><code><radSideDrawer>\n <radSideDrawer.drawerContent>\n\t<stackLayout />\n </radSideDrawer.drawerContent>\n <radSideDrawer.mainContent>\n\t<stackLayout />\n </radSideDrawer.mainContent>\n</radSideDrawer></code></pre></div>Without the Property Elements, you need to go a more tedious and error-prone route:\n<div class='code-block'><pre class='language-markup'><code><radSideDrawer bind:this=\"{drawer}\">\n <stackLayout bind:this=\"{drawerContent}\" />\n <stackLayout bind:this=\"{mainContent}\" />\n</radSideDrawer></code></pre></div><div class='code-block'><pre class='language-javascript'><code> import { onMount } from 'svelte'\n\n let drawer\n let drawerContent\n let mainContent\n\n onMount(() => {\n\tdrawer.nativeView.mainContent = mainContent.nativeView\n\tdrawer.nativeView.drawerContent = drawerContent.nativeView\n })</code></pre></div>","metadata":{"title":"Utilities"},"subsections":[{"slug":"template-component","title":"Template Component"},{"slug":"property-element","title":"Property Element"}],"slug":"utilities","file":"20-utilities.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=\"docs#absolutelayout\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tAbsoluteLayout\n\t\t\t\t\t\t</h3>The <code><absoluteLayout></code> container is the simplest layout container in NativeScript. \n<code><absoluteLayout></code> has the following behavior:\n<ul>\n<li>Uses a pair of absolute left/top coordinates to position its children.</li>\n<li>Doesn't enforce any layout constraints on its children.</li>\n<li>Doesn't resize its children at runtime when its size changes.</li>\n</ul>\n<h4>Examples</h4><h4>A grid-like layout</h4>The following example creates a simple grid. For more information about creating grid layouts, see <a href=\"/docs#GridLayout\">GridLayout</a>.\n<div class='code-block'><pre class='language-markup'><code><absoluteLayout backgroundColor=\"#3c495e\">\n <label text=\"10,10\" left=\"10\" top=\"10\" width=\"100\" height=\"100\" backgroundColor=\"#4383b8\"/>\n <label text=\"120,10\" left=\"120\" top=\"10\" width=\"100\" height=\"100\" backgroundColor=\"#4383b8\"/>\n <label text=\"10,120\" left=\"10\" top=\"120\" width=\"100\" height=\"100\" backgroundColor=\"#4383b8\"/>\n <label text=\"120,120\" left=\"120\" top=\"120\" width=\"100\" height=\"100\" backgroundColor=\"#4383b8\"/>\n</absoluteLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/absolute_layout_grid.svg\" />\n\n<h4>Overlapping elements</h4>The following example creates a group of overlapping items.\n<div class='code-block'><pre class='language-markup'><code><absoluteLayout backgroundColor=\"#3c495e\">\n <label text=\"10,10\" left=\"10\" top=\"10\" width=\"100\" height=\"100\" backgroundColor=\"#286290\"/>\n <label text=\"30,40\" left=\"30\" top=\"40\" width=\"100\" height=\"100\" backgroundColor=\"#4383b8\"/>\n</absoluteLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/absolute_layout_overlap.svg\" />\n\n<h4>Additional children props</h4>When an element is a direct child of <code><absoluteLayout></code>, you can work with the following additional properties.\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>top</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the distance, in pixels, between the top edge of the child and the top edge of its parent.</td>\n</tr>\n<tr>\n<td><code>left</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the distance, in pixels, between the left edge of the child and the left edge of its parent.</td>\n</tr>\n</tbody></table>\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=\"docs#docklayout\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tDockLayout\n\t\t\t\t\t\t</h3><code><DockLayout></code> is a layout container that lets you dock child elements to the sides or the center of the layout.\n<code><DockLayout></code> has the following behavior:\n<ul>\n<li>Uses the <code>dock</code> property to dock its children to the <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> or center of the layout. To dock a child element to the center, it must be the last child of the container and you must set the <code>stretchLastChild</code> property of the parent to <code>true</code>.</li>\n<li>Enforces layout constraints to its children.</li>\n<li>Resizes its children at runtime when its size changes.</li>\n</ul>\n<h4>Examples</h4><h4>Dock to every side without stretching the last child</h4>The following example creates a frame-like layout consisting of 4 elements, position at the 4 edges of the screen.\n<div class='code-block'><pre class='language-markup'><code><dockLayout stretchLastChild=\"false\" backgroundColor=\"#3c495e\">\n <label text=\"left\" dock=\"left\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"top\" dock=\"top\" height=\"40\" backgroundColor=\"#286290\"/>\n <label text=\"right\" dock=\"right\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"bottom\" dock=\"bottom\" height=\"40\" backgroundColor=\"#286290\"/>\n</dockLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/dock_layout_no_stretch.svg\" />\n\n<h4>Dock to every side and stretch the last child</h4>The following example shows how <code>stretchLastChild</code> affects the positioning of child elements in a <code>DockLayout</code> container. The last child (<code>bottom</code>) is stretched to take up all the remaining space after positioning the first three elements.\n<div class='code-block'><pre class='language-markup'><code><dockLayout stretchLastChild=\"true\" backgroundColor=\"#3c495e\">\n <label text=\"left\" dock=\"left\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"top\" dock=\"top\" height=\"40\" backgroundColor=\"#286290\"/>\n <label text=\"right\" dock=\"right\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"bottom\" dock=\"bottom\" backgroundColor=\"#1c486b\"/>\n</dockLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/dock_layout_stretch.svg\" />\n\n<h4>Dock to every side and the center</h4>The following example creates a <code><dockLayout></code> of 5 elements. The first four wrap the center element in a frame. \n<div class='code-block'><pre class='language-markup'><code><dockLayout stretchLastChild=\"true\" backgroundColor=\"#3c495e\">\n <label text=\"left\" dock=\"left\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"top\" dock=\"top\" height=\"40\" backgroundColor=\"#286290\"/>\n <label text=\"right\" dock=\"right\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"bottom\" dock=\"bottom\" height=\"40\" backgroundColor=\"#286290\"/>\n <label text=\"center\" backgroundColor=\"#1c486b\" />\n</dockLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/dock_layout_all_sides_and_stretch.svg\" />\n\n<h4>Dock multiple children to the same side</h4>The following example creates a single line of 4 elements that stretch across the entire height and width of the screen.\n<div class='code-block'><pre class='language-markup'><code><dockLayout stretchLastChild=\"true\" backgroundColor=\"#3c495e\">\n <label text=\"left 1\" dock=\"left\" width=\"40\" backgroundColor=\"#4383b8\"/>\n <label text=\"left 2\" dock=\"left\" width=\"40\" backgroundColor=\"#286290\"/>\n <label text=\"left 3\" dock=\"left\" width=\"40\" backgroundColor=\"#1c486b\"/>\n <label text=\"last child\" backgroundColor=\"#4383b8\"/>\n</dockLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/dock_layout_multiple_on_same_side.svg\" />\n\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>stretchLastChild</code></td>\n<td><code>Boolean</code></td>\n<td>Enables or disables stretching the last child to fit the remaining space.</td>\n</tr>\n</tbody></table>\n<h4>Additional children props</h4>When an element is a direct child of <code><DockLayout></code>, you can work with the following additional properties.\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>dock</code></td>\n<td><code>String</code></td>\n<td>Specifies which side to dock the element to. Valid values: <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code>.</td>\n</tr>\n</tbody></table>\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=\"docs#flexboxlayout\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tFlexboxLayout\n\t\t\t\t\t\t</h3><code><FlexboxLayout></code> is a layout container that provides a non-exact implementation of the <a href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox\">CSS Flexbox layout</a>. This layout lets you arrange child components both horizontally and vertically.\n<h4>Examples</h4><h4>Default flex layout</h4>The following example creates a row of three equally-sized elements that span across the entire height of the screen.\n<div class='code-block'><pre class='language-markup'><code><flexboxLayout backgroundColor=\"#3c495e\">\n <label text=\"first\" width=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" width=\"70\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" width=\"70\" backgroundColor=\"#286290\"/>\n</flexboxLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/flexbox_layout_row_stretch.svg\" />\n\n<h4>Column flex layout</h4>The following example creates a column of three equally-sized elements that span across the entire width of the screen.\n<div class='code-block'><pre class='language-markup'><code><flexboxLayout flexDirection=\"column\" backgroundColor=\"#3c495e\">\n <label text=\"first\" height=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" height=\"70\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" height=\"70\" backgroundColor=\"#286290\"/>\n</flexboxLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/flexbox_layout_column_stretch.svg\" />\n\n<h4>Row flex layout with items aligned to <code>flex-start</code></h4>The following example creates a row of three items placed at the top of the screen. Items are placed in the order they were declared in.\n<div class='code-block'><pre class='language-markup'><code><flexboxLayout alignItems=\"flex-start\" backgroundColor=\"#3c495e\">\n <label text=\"first\" width=\"70\" height=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" width=\"70\" height=\"70\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" width=\"70\" height=\"70\" backgroundColor=\"#286290\"/>\n</flexboxLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/flexbox_layout_row_flex-start.svg\" />\n\n<h4>Row flex layout with custom order</h4>The following example creates a row of three items placed at the top of the screen. Items are placed in a customized order.\n<div class='code-block'><pre class='language-markup'><code><flexboxLayout alignItems=\"flex-start\" backgroundColor=\"#3c495e\">\n <label text=\"first\" order=\"2\" width=\"70\" height=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" order=\"3\" width=\"70\" height=\"70\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" order=\"1\" width=\"70\" height=\"70\" backgroundColor=\"#286290\"/>\n</flexboxLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/flexbox_layout_row_custom_order.svg\" />\n\n<h4>Row flex layout with wrapping</h4>The following example creates four items with enabled line wrapping. When the row runs out of space, the container wraps the last item on a new line.\n<div class='code-block'><pre class='language-markup'><code><flexboxLayout flexWrap=\"wrap\" backgroundColor=\"#3c495e\">\n <label text=\"first\" width=\"30%\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" width=\"30%\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" width=\"30%\" backgroundColor=\"#286290\"/>\n <label text=\"fourth\" width=\"30%\" backgroundColor=\"#286290\"/>\n</flexboxLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/flexbox_layout_wrap.svg\" />\n\n<h4>Column flex layout with reverse order and items with a different <code>alignSelf</code></h4>The following example shows how to use:\n<ul>\n<li><code>flexDirection</code> to place items in a column, starting from the bottom.</li>\n<li><code>justifyContent</code> to create equal spacing between the vertically placed items.</li>\n<li><code>alignSelf</code> to modify the position of items across the main axis.</li>\n</ul>\n<div class='code-block'><pre class='language-markup'><code><flexboxLayout flexDirection=\"column-reverse\"\n\t\t\t justifyContent=\"space-around\" backgroundColor=\"#3c495e\">\n <label text=\"first\" height=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" alignSelf=\"center\" width=\"70\" height=\"70\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\\nflex-end\" alignSelf=\"flex-end\" width=\"70\" height=\"70\" backgroundColor=\"#286290\"/>\n <label text=\"fourth\" height=\"70\" backgroundColor=\"#286290\"/>\n</flexboxLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/flexbox_layout_column_reverse_space_around_align_self.svg\" />\n\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>flexDirection</code></td>\n<td><code>String</code></td>\n<td>Sets the direction for placing child elements in the flexbox container. Valid values: <code>row</code> (horizontal, left to right), <code>row-reverse</code> (horizontal, right to left), <code>column</code> (vertical, top to bottom), and <code>column-reverse</code> (vertical, bottom to top). Default value: <code>row</code>.</td>\n</tr>\n<tr>\n<td><code>flexWrap</code></td>\n<td><code>String</code></td>\n<td>Sets whether child elements are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in. Valid values: <code>nowrap</code> (single line which may cause the container to overflow), <code>wrap</code> (multiple lines, direction is defined by <code>flexDirection</code>),and <code>wrap-reverse</code> (multiple lines, opposite to the direction defined by <code>flexDirection</code>). Default value: <code>nowrap</code>.</td>\n</tr>\n<tr>\n<td><code>justifyContent</code></td>\n<td><code>String</code></td>\n<td>Sets the alignment of child elements along the main axis. You can use it to distribute leftover space when all the child elements on a line are inflexible or are flexible but have reached their maximum size. You can also use it to control the alignment of items when they overflow the line. Valid values: <code>flex-start</code> (items are packed toward the start line), <code>flex-end</code> (items are packed toward the end line), <code>center</code> (items are centered along the line), <code>space-between</code> (items are evenly distributed on the line; first item is on the start line, last item on the end line), and <code>space-around</code> (items are evenly distributed on the line with equal space around them). Default value: <code>flex-start</code>.</td>\n</tr>\n<tr>\n<td><code>alignItems</code></td>\n<td><code>String</code></td>\n<td>(Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as <code>justifyContent</code> for the cross axis. Valid values: <code>flex-start</code> (cross-start margin edge of the items is placed on the cross-start line), <code>flex-end</code> (cross-end margin edge of the items is placed on the cross-end line), <code>center</code> (items are centered оn the cross axis), <code>baseline</code> (the item baselines are aligned), and <code>stretch</code> (items are stretched to fill the container but respect <code>min-width</code> and <code>max-width</code>). Default value: <code>stretch</code>.</td>\n</tr>\n<tr>\n<td><code>alignContent</code></td>\n<td><code>String</code></td>\n<td>Sets how lines are aligned in the flex container on the cross axis, similar to how <code>justifyContent</code> aligns individual items within the main axis. This property has no effect when the flex container has only one line. Valid values: <code>flex-start</code> (lines are packed to the start of the container), <code>flex-end</code> (lines are packed to the end of the container), <code>center</code> (lines are packed to the center of the container), <code>space-between</code> (lines are evenly distributed; the first line is at the start of the container while the last one is at the end), <code>space-around</code> (lines are evenly distributed with equal space between them), and <code>stretch</code> (lines are stretched to take up the remaining space). Default value: <code>stretch</code>.</td>\n</tr>\n</tbody></table>\n<h4>Additional children props</h4>When an element is a direct child of <code><FlexboxLayout></code>, you can work with the following additional properties.\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>order</code></td>\n<td><code>Number</code></td>\n<td>Sets the order in which child element appear in relation to one another.</td>\n</tr>\n<tr>\n<td><code>flexGrow</code></td>\n<td><code>Number</code></td>\n<td>Indicates that the child should grow in size, if necessary. Sets how much the child will grow in proportion to the rest of the child elements in the flex container.</td>\n</tr>\n<tr>\n<td><code>flexShrink</code></td>\n<td><code>Number</code></td>\n<td>Indicates that the child should shrink when the row runs out of space. Sets how much the flex item will shrink in proportion to the rest of the child elements in the flex container. When not specified, its value is set to <code>1</code>.</td>\n</tr>\n<tr>\n<td><code>alignSelf</code></td>\n<td><code>String</code></td>\n<td>(Android-only) Overrides the <code>alignItems</code> value for the child. Valid values: <code>flex-start</code> (cross-start margin edge of the item is placed on the cross-start line), <code>flex-end</code> (cross-end margin edge of the item is placed on the cross-end line), <code>center</code> (item is centered on the cross axis), <code>baseline</code> (the item baselines are aligned), and <code>stretch</code> (items is stretched to fill the container but respects <code>min-width</code> and <code>max-width</code>). Default value: <code>stretch</code>.</td>\n</tr>\n<tr>\n<td><code>flexWrapBefore</code></td>\n<td><code>Boolean</code></td>\n<td>When <code>true</code>, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification. Default value: <code>false</code>.</td>\n</tr>\n</tbody></table>\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=\"docs#gridlayout\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tGridLayout\n\t\t\t\t\t\t</h3><code><GridLayout></code> is a layout container that lets you arrange its child elements in a table-like manner. \nThe grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other. \nBy default, <code><GridLayout></code> has one column and one row. You can add columns and rows by configuring the <code>columns</code> and the <code>rows</code> properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma.\nYou can set a fixed size for column width and row height or you can create them in a responsive manner:\n<ul>\n<li>An absolute number: Indicates a fixed size.</li>\n<li>auto: Makes the column as wide as its widest child or makes the row as tall as its tallest child.</li>\n<li>*: Takes as much space as available after filling all auto and fixed size columns or rows.</li>\n</ul>\n<h4>Examples</h4><h4>Grid layout with fixed sizing</h4>The following example creates a simple 2-by-2 grid with fixed column widths and row heights.\n<div class='code-block'><pre class='language-markup'><code><gridLayout columns=\"115, 115\" rows=\"115, 115\">\n <label text=\"0,0\" row=\"0\" col=\"0\" backgroundColor=\"#4383b8\"/>\n <label text=\"0,1\" 10BC8 row=\"0\" col=\"1\" backgroundColor=\"#1c486b\"/>\n <label text=\"1,0\" row=\"1\" col=\"0\" backgroundColor=\"#286290\"/>\n <label text=\"1,1\" row=\"1\" col=\"1\" backgroundColor=\"#4383b8\"/>\n</gridLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/grid_layout.svg\" />\n\n<h4>Grid layout with star sizing</h4>The following example creates a grid with responsive design, where space is alotted proportionally to child elements.\n<div class='code-block'><pre class='language-markup'><code><gridLayout columns=\"*, 2*\" rows=\"2*, 3*\" backgroundColor=\"#3c495e\">\n <Label text=\"0,0\" row=\"0\" col=\"0\" backgroundColor=\"#4383b8\"/>\n <Label text=\"0,1\" row=\"0\" col=\"1\" backgroundColor=\"#1c486b\"/>\n <Label text=\"1,0\" row=\"1\" col=\"0\" backgroundColor=\"#286290\"/>\n <Label text=\"1,1\" row=\"1\" col=\"1\" backgroundColor=\"#4383b8\"/>\n</gridLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/grid_layout_star_sizing.svg\" />\n\n<h4>Grid layout with fixed and auto sizing</h4>The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height.\n<div class='code-block'><pre class='language-markup'><code><gridLayout columns=\"80, auto\" rows=\"80, 80\" backgroundColor=\"#3c495e\">\n <label text=\"0,0\" row=\"0\" col=\"0\" backgroundColor=\"#4383b8\"/>\n <label text=\"0,1\" row=\"0\" col=\"1\" backgroundColor=\"#1c486b\"/>\n <label text=\"1,0\" row=\"1\" col=\"0\" backgroundColor=\"#286290\"/>\n <label text=\"1,1\" row=\"1\" col=\"1\" backgroundColor=\"#4383b8\"/>\n</gridLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/grid_layout_fixed_auto.svg\" />\n\n<h4>Grid layout with mixed sizing and merged cells</h4>The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells.\n<div class='code-block'><pre class='language-markup'><code><gridLayout columns=\"40, auto, *\" rows=\"40, auto, *\" backgroundColor=\"#3c495e\">\n <label text=\"0,0\" row=\"0\" col=\"0\" backgroundColor=\"#4383b8\"/>\n <label text=\"0,1\" row=\"0\" col=\"1\" colSpan=\"2\" backgroundColor=\"#1c486b\"/>\n <label text=\"1,0\" row=\"1\" col=\"0\" rowSpan=\"2\" backgroundColor=\"#286290\"/>\n <label text=\"1,1\" row=\"1\" col=\"1\" backgroundColor=\"#4383b8\"/>\n <label text=\"1,2\" row=\"1\" col=\"2\" backgroundColor=\"#286290\"/>\n <label text=\"2,1\" row=\"2\" col=\"1\" backgroundColor=\"#1c486b\"/>\n <label text=\"2,2\" row=\"2\" col=\"2\" backgroundColor=\"#4383b8\"/>\n</gridLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/grid_layout_complex.svg\" />\n\n\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>columns</code></td>\n<td><code>String</code></td>\n<td>A string value representing column widths delimited with commas. Valid values: an absolute number, <code>auto</code>, or <code>*</code>. A number indicates an absolute column width. <code>auto</code> makes the column as wide as its widest child. <code>*</code> makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as <code>3*</code> and <code>5*</code> to indicate a ratio of 3:5 in sizes.</td>\n</tr>\n<tr>\n<td><code>rows</code></td>\n<td><code>String</code></td>\n<td>A string value representing row heights delimited with commas. Valid values: an absolute number, <code>auto</code>, or <code>*</code>. A number indicates an absolute row height. <code>auto</code> makes the row as tall as its tallest child. <code>*</code> makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as <code>3*</code> and <code>5*</code> to indicate a ratio of 3:5 in sizes.</td>\n</tr>\n</tbody></table>\n<h4>Additional children props</h4>When an element is a direct child of <code><GridLayout></code>, you can work with the following additional properties.\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>row</code></td>\n<td><code>Number</code></td>\n<td>Specifies the row for this element. Combined with a <code>col</code> property, specifies the cell coordinates of the element. The first row is indicated by <code>0</code>.</td>\n</tr>\n<tr>\n<td><code>col</code></td>\n<td><code>Number</code></td>\n<td>Specifies the column for the element. Combined with a <code>row</code> property, specifies the cell coordinates of the element. The first column is indicated by <code>0</code>.</td>\n</tr>\n<tr>\n<td><code>rowSpan</code></td>\n<td><code>Number</code></td>\n<td>Specifies the number of rows which this element spans across.</td>\n</tr>\n<tr>\n<td><code>colSpan</code></td>\n<td><code>Number</code></td>\n<td>Specifies the number of columns which this element spans across.</td>\n</tr>\n</tbody></table>\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=\"docs#stacklayout\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tStackLayout\n\t\t\t\t\t\t</h3><code><stackLayout></code> is a layout container that lets you stack the child elements vertically (default) or horizontally.\n<h4>Examples</h4><h4>Default stacking</h4>The following example creates a vertical stack of 3 equally-sized elements. Items are stretched to cover the entire width of the screen. Items are placed in the order they were declared in.\n<div class='code-block'><pre class='language-markup'><code><stackLayout backgroundColor=\"#3c495e\">\n <label text=\"first\" height=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" height=\"70\" backgroundColor=\"#286290\"/>\n <label text=\"third\" height=\"70\" backgroundColor=\"#1c486b\"/>\n</stackLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/stack_layout_vertical.svg\" />\n\n<h4>Horizontal stacking</h4>The following example creates a horizontal stack of 3 equally-sized elements. Items are stretched to cover the entire height of the screen. Items are placed in the order they were declared in.\n<div class='code-block'><pre class='language-markup'><code><stackLayout orientation=\"horizontal\" backgroundColor=\"#3c495e\">\n <label text=\"first\" width=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" width=\"70\" backgroundColor=\"#286290\"/>\n <label text=\"third\" width=\"70\" backgroundColor=\"#1c486b\"/>\n</stackLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/stack_layout_horizontal.svg\" />\n\n<h4>Stack layout with horizontally aligned children</h4>The following example creates a diagonal stack of items with responsive sizes. Items are vertically stacked.\n<div class='code-block'><pre class='language-markup'><code><stackLayout backgroundColor=\"#3c495e\">\n <label text=\"left\" horizontalAlignment=\"left\"\n\t\t width=\"33%\" height=\"70\" backgroundColor=\"#4383b8\"/>\n <label text=\"center\" horizontalAlignment=\"center\"\n\t\t width=\"33%\" height=\"70\" backgroundColor=\"#286290\"/>\n <label text=\"right\" horizontalAlignment=\"right\"\n\t\t width=\"33%\" height=\"70\" backgroundColor=\"#1c486b\"/>\n <label text=\"stretch\" horizontalAlignment=\"stretch\"\n\t\t height=\"70\" backgroundColor=\"#4383b8\"/>\n</stackLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/stack_layout_vertical_align_children.svg\" />\n\n<h4>Horizontal stack layout with vertically aligned children</h4>The following example creates a diagonal stack of items with responsive sizes. Items are horizontally stacked.\n<div class='code-block'><pre class='language-markup'><code><stackLayout orientation=\"horizontal\" backgroundColor=\"#3c495e\">\n <label text=\"top\" verticalAlignment=\"top\"\n\t\t width=\"70\" height=\"33%\" backgroundColor=\"#4383b8\"/>\n <label text=\"center\" verticalAlignment=\"center\"\n\t\t width=\"70\" height=\"33%\" backgroundColor=\"#286290\"/>\n <label text=\"bottom\" verticalAlignment=\"bottom\"\n\t\t width=\"70\" height=\"33%\" backgroundColor=\"#1c486b\"/>\n <label text=\"stretch\" verticalAlignment=\"stretch\"\n\t\t width=\"70\" backgroundColor=\"#4383b8\"/>\n</stackLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/stack_layout_horizontal_align_children.svg\" />\n\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>orientation</code></td>\n<td><code>String</code></td>\n<td>Specifies the stacking direction. Valid values: <code>vertical</code> and <code>horizontal</code>. Default value: <code>vertical</code>.</td>\n</tr>\n</tbody>< 10BC8 ;/table>\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=\"docs#wraplayout\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tWrapLayout\n\t\t\t\t\t\t</h3><code><WrapLayout></code> is a layout container that lets you position items in rows or columns, based on the <code>orientation</code> property. When the space is filled, the container automatically wraps items onto a new row or column.\n<h4>Examples</h4><h4>Default wrap layout</h4>The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item on a new row.\n<div class='code-block'><pre class='language-markup'><code><wrapLayout backgroundColor=\"#3c495e\">\n <label text=\"first\" width=\"30%\" height=\"30%\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" width=\"30%\" height=\"30%\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" width=\"30%\" height=\"30%\" backgroundColor=\"#286290\"/>\n <label text=\"fourth\" width=\"30%\" height=\"30%\" backgroundColor=\"#286290\"/>\n</wrapLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/wrap_layout_horizontal.svg\" />\n\n<h4>Vertical wrap layout</h4>The following example creates a column of equally-sized items. When the row runs out of space, the container wraps the last item on a new column.\n<div class='code-block'><pre class='language-markup'><code><wrapLayout orientation=\"vertical\" backgroundColor=\"#3c495e\">\n <label text=\"first\" width=\"30%\" height=\"30%\" backgroundColor=\"#4383b8\"/>\n <label text=\"second\" width=\"30%\" height=\"30%\" backgroundColor=\"#1c486b\"/>\n <label text=\"third\" width=\"30%\" height=\"30%\" backgroundColor=\"#286290\"/>\n <label text=\"fourth\" width=\"30%\" height=\"30%\" backgroundColor=\"#286290\"/>\n</wrapLayout></code></pre></div><img width=320 src=\"/media/docs/layouts/wrap_layout_vertical.svg\" />\n\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>orientation</code></td>\n<td><code>String</code></td>\n<td>Specifies the stacking direction. Valid values: <code>horizontal</code> (arranges items in rows) and <code>vertical</code> (arranges items in columns). Default value: <code>horizontal</code>.</td>\n</tr>\n<tr>\n<td><code>itemWidth</code></td>\n<td><code>Number</code></td>\n<td>Sets the width used to measure and layout each child. Default value: <code>Number.NaN</code>, which does not restrict children.</td>\n</tr>\n<tr>\n<td><code>itemHeight</code></td>\n<td><code>Number</code></td>\n<td>Sets the height used to measure and layout each child. Default value is <code>Number.NaN</code>, which does not restrict children.</td>\n</tr>\n</tbody></table>\n","metadata":{"title":"Layouts"},"subsections":[{"slug":"absolutelayout","title":"AbsoluteLayout"},{"slug":"docklayout","title":"DockLayout"},{"slug":"flexboxlayout","title":"FlexboxLayout"},{"slug":"gridlayout","title":"GridLayout"},{"slug":"stacklayout","title":"StackLayout"},{"slug":"wraplayout","title":"WrapLayout"}],"slug":"layouts","file":"30-layouts.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=\"docs#actionbar\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tActionBar\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar\">Class Docs</a></div>\n\n<code><actionBar></code> is a UI component that provides a toolbar at the top of the activity window. \nThis component is the NativeScript abstraction for the Android <a href=\"https://developer.android.com/training/appbar/\">app bar</a> and the iOS <a href=\"https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/\">navigation bar</a>.\n<h4>Using a title</h4><div class='code-block'><pre class='language-markup'><code><actionBar title=\"MyApp\" /></code></pre></div><h4>Using a custom title view</h4><div class='code-block'><pre class='language-markup'><code><actionBar>\n <stackLayout orientation=\"horizontal\">\n\t<image src=\"res://icon\" width=\"40\" height=\"40\" verticalAlignment=\"center\" />\n\t<label text=\"NativeScript\" fontSize=\"24\" verticalAlignment=\"center\" />\n </stackLayout>\n</actionBar></code></pre></div><h4>Setting an app icon for Android</h4><div class='code-block'><pre class='language-markup'><code><actionBar title=\"My App\" android.icon=\"res://icon\" android.iconVisibility=\"always\" /></code></pre></div><h4>Removing the border</h4>By default, a border is drawn at the bottom of the <code><actionBar></code>. In addition to the border, on iOS devices a translucency filter is also applied over the <code><actionBar></code>.\nTo remove this styling from your app, you can set the <code>flat</code> property to <code>true</code>.\n<div class='code-block'><pre class='language-markup'><code><actionBar title=\"My App\" flat=\"true\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>title</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the title shown in the bar.</td>\n</tr>\n<tr>\n<td><code>android.icon</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the icon to be shown on Android devices.</td>\n</tr>\n<tr>\n<td><code>android.iconVisibility</code></td>\n<td><code>String</code></td>\n<td>Gets or sets icon visibility on Android devices.</td>\n</tr>\n<tr>\n<td><code>flat</code></td>\n<td><code>boolean</code></td>\n<td>Removes the border on Android and the translucency on iOS. Default value is <code>false</code>.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/Toolbar.html\"><code>android.widget.Toolbar</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uinavigationbar\"><code>UINavigationBar</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#actionitem\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tActionItem\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem\">Class Docs</a></div>\n\n<code><actionItem></code> is a UI component that lets you add action buttons to the <code><actionBar></code> component.\n<h4>Basic use</h4><div class='code-block'><pre class='language-markup'><code><actionBar title=\"My App\">\n <actionItem on:tap=\"{onTapShare}\"\n\tios.systemIcon=\"9\" ios.position=\"left\"\n\tandroid.systemIcon=\"ic_menu_share\" android.position=\"actionBar\" />\n <actionItem on:tap=\"onTapDelete\"\n\tios.systemIcon=\"16\" ios.position=\"right\"\n\ttext=\"delete\" android.position=\"popup\" />\n</actionBar></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>ios.systemIcon</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the icon of the <code>ActionItem</code> for iOS. The value must be a number from the <a href=\"https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem\"><code>UIBarButtonSystemItem</code> enumeration</a>.</td>\n</tr>\n<tr>\n<td><code>android.systemIcon</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the icon of the <code>ActionItem</code> for Android. The value must be the name of a <a href=\"http://androiddrawables.com\">drawable resource</a>.</td>\n</tr>\n<tr>\n<td><code>ios.position</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the position of the <code>ActionItem</code> within the <code>ActionBar</code> for iOS. Valid values: <code>left</code> or <code>right</code>. Default value is <code>left</code>.</td>\n</tr>\n<tr>\n<td><code>android.position</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the position of the <code>ActionItem</code> within the <code>ActionBar</code> for Android. Valid values: <code>actionBar</code> (places the item in the ActionBar) <code>popup</code> (places the item in the options menu; renders items as text) <code>actionBarIfRoom</code> (places the item in the <code>ActionBar</code> if there is enough room for it there; otherwise, placess it in the options menu) Default value is <code>actionBar</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>tap</code></td>\n<td>Emitted when the <code>ActionItem</code> is tapped.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/Toolbar.html\"><code>android.widget.Toolbar</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uinavigationitem\"><code>UINavigationItem</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#navigationbutton\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tNavigationButton\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton\">Class Docs</a></div>\n\n<code><navigationButton></code> is a UI component that provides an abstraction for the Android navigation button and the iOS back button.\nExtends <a href=\"docs#actionitem\"><code><actionItem></code></a>.\n<div class='code-block'><pre class='language-markup'><code><actionBar title=\"My App\">\n <navigationButton text=\"Go back\" android.systemIcon=\"ic_menu_back\" on:tap=\"{goBack}\" />\n</actionBar></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>text</code></td>\n<td><code>String</code></td>\n<td>(iOS-only) Sets the text of the button.</td>\n</tr>\n<tr>\n<td><code>android.systemIcon</code></td>\n<td><code>String</code></td>\n<td>(Android-only) The icon to be shown in the button. You can specify any system icon whose name begins with the <code>ic_</code> prefix. For a complete list of the available icons, see <a href=\"https://developer.android.com/reference/android/R.drawable.html\">the <code>R.drawable</code> Android class</a>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>tap</code></td>\n<td>Emitted when the <code><NavigationButton></code> is tapped.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/Toolbar.html\"><code>android.widget.Toolbar</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uinavigationitem\"><code>UINavigationItem</code></a></td>\n</tr>\n</tbody></table>\n","metadata":{"title":"ActionBars"},"subsections":[{"slug":"actionbar","title":"ActionBar"},{"slug":"actionitem","title":"ActionItem"},{"slug":"navigationbutton","title":"NavigationButton"}],"slug":"action-bars","file":"35-action-bars.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=\"docs#activityindicator\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tActivityIndicator\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator\">Class Docs</a></div>\n\n\n<code><activityIndicator></code> is a UI component that shows a progress indicator signaling to the user of an operation running in the background.\n<div class='code-block'><pre class='language-markup'><code><activityIndicator busy=\"{true}\" on:busyChange=\"{{onBusyChanged}}\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>busy</code></td>\n<td><code>Boolean</code></td>\n<td>Gets or sets whether the indicator is active. When <code>true</code>, the indicator is active.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>busyChange</code></td>\n<td>Emitted when the <code>busy</code> property is changed.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/ProgressBar.html\"><code>android.widget.ProgressBar</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uiactivityindicatorview\"><code>UIActivityIndicatorView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#button\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_button_.button\">Class Docs</a></div>\n\n\n\n\n<code><button></code> is a UI component that displays a button which reacts to a user gesture.\nFor more information about the available gestures, see <a href=\"https://docs.nativescript.org/ui/gestures\">Gestures in the official NativeScript documentation</a>.\n<div class='code-block'><pre class='language-markup'><code><button text=\"Button\" on:tap=\"{onButtonTap}\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>text</code></td>\n<td><code>String</code></td>\n<td>Sets the label of the button.</td>\n</tr>\n<tr>\n<td><code>textWrap</code></td>\n<td><code>Boolean</code></td>\n<td>Gets or sets whether the widget wraps the text of the label. Useful for longer labels. Default value is <code>false</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>tap</code></td>\n<td>Emitted when the button is tapped.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/Button.html\"><code>android.widget.Button</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uibutton\"><code>UIButton</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#datepicker\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tDatePicker\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker\">Class Docs</a></div>\n\n\n\n\n<code><datePicker></code> is a UI component that lets users select a date from a pre-configured range.\n<div class='code-block'><pre class='language-markup'><code><datePicker date=\"{someDate}\" /></code></pre></div><code><datePicker></code> provides two-way data binding using <code>bind</code>.\n<div class='code-block'><pre class='language-markup'><code><datePicker bind:date=\"{selectedDate}\" /></code></pre></div>See also: <a href=\"docs#timepicker\">TimePicker</a>.\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>date</code></td>\n<td><code>Date</code></td>\n<td>Gets or sets the complete date.</td>\n</tr>\n<tr>\n<td><code>minDate</code></td>\n<td><code>Date</code></td>\n<td>Gets or sets the earliest possible date to select.</td>\n</tr>\n<tr>\n<td><code>maxDate</code></td>\n<td><code>Date</code></td>\n<td>Gets or sets the latest possible date to select.</td>\n</tr>\n<tr>\n<td><code>day</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the day.</td>\n</tr>\n<tr>\n<td><code>month</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the month.</td>\n</tr>\n<tr>\n<td><code>year</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the year.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>dateChange</code></td>\n<td>Emitted when the selected date changes.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/DatePicker.html\"><code>android.widget.DatePicker</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uidatepicker\"><code>UIDatePicker</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#frame\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tFrame\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame\">Class Docs</a></div>\n\n\n\n<code><frame></code> is a UI component used to display <a href=\"docs#page\"><code><page></code></a> elements. Every app needs at least a single <code><frame></code> element, usually set as the root element. Svelte Native creates the root frame for you.\nIf you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side\n<div class='code-block'><pre class='language-markup'><code><gridLayout columns=\"*, *\">\n <frame col=\"0\"/>\n <frame col=\"1\"/>\n</gridLayout></code></pre></div>The first child element of a frame will become its <code>defaultPage</code>. This is the page shown before any navigation.\n<div class='code-block'><pre class='language-markup'><code><frame>\n <page>\n\t<actionBar title=\"Default Page Title\" />\n\t<gridLayout>\n\t <label text=\"Default Page Content\" />\n\t</gridLayout>\n </page>\n</frame></code></pre></div>You can use a component as the default page for a frame, as long as it defines <code>page</code> as its root element.\n<div class='code-block'><pre class='language-markup'><code><frame>\n <Home />\n</frame></code></pre></div><div class='code-block'><pre class='language-javascript'><code>import Home from './Home.svelte'</code></pre></div><h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://github.com/NativeScript/tns-core-modules-widgets/blob/master/android/widgets/src/main/java/org/nativescript/widgets/ContentLayout.java\"><code>org.nativescript.widgets.ContentLayout</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uinavigationcontroller\"><code>UINavigationController</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#htmlview\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tHtmlView\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview\">Class Docs</a></div>\n\n\n\n<code><htmlView></code> is a UI component that lets you show static HTML content.\nSee also: <a href=\"docs#webview\">WebView</a>.\n<div class='code-block'><pre class='language-markup'><code><htmlView html=\"<div><h1>HtmlView</h1></div>\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>html</code></td>\n<td><code>String</code></td>\n<td>The HTML content to be shown.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/TextView.html\"><code>android.widget.TextView</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uitextview\"><code>UITextView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#image\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tImage\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_image_.image\">Class Docs</a></div>\n\n\n\n<code><image></code> is a UI component that shows an image from an <a href=\"https://docs.nativescript.org/api-reference/modules/_image_source_\">ImageSource</a> or from a URL.\nNativeScript aliases <code>~</code> to the app directory.\n<div class='code-block'><pre class='language-markup'><code><image src=\"~/logo.png\" stretch=\"none\"</span& 10BC8 gt; /></code></pre></div>Images can be loaded from external urls\n<div class='code-block'><pre class='language-markup'><code><image src=\"https://svelte-native.technology/media/todoapp/todo-add-item.png\" stretch=\"none\" /></code></pre></div>Images can also be displayed from the App_Resources folder using the <code>res://</code> scheme.\n<div class='code-block'><pre class='language-markup'><code><image src=\"res://icon\" stretch=\"none\" /></code></pre></div>NativeScript also supports data uris that are base64 encoded\n<div class='code-block'><pre class='language-markup'><code><image src=\"data:Image/png;base64,iVBORw...\" stretch=\"none\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>src</code></td>\n<td><code>String</code> or <a href=\"https://docs.nativescript.org/api-reference/modules/_image_source_\"><code>ImageSource</code></a></td>\n<td>Gets or sets the source of the image as a URL or an image source.</td>\n</tr>\n<tr>\n<td><code>imageSource</code></td>\n<td><a href=\"https://docs.nativescript.org/api-reference/modules/_image_source_\"><code>ImageSource</code></a></td>\n<td>Gets or sets the image source of the image.</td>\n</tr>\n<tr>\n<td><code>tintColor</code></td>\n<td><code>Color</code></td>\n<td>(Style property) Sets a color to tint template images.</td>\n</tr>\n<tr>\n<td><code>stretch</code></td>\n<td><code>Stretch</code></td>\n<td>(Style property) Gets or sets the way the image is resized to fill its allocated space. Valid values: <code>none</code>, <code>aspectFill</code>, <code>aspectFit</code>, or <code>fill</code>. For more information, see <a href=\"https://docs.nativescript.org/api-reference/modules/_ui_enums_.stretch\">Stretch</a>.</td>\n</tr>\n<tr>\n<td><code>loadMode</code></td>\n<td></td>\n<td>Gets or sets the loading strategy for the images on the local file system. Valid values: <code>sync</code> or <code>async</code>. Default value: <code>async</code>. For more information, see <a href=\"https://docs.nativescript.org/api-reference/classes/_ui_image_.image#loadmode\">loadMode</a>.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/ImageView.html\"><code>android.widget.ImageView</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uiimageview\"><code>UIImageView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#label\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tLabel\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_label_.label\">Class Docs</a></div>\n\n\n\n<code><label></code> is a UI component that displays read-only text.\n<blockquote>\nIMPORTANT: This <code><label></code> is not the same as the HTML <code><label></code>.\n</blockquote>\n<div class='code-block'><pre class='language-markup'><code><label text=\"Label\" /></code></pre></div><h4>Styling the label</h4>If you need to style parts of the text, you can use a combination of a <a href=\"https://docs.nativescript.org/angular/ui/ng-ui-widgets/formatted-string\"><code>FormattedString</code></a> and <a href=\"https://docs.nativescript.org/api-reference/classes/_text_span_.span\"><code>Span</code></a> elements.\n<div class='code-block'><pre class='language-markup'><code><label textWrap=\"{true}\">\n <formattedString>\n\t<span text=\"This text has a \" />\n\t<span text=\"red \" style=\"color: red\" />\n\t<span text=\"piece of text. \" />\n\t<span text=\"Also, this bit is italic, \" fontStyle=\"italic\" />\n\t<span text=\"and this bit is bold.\" fontWeight=\"bold\" />\n </formattedString>\n</label></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>text</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the text of the label.</td>\n</tr>\n<tr>\n<td><code>textWrap</code></td>\n<td><code>Boolean</code></td>\n<td>Gets or sets whether the label wraps text. Default value: <code>false</code>.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/TextView.html\"><code>android.widget.TextView</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uilabel\"><code>UILabel</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#listpicker\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tListPicker\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_list_picker_.listpicker\">Class Docs</a></div>\n\n\n\n<code><listPicker></code> is a UI component that lets the user select a value from a pre-configured list.\n<div class='code-block'><pre class='language-markup'><code><listPicker items=\"{listOfItems}\" selectedIndex=\"0\"\n\ton:selectedIndexChange=\"{selectedIndexChanged}\" /></code></pre></div><code><listPicker></code> provides two-way data binding using <code>v-model</code>.\n<div class='code-block'><pre class='language-markup'><code><listPicker items=\"{listOfItems}\" v-model=\"selectedItem\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>items</code></td>\n<td><code>Array<string></code></td>\n<td>Gets or sets the items displayed as options in the list picker.</td>\n</tr>\n<tr>\n<td><code>selectedIndex</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the index of the currently selected item.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>selectedIndexChange</code></td>\n<td>Emitted when the currently selected option (index) changes.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/NumberPicker.html\"><code>android.widget.NumberPicker</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uipickerview\"><code>UIPickerView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#listview\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tListView\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview\">Class Docs</a></div>\n\n<code><listView></code> is a UI component that shows items in a vertically scrolling list. To set how the list shows individual items, you use the <a href=\"docs#template-component\"><code><Template></code> component</a>.\n<div class='code-block'><pre class='language-markup'><code><listView items=\"{listOfItems}\" on:itemTap=\"{onItemTap}\">\n <Template let:item>\n\t\n\t<label text=\"{item}\" />\n </Template>\n</listView>\n<script>\n\timport { Template } from 'svelte-native/components'\n\tlet listOfItems = ['one','two','three']\n\tfunction onItemTap(e) { console.log(e.item) }\n</script></code></pre></div><code><listView></code> does not loop through list items as you would expect when using a regular svelte <code>each</code> block. Instead <code><listView></code> only creates the necessary views to display the currently visible items on the screen, and reuses the views that are already off-screen when scrolled. This concept is called view recycling and is commonly used in mobile apps to improve performance. \nYou can use the <code>itemTap</code> event which contains the index of the tapped item and the actual item from the list.\n<div class='code-block'><pre class='language-javascript'><code>onItemTap(event) {\n console.log(event.index)\n console.log(event.item)\n}</code></pre></div><blockquote>\nNOTE Unlike Svelte expressions, The listView component will not update the list items if you assign the same value to lists (eg <code>items.push('four'); list.items =items</code>). It will update if you assign a new list reference (eg <code>items = items.concat('four'); list.items = items</code>)\n</blockquote>\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>items</code></td>\n<td><code>Array<any></code></td>\n<td>An array of items to be shown in the <code><listView></code>.</td>\n</tr>\n<tr>\n<td><code>separatorColor</code></td>\n<td><code>Color</code></td>\n<td>Sets the separator line color. Set to <code>transparent</code> to remove it.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>itemTap</code></td>\n<td>Emitted when an item in the <code><listView></code> is tapped. To access the tapped item, use <code>event.item</code>.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/ListView.html\"><code>android.widget.ListView</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uitableview\"><code>UITableView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#page\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tPage\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_page_.page\">Class Docs</a></div>\n\n\n\n<code><page></code> is a UI component that represents an application screen. NativeScript apps typically consist of one or more <code><page></code> that wrap content such as an <a href=\"docs#actionbar\"><code><actionBar></code></a> and other UI widgets.\n<div class='code-block'><pre class='language-markup'><code><page>\n <actionBar title=\"My App\" />\n <gridLayout>\n\t<label text=\"My Content\"/>\n </gridLayout>\n</page></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>actionBarHidden</code></td>\n<td><code>Boolean</code></td>\n<td>Shows or hides the <code><actionBar></code> for the page. Default value: <code>false</code>.</td>\n</tr>\n<tr>\n<td><code>backgroundSpanUnderStatusBar</code></td>\n<td><code>Boolean</code></td>\n<td>Gets or sets whether the background of the page spans under the status bar. Default value: <code>false</code>.</td>\n</tr>\n<tr>\n<td><code>androidStatusBarBackground</code></td>\n<td><code>Color</code></td>\n<td>(Android-only) Gets or sets the color of the status bar on Android devices.</td>\n</tr>\n<tr>\n<td><code>enableSwipeBackNavigation</code></td>\n<td><code>Boolean</code></td>\n<td>(iOS-only) Gets or sets whether the page can be swiped back on iOS. Default value: <code>true</code>.</td>\n</tr>\n<tr>\n<td><code>statusBarStyle</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the style of the status bar. Valid values: <code>light</code>, <code>dark</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>navigatedFrom</code></td>\n<td>Emitted after the app has navigated away from the current page.</td>\n</tr>\n<tr>\n<td><code>navigatedTo</code></td>\n<td>Emitted after the app has navigated to the current page.</td>\n</tr>\n<tr>\n<td><code>navigatingFrom</code></td>\n<td>Emitted before the app has navigated away from the current page.</td>\n</tr>\n<tr>\n<td><code>navigatingTo</code></td>\n<td>Emitted before the app has navigated to the current page.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://github.com/NativeScript/tns-core-modules-widgets/blob/master/android/widgets/src/main/java/org/nativescript/widgets/GridLayout.java\"><code>org.nativescript.widgets.GridLayout</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uiviewcontroller\"><code>UIViewController</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#progress\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tProgress\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_progress_.progress\">Class Docs</a></div>\n\n\n\n<code><progress></code> is a UI component that shows a bar to indicate the progress of a task. \nSee also: <a href=\"docs#activityindicator\">ActivityIndicator</a>.\n<div class='code-block'><pre class='language-markup'><code><progress value=\"{currentProgress}\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>value</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the current value of the progress bar. Must be within the range of 0 to <code>maxValue</code>.</td>\n</tr>\n<tr>\n<td><code>maxValue</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the maximum value of the progress bar. Default value: <code>100</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>valueChange</code></td>\n<td>Emitted when the <code>value</code> property changes.</td>\n</tr>\n</tbody></table>\n<h4>Native Component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/ProgressBar.html\"><code>android.widget.ProgressBar</code> (indeterminate = false)</a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uiprogressview\"><code>UIProgressView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#scrollview\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tScrollView\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview\">Class Docs</a></div>\n\n\n\n<code><scrollView></code> is a UI component that shows a scrollable content area. Content can be scrolled vertically or horizontally.\n<div class='code-block'><pre class='language-markup'><code><scrollView orientation=\"horizontal\">\n <stackLayout orientation=\"horizontal\">\n\t<label text=\"this\" />\n\t<label text=\"text\" />\n\t<label text=\"scrolls\" />\n\t<label text=\"horizontally\" />\n\t<label text=\"if necessary\" />\n </stackLayout>\n</scrollView></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>name</th>\n<th>type</th>\n<th>description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>orientation</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the direction in which the content can be scrolled: <code>horizontal</code> or <code>vertical</code>. Default value: <code>vertical</code>.</td>\n</tr>\n<tr>\n<td><code>scrollBarIndicatorVisible</code></td>\n<td><code>Boolean</code></td>\n<td>Specifies if the scrollbar is visible. Default value: <code>true</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>scroll</code></td>\n<td>Emitted when a scroll event occurs.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/view/View.html\"><code>android.view</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uiscrollview\"><code>UIScrollView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#searchbar\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tSearchBar\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar\">Class Docs</a></div>\n\n\n\n<code><searchBar></code> is a UI component that provides a user interface for entering search queries and submitting requests to the search provider.\n<div class='code-block'><pre class='language-markup'><code><searchBar hint=\"Search hint\" text=\"{searchPhrase}\" on:textChange=\"{onTextChanged}\" on:submit=\"{onSubmit}\" /></code></pre></div><code><searchBar></code> provides two-way data binding using <code>v-model</code>.\n<div class='code-block'><pre class='language-markup'><code><searchBar v-model=\"searchQuery\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>hint</code></td>\n<td><code>String</code></td>\n<td>Gets or sets placeholder text for the input area.</td>\n</tr>\n<tr>\n<td><code>text</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the value of the search query.</td>\n</tr>\n<tr>\n<td><code>textFieldBackgroundColor</code></td>\n<td><code>Color</code></td>\n<td>Gets or sets the background color of the input area.</td>\n</tr>\n<tr>\n<td><code>textFieldHintColor</code></td>\n<td><code>Color</code></td>\n<td>Gets or sets the color of the placeholder text.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>name</th>\n<th>description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>textChange</code></td>\n<td>Emitted when the text is changed.</td>\n</tr>\n<tr>\n<td><code>submit</code></td>\n<td>Emitted when the search input is submitted.</td>\n</tr>\n<tr>\n<td><code>clear</code></td>\n<td>Emitted when the current search input is cleared through the X button in the input area.</td>\n</tr>\n</tbody></table>\n<h4>Native Component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/SearchView.html\"><code>android.widget.SearchView</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uisearchbar\"><code>UISearchBar</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#segmentedbar\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tSegmentedBar\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"http://docs.nativescript.org/api-reference/modules/_ui_segmented_bar_.html\">Class Docs</a></div>\n\n\n\n<code><segmentedBar></code> is a UI bar component that displays a set of buttons for discrete selection. Can show text or images.\nAs opposed to <code><tabView></code>:\n<ul>\n<li>The position of <code><segmentedBar></code> is not fixed. </li>\n<li>You can place and style it as needed on the page or inside additional app elements such as hamburger menus.</li>\n<li>You need to handle the content shown after selection separately.</li>\n</ul>\n<div class='code-block'><pre class='language-markup'><code><segmentedBar>\n <segmentedBarItem title=\"First\" />\n <segmentedBarItem title=\"Second\" />\n <segmentedBarItem title=\"Third\" />\n</segmentedBar></code></pre></div><div class='code-block'><pre class='language-markup'><code><segmentedBar items=\"{listOfItems}\" selectedIndex=\"0\"\n\ton:selectedIndexChange=\"{onSelectedIndexChange}\" /></code></pre></div><code><segmentedBar></code> provides two-way data binding using <code>v-model</code>.\n<div class='code-block'><pre class='language-markup'><code><segmentedBar items=\"{listOfItems}\" v-model=\"selectedItem\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>items</code></td>\n<td><code>Array<segmentedBarItem></code></td>\n<td>An array of items to be displayed in the segmented bar. Represents the button labels or icons of the segmented bar. The array must be created in advance.</td>\n</tr>\n<tr>\n<td><code>selectedIndex</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the index of the selected item.</td>\n</tr>\n<tr>\n<td><code>selectedBackgroundColor</code></td>\n<td><code>Color</code></td>\n<td>(Style property) Gets or sets the background color of the selected item. To set the background color of the entire bar, use <code>backgroundColor</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>selectedIndexChange</code></td>\n<td>Emitted when the an item on the segmented bar is tapped.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/TabHost.html\"><code>android.widget.TabHost</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uisegmentedcontrol\"><code>UISegmentedControl</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#slider\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tSlider\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_slider_.slider\">Class Docs</a></div>\n\n\n\n\n<code><slider></code> is a UI component that provides a slider control for picking values within a specified numeric range.\n<div class='code-block'><pre class='language-markup'><code><slider value=\"80\" on:valueChange=\"{onValueChanged}\" /></code></pre></div><code><slider></code> provides two-way data binding using <code>v-model</code>:\n<div class='code-block'><pre class='language-markup'><code><slider v-model=\"value\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>value</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the currently selected value of the slider. Default value: <code>0</code>.</td>\n</tr>\n<tr>\n<td><code>minValue</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the minimum value of the slider. Default value: <code>0</code>.</td>\n</tr>\n<tr>\n<td><code>maxValue</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the maximum value of the slider. Default value: <code>100</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>valueChange</code></td>\n<td>Emitted when the value of the slider changes.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/SeekBar.html\"><code>android.widget.SeekBar</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uislider\"><code>UISlider</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#switch\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tSwitch\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_switch_.switch\">Class Docs</a></div>\n\n\n\n<code><switch></code> is a UI component that lets users toggle between two states.\nThe default state is <code>false</code> or OFF.\n<div class='code-block'><pre class='language-markup'><code><switch checked=\"{true}\" /></code></pre></div><code><switch></code>provides two-way data binding using <code>v-model</code>.\n<div class='code-block'><pre class='language-markup'><code>&l 10BC8 t;switch v-model=\"itemEnabled\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>checked</code></td>\n<td><code>Boolean</code></td>\n<td>Gets or sets the value of the switch selection. Default value: <code>false</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>checkedChange</code></td>\n<td>Emitted when the switch selection changes.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/Switch.html\"><code>android.widget.Switch</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uiswitch\"><code>UISwitch</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#tabview\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tTabView\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview\">Class Docs</a></div>\n\n\n\n<code><tabView></code> is a navigation component that shows content grouped into tabs and lets users switch between tabs.\n<div class='code-block'><pre class='language-markup'><code><tabView selectedIndex=\"{selectedIndex}\" on:selectedIndexChange=\"{indexChange}\">\n <tabViewItem title=\"Tab 1\">\n\t<label text=\"Content for Tab 1\" />\n </tabViewItem>\n <tabViewItem title=\"Tab 2\">\n\t<label text=\"Content for Tab 2\" />\n </tabViewItem>\n</tabView></code></pre></div><div class='code-block'><pre class='language-javascript'><code>function indexChange(args) {\n\tlet newIndex = args.value\n\tconsole.log('Current tab index: ' + newIndex)\n}</code></pre></div><blockquote>\nNOTE: Currently, <code>TabViewItem</code> expects a single child element. In most cases, you might want to wrap your content in a layout.\n</blockquote>\n<h4>Adding icons to tabs</h4><div class='code-block'><pre class='language-markup'><code><tabView selectedIndex=\"{selectedIndex}\" iosIconRenderingMode=\"alwaysOriginal\">\n <tabViewItem title=\"Tab 1\" iconSource=\"~/images/icon.png\">\n\t<label text=\"Content for Tab 1\" />\n </tabViewItem>\n <tabViewItem title=\"Tab 2\" iconSource=\"~/images/icon.png\">\n\t<label text=\"Content for Tab 2\" />\n </tabViewItem>\n</tabView></code></pre></div><blockquote>\nNOTE: You can use images for tab icons instead of icon fonts. For more information about how to control the size of icons, see <a href=\"https://docs.nativescript.org/ui/image-resources\">Working with image from resource folders</a>.\n</blockquote>\n<h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>selectedIndex</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the currently selected tab. Default is <code>0</code>.</td>\n</tr>\n<tr>\n<td><code>tabTextColor</code></td>\n<td><code>Color</code></td>\n<td>(Style property) Gets or sets the text color of the tabs titles.</td>\n</tr>\n<tr>\n<td><code>tabBackgroundColor</code></td>\n<td><code>Color</code></td>\n<td>(Style property) Gets or sets the background color of the tabs.</td>\n</tr>\n<tr>\n<td><code>selectedTabTextColor</code></td>\n<td><code>Color</code></td>\n<td>(Style property) Gets or sets the text color of the selected tab title.</td>\n</tr>\n<tr>\n<td><code>androidTabsPosition</code></td>\n<td><code>String</code></td>\n<td>Sets the position of the TabView in Android platform Valid values: <code>top</code> or <code>bottom</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>selectedIndexChange</code></td>\n<td>Emits an event object containing a <code>value</code> property with the index of the tapped <code><tabViewItem></code>.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/support/v4/view/ViewPager.html\"><code>android.support.v4.view.ViewPager</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uitabbarcontroller\"><code>UITabBarController</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#textfield\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tTextField\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/modules/_ui_text_field_\">Class Docs</a></div>\n\n\n\n\n<code><textField></code> is an input component that creates an editable single-line box.\n<code><textField></code> extends <a href=\"https://docs.nativescript.org/api-reference/classes/_ui_text_base_.textbase\"><code>TextBase</code></a> and <a href=\"https://docs.nativescript.org/api-reference/classes/_ui_editor_text_base_.editabletextbase\"><code>EditableTextBase</code></a> which provide additional properties and events.\n<div class='code-block'><pre class='language-markup'><code><textField text=\"{textFieldValue}\" hint=\"Enter text...\" /></code></pre></div><code><textField></code> provdes two-way data binding using <code>bind</code>.\n<div class='code-block'><pre class='language-markup'><code><textField bind:text=\"{textFieldValue}\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>text</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the value of the field.</td>\n</tr>\n<tr>\n<td><code>hint</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the placeholder text.</td>\n</tr>\n<tr>\n<td><code>editable</code></td>\n<td><code>Boolean</code></td>\n<td>When <code>true</code>, indicates that the user can edit the value of the field.</td>\n</tr>\n<tr>\n<td><code>maxLength</code></td>\n<td><code>Number</code></td>\n<td>Limits input to the spcified number of characters.</td>\n</tr>\n<tr>\n<td><code>secure</code></td>\n<td><code>Boolean</code></td>\n<td>Hides the entered text when <code>true</code>. Use this property to create password input fields. Default value: <code>false</code>.</td>\n</tr>\n<tr>\n<td><code>keyboardType</code></td>\n<td><code>KeyboardType</code></td>\n<td>Shows a custom keyboard for easier text input. Valid values: <code>datetime</code>, <code>phone</code>, <code>number</code>, <code>url</code>, or <code>email</code>.</td>\n</tr>\n<tr>\n<td><code>returnKeyType</code></td>\n<td><code>ReturnKeyType</code></td>\n<td>Gets or sets the label of the return key. Valid values: <code>done</code>, <code>next</code>, <code>go</code>, <code>search</code>, or <code>send</code>.</td>\n</tr>\n<tr>\n<td><code>autocorrect</code></td>\n<td><code>Boolean</code></td>\n<td>Enables or disables autocorrect.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>textChange</code></td>\n<td>Emitted when the text changes.</td>\n</tr>\n<tr>\n<td><code>returnPress</code></td>\n<td>Emitted when the return key is pressed.</td>\n</tr>\n<tr>\n<td><code>focus</code></td>\n<td>Emitted when the field is in focus.</td>\n</tr>\n<tr>\n<td><code>blur</code></td>\n<td>Emitted when the field loses focus.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/EditText.html\"><code>android.widget.EditText</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uitextfield\"><code>UITextField</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#textview\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tTextView\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview\">Class Docs</a></div>\n\n\n\n<code><textView></code> is a UI component that shows an editable or a read-only multi-line text container. You can use it to let users type large text in your app or to show longer, multi-line text on the screen.\n<code><textView></code> extends <a href=\"https://docs.nativescript.org/api-reference/classes/_ui_text_base_.textbase\"><code>TextBase</code></a> and <a href=\"https://docs.nativescript.org/api-reference/classes/_ui_editor_text_base_.editabletextbase\"><code>EditableTextBase</code></a> which provide additional properties and events.\n<div class='code-block'><pre class='language-markup'><code><textView text=\"Multi\\nLine\\nText\" /></code></pre></div><code><textView></code> provides two-way data binding using <code>bind</code>.\n<div class='code-block'><pre class='language-markup'><code><textView bind:text=\"{textViewValue}\" /></code></pre></div><h4>Displaying multi-style text</h4>To apply multiple styles to the text in your <code><textView></code>, you can use <code><formattedString></code>\n<div class='code-block'><pre class='language-markup'><code><textView editable=\"{false}\">\n <formattedString>\n\t<span text=\"You can use text attributes such as \" />\n\t<span text=\"bold, \" fontWeight=\"Bold\" />\n\t<span text=\"italic \" fontStyle=\"Italic\" />\n\t<span text=\"and \" />\n\t<span text=\"underline.\" textDecoration=\"Underline\" />\n </formattedString>\n</textView></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>text</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the value of the component.</td>\n</tr>\n<tr>\n<td><code>hint</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the placeholder text when the component is editable.</td>\n</tr>\n<tr>\n<td><code>editable</code></td>\n<td><code>Boolean</code></td>\n<td>When <code>true</code>, indicates that the user can edit the contents of the container.</td>\n</tr>\n<tr>\n<td><code>maxLength</code></td>\n<td><code>Number</code></td>\n<td>Sets the maximum number of characters that can be entered in the container.</td>\n</tr>\n<tr>\n<td><code>keyboardType</code></td>\n<td><code>KeyboardType</code></td>\n<td>Shows a custom keyboard for easier text input. Valid values: <code>datetime</code>, <code>phone</code>, <code>number</code>, <code>url</code>, or <code>email</code>.</td>\n</tr>\n<tr>\n<td><code>returnKeyType</code></td>\n<td>Gets or sets the label of the return key. Currently supported only on iOS. Valid values: <code>done</code>, <code>next</code>, <code>go</code>, <code>search</code>, or <code>send</code>.</td>\n<td></td>\n</tr>\n<tr>\n<td><code>autocorrect</code></td>\n<td><code>Boolean</code></td>\n<td>Enables or disables autocorrect.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>textChange</code></td>\n<td>Emitted when the text changes.</td>\n</tr>\n<tr>\n<td><code>returnPress</code></td>\n<td>Emitted when the return key is pressed.</td>\n</tr>\n<tr>\n<td><code>focus</code></td>\n<td>Emitted when the container is in focus.</td>\n</tr>\n<tr>\n<td><code>blur</code></td>\n<td>Emitted when the container loses focus.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/EditText.html\"><code>android.widget.EditText</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uitextview\"><code>UITextView</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#timepicker\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tTimePicker\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_time_picker_.timepicker\">Class Docs</a></div>\n\n\n\n<code><timePicker></code> is a UI component that lets users select time. \nSee also: <a href=\"docs#datepicker\">DatePicker</a>.\n<div class='code-block'><pre class='language-markup'><code><timePicker hour=\"{selectedHour}\" minute=\"{selectedMinute}\" /></code></pre></div><code><timePicker></code> provides two-way data binding using <code>bind</code>.\n<div class='code-block'><pre class='language-markup'><code><timePicker bind:time=\"{selectedTime}\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>hour</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the selected hour.</td>\n</tr>\n<tr>\n<td><code>minute</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the selected minute.</td>\n</tr>\n<tr>\n<td><code>time</code></td>\n<td><code>Date</code></td>\n<td>Gets or sets the selected time.</td>\n</tr>\n<tr>\n<td><code>minHour</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the minimum selectable hour.</td>\n</tr>\n<tr>\n<td><code>maxHour</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the maximum selectable hour.</td>\n</tr>\n<tr>\n<td><code>minMinute</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the minimum selectable minute.</td>\n</tr>\n<tr>\n<td><code>maxMinute</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the maximum selectable minute.</td>\n</tr>\n<tr>\n<td><code>minuteInterval</code></td>\n<td><code>Number</code></td>\n<td>Gets or sets the selectable minute interval. For example: 5 or 15 minutes. Default value: <code>1</code>.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>timeChange</code></td>\n<td>Emitted when the selected time changes.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/widget/TimePicker\"><code>android.widget.TimePicker</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/uikit/uidatepicker\"><code>UIDatePicker</code></a></td>\n</tr>\n</tbody></table>\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=\"docs#webview\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tWebView\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/classes/_ui_web_view_.webview\">Class Docs</a></div>\n\n\n\n<code><webView></code> is a UI component that lets you show web content in your app. You can pull and show content from a URL or a local HTML file, or you can render static HTML content.\nSee also: <a href=\"docs#htmlview\">HtmlView</a>.\n<div class='code-block'><pre class='language-markup'><code><webView src=\"http://nativescript-vue.org/\" />\n\n<webView src=\"~/html/index.html\" />\n\n<webView src=\"<div><h1>Some static HTML</h1></div>\" /></code></pre></div><h4>Props</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>src</code></td>\n<td><code>String</code></td>\n<td>Gets or sets the displayed web content. Valid values: an absolute URL, the path to a local HTML file, or static HTML.</td>\n</tr>\n</tbody></table>\n<h4>Events</h4><table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>loadStarted</code></td>\n<td>Emitted when the page has started loading in the <code><webView></code>.</td>\n</tr>\n<tr>\n<td><code>loadFinished</code></td>\n<td>Emitted when the page has finished loading in the <code><webView></code>.</td>\n</tr>\n</tbody></table>\n<h4>Native component</h4><table>\n<thead>\n<tr>\n<th>Android</th>\n<th>iOS</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><a href=\"https://developer.android.com/reference/android/webkit/WebView\"><code>android.webkit.WebView</code></a></td>\n<td><a href=\"https://developer.apple.com/documentation/webkit/wkwebview\"><code>WKWebView</code></a></td>\n</tr>\n</tbody></table>\n","metadata":{"title":"Components"},"subsections":[{"slug":"activityindicator","title":"ActivityIndicator"},{"slug":"button","title":"Button"},{"slug":"datepicker","title":"DatePicker"},{"slug":"frame","title":"Frame"},{"slug":"htmlview","title":"HtmlView"},{"slug":"image","title":"Image"},{"slug":"label","title":"Label"},{"slug":"listpicker","title":"ListPicker"},{"slug":"listview","title":"ListView"},{"slug":"page","title":"Page"},{"slug":"progress","title":"Progress"},{"slug":"scrollview","title":"ScrollView"},{"slug":"searchbar","title":"SearchBar"},{"slug":"segmentedbar","title":"SegmentedBar"},{"slug":"slider","title":"Slider"},{"slug":"switch","title":"Switch"},{"slug":"tabview","title":"TabView"},{"slug":"textfield","title":"TextField"},{"slug":"textview","title":"TextView"},{"slug":"timepicker","title":"TimePicker"},{"slug":"webview","title":"WebView"}],"slug":"components","file":"40-components.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=\"docs#actiondialog\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tActionDialog\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#action\">Class Docs</a></div>\n\nThe <code>action()</code> method shows a list of selectable options and a cancellation button. Use it to let the user choose between options or dismiss the selection.\nThe method is part of the <a href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_\"><code>dialogs</code> module</a>.\n<h4>Basic use</h4><div class='code-block'><pre class='language-javascript'><code>import { action } from 'tns-core-modules/ui/dialogs'\n\naction(\"Your message\", \"Cancel button text\", [\"Option1\", \"Option2\"])\n .then(result => {\n\tconsole.log(result);\n });</code></pre></div>\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=\"docs#alertdialog\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tAlertDialog\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#alert\">Class Docs</a></div>\n\nThe <code>alert()</code> method shows a message and an OK button. Use it to show information and notifications that do not require an action from the user.\nThe method is part of the <a href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_\"><code>dialogs</code> module</a>.\n<h4>Basic use</h4><div class='code-block'><pre class='language-javascript'><code>import { alert } from 'tns-core-modules/ui/dialogs'\n\nalert('Your message')\n .then(() => {\n\tconsole.log(\"Alert dialog closed.\");\n });</code></pre></div><h4>Configure dialog options</h4><div class='code-block'><pre class='language-javascript'><code>alert({\n title: \"Your title\",\n message: \"Your message\",\n okButtonText: \"Your OK button text\"\n}).then(() => {\n console.log(\"Alert dialog closed\");\n});</code></pre></div>\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=\"docs#confirmdialog\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tConfirmDialog\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#confirm\">Class Docs</a></div>\n\nThe <code>confirm()</code> method shows a confirmation message and Cancel and OK buttons.\nThe method is part of the <a href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_\"><code>dialogs</code> module</a>.\n<h4>Basic use</h4><div class='code-block'><pre class='language-javascript'><code>\nimport { confirm } from 'tns-core-modules/ui/dialogs'\n\nconfirm('Your message')\n .then(result => {\n\tconsole.log(result);\n });</code></pre></div><h4>Configure dialog options</h4><div class='code-block'><pre class='language-javascript'><code>confirm({\n title: \"Your title\",\n message: \"Your message\",\n okButtonText: \"Your OK button text\",\n cancelButtonText: \"Your Cancel text\"\n}).then(result => {\n console.log(result);\n});</code></pre></div>\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=\"docs#logindialog\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tLoginDialog\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#login\">Class Docs</a></div>\n\nThe <code>login()</code> method shows a dialog where the user can provide login credentials.\nThe method is part of the <a href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_\"><code>dialogs</code> module</a>.\n<h4>Basic use</h4><div class='code-block'><pre class='language-javascript'><code>import { login } from 'tns-core-modules/ui/dialogs'\n\nlogin(\"Your message\", \"Username field value\", \"Password field value\").then(result => {\n console.log(`Dialog result: ${result.result}, user: ${result.userName}, pwd: ${result.password}`);\n});</code></pre></div><h4>Configure dialog options</h4><div class='code-block'><pre class='language-javascript'><code>login({\n title: \"Your login title\",\n message: \"Your login message\",\n okButtonText: \"Your OK button text\",\n cancelButtonText: \"Your Cancel button text\",\n userName: \"Username field value\",\n password: \"Password field value\"\n}).then(result => {\n console.log(`Dialog result: ${result.result}, user: ${result.userName}, pwd: ${result.password}`);\n});</code></pre></div>\n\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t 5FA8 \n\t\t\t\t\t\t\t<a href=\"docs#promptdialog\" class=\"anchor\" aria-hidden=\"true\"></a>\n\t\t\t\t\t\t\tPromptDialog\n\t\t\t\t\t\t</h3><div class=\"nsref\"><a title=\"NativeScript Documentation\" href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_#prompt\">Class Docs</a></div>\n\n\n\nThe <code>prompt()</code> method shows a dialog with a single-line field for user input.\nThe method is part of the <a href=\"https://docs.nativescript.org/api-reference/modules/_ui_dialogs_\"><code>dialogs</code> module</a>.\n<h4>Basic use</h4><div class='code-block'><pre class='language-javascript'><code>prompt('Your message to the user', 'Suggested user input')\n.then(result => {\n console.log(`Dialog result: ${result.result}, text: ${result.text}`)\n})</code></pre></div><h4>Configure dialog options</h4><div class='code-block'><pre class='language-javascript'><code>import { prompt } from 'tns-core-modules/ui/dialogs'\n\nprompt({\n title: \"Your dialog title\",\n message: \"Your message\",\n okButtonText: \"Your OK button text\",\n cancelButtonText: \"Your Cancel button text\",\n defaultText: \"Suggested user input\",\n}).then(result => {\n console.log(`Dialog result: ${result.result}, text: ${result.text}`)\n});</code></pre></div><h4>Configure input type</h4>You can also configure the input type using <code>inputType</code>. You can choose between plain text (<code>text</code>), email-enabled input (<code>email</code>), and password-like hidden input (<code>password</code>).\n<div class='code-block'><pre class='language-javascript'><code>inputType: inputType.text\ninputType: inputType.email\ninputType: inputType.password</code></pre></div><h4>Example</h4><div class='code-block'><pre class='language-javascript'><code>import { inputType } from 'tns-core-modules/ui/dialogs'\n\nprompt({\n title: \"Email Prompt\",\n message: \"Provide your email address:\",\n okButtonText: \"OK\",\n cancelButtonText: \"Cancel\",\n defaultText: \"name@domain.com\",\n inputType: dialogs.inputType.email\n}).then(result => {\n console.log(`Dialog result: ${result.result}, text: ${result.text}`)\n});</code></pre></div>","metadata":{"title":"Dialogs"},"subsections":[{"slug":"actiondialog","title":"ActionDialog"},{"slug":"alertdialog","title":"AlertDialog"},{"slug":"confirmdialog","title":"ConfirmDialog"},{"slug":"logindialog","title":"LoginDialog"},{"slug":"promptdialog","title":"PromptDialog"}],"slug":"dialogs","file":"50-dialogs.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

docs.json

Latest commit

History

docs.json

File metadata and controls