](https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1)
-[
](https://play.google.com/store/apps/details?id=org.nativescript.play)
-
-## Create a new Svelte-Native app
-
-The easiest way to get started is to use the [latest template app](https://github.com/halfnelson/svelte-native-template):
-
-```bash
-$ npx degit halfnelson/svelte-native-template myapp
-```
-
-A fresh svelte-native app will be found in the `myapp` folder.
-
-## Launch It
-
-Launch your app with:
-
-```bash
-$ cd myapp
-$ ns preview
-```
-
-You will need to scan the ascii art QR code using the "Playground" app you installed previously.
-
-
-
-## Draw the rest of the owl
-
-You can check out the [Grocery App Example](https://github.com/halfnelson/svelte-native-grocery) for an example of a larger application.
-
-Jump into the [Docs](/docs) or follow the [Tutorial](/tutorial) to get started.
\ No newline at end of file
diff --git a/docs_src/content/blog/2019-09-19-hot-module-reloading.md b/docs_src/content/blog/2019-09-19-hot-module-reloading.md
deleted file mode 100644
index 878695b..0000000
--- a/docs_src/content/blog/2019-09-19-hot-module-reloading.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Hot Module Reloading
-description: Trying out experimental HMR
-pubdate: 2019-09-19
-author: Halfnelson
-authorURL: https://twitter.com/halfnelson_au/
----
-
-An awesome member of the Svelte community [Rixo](https://github.com/rixo) has implemented preliminary support for hot module reloading in Svelte. This is a quick guide on how to set it up in your Svelte Native project
-
-## Start with a Svelte Native Project
-
-Use an existing one or start a new one by following the [Getting Started Guide](/blog/svelte-native-quick-start)
-
-### Change svelte-loader to use Rixo's Fork
-
-Edit `package.json` and replace
-
-```js
- "svelte-loader": "github:halfnelson/svelte-loader#fix-virtual-purge"
-```
-
-with
-
-
-```js
- "svelte-loader": "github:rixo/svelte-loader#hmr"
-```
-
-### Enable the hmr option in webpack
-
-Edit `webpack.config.js` and replace
-
-```js
- {
- test: /\.svelte$/,
- exclude: /node_modules/,
- use: [
- {
- loader: 'svelte-loader',
- options: {
- preprocess: svelteNativePreprocessor()
- }
- }
- ]
- }
-```
-
-with
-
-```js
- {
- test: /\.svelte$/,
- exclude: /node_modules/,
- use: [
- {
- loader: 'svelte-loader',
- options: {
- preprocess: svelteNativePreprocessor(),
- hotReload: true,
- hotOptions: {
- native: true
- }
- }
- }
- ]
- }
-```
-
-### Take it for a test toast
-
-That should be it. Fire up your app with
-
-```js
-tns run android
-```
-
-and make a change and watch it update.
-
-
-
-
diff --git a/docs_src/content/docs/0-important-note.md b/docs_src/content/docs/0-important-note.md
deleted file mode 100644
index d285b5b..0000000
--- a/docs_src/content/docs/0-important-note.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Important note
----
-
-### This is a community project
-
-Svelte Native is developed by members of 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.
-
-Yet.
diff --git a/docs_src/content/docs/00-introduction.md b/docs_src/content/docs/00-introduction.md
deleted file mode 100644
index 20f61c1..0000000
--- a/docs_src/content/docs/00-introduction.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Introduction
----
-
-#### What is NativeScript?
-
-[NativeScript](https://www.nativescript.org/) is an open-source framework to develop apps on the Apple iOS and Android platforms. It is open source and can be found on [github](https://github.com/nativescript/nativescript).
-
-#### What is Svelte?
-
-[Svelte](https://svelte.technology) 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.
-
-Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
-
-#### What is Svelte Native
-
-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.
-
-[Read the introductory blog post](/blog/svelte-goes-native).
-
-
\ No newline at end of file
diff --git a/docs_src/content/docs/01-getting-started.md b/docs_src/content/docs/01-getting-started.md
deleted file mode 100644
index 8135988..0000000
--- a/docs_src/content/docs/01-getting-started.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Getting Started
----
-
-### Quick Start
-
-#### Install Nativescript
-
-Svelte-Native works on top of NativeScript. To install NativeScript:
-
-```bash
-$ npm install -g nativescript
-```
-
-Check it worked by running `ns`:
-
-
-
-#### Install the NativeScript Playground app
-
-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 Nativescript have created the NativeScript playground app. This allows us to run Svelte-Native application code without having to build the full mobile application.
-
-[
-
-### Advanced Install
-
-To compile your apps for distribution, you will need to set up your system for local compilation.
-
-Svelte-Native runs on top of an unmodified NativeScript platform. Installation instructions for your operating system can be found in the [Native Script Guide](https://docs.nativescript.org/start/quick-setup).
-
-Check you have the NativeScript build environment configured correctly by using the Nativescript doctor command:
-
-```bash
-$ ns doctor
-```
-
-Once that is happy you can do a full compile and launch of your application with
-
-```bash
-$ ns run android
-```
-
-or
-
-```bash
-$ ns run ios
-```
-
-
-### Using Nativescript Plugins
-
-Since Svelte Native uses unmodified NativeScript, it is possible to use NativeScript plugins, such as those found on the [marketplace](https://market.nativescript.org/).
-
-Follow the instructions for the component and if there isn't instructions for svelte, look for the Nativescript Vue instructions involving `registerElement`.
-Register the element using `registerNativeViewElement(tagName, ()=> NativeConstructor)`
-
-eg for [Nativescript Mapbox Plugin](https://market.nativescript.org/plugins/nativescript-mapbox)
-
-```bash
-$ ns plugin add nativescript-mapbox
-```
-
-in app.ts before app startup
-
-```js
-import { registerNativeViewElement } from 'svelte-native/dom'
-
-registerNativeViewElement("mapBox", () => require("nativescript-mapbox").MapboxView);
-```
-
-You can now use the `
-
-#### Overlapping elements
-
-The following example creates a group of overlapping items.
-
-```html
-
-
-#### Additional children props
-
-When an element is a direct child of `To dock a child element to the center, it must be the **last child** of the container and you must set the `stretchLastChild` property of the parent to `true`. -* Enforces layout constraints to its children. -* Resizes its children at runtime when its size changes. - -#### Examples - -#### Dock to every side without stretching the last child - -The following example creates a frame-like layout consisting of 4 elements, position at the 4 edges of the screen. - -```html -
-
-#### Dock to every side and stretch the last child
-
-The following example shows how `stretchLastChild` affects the positioning of child elements in a `DockLayout` container. The last child (`bottom`) is stretched to take up all the remaining space after positioning the first three elements.
-
-```html
-
-
-#### Dock to every side and the center
-
-The following example creates a `
-
-#### Dock multiple children to the same side
-
-The following example creates a single line of 4 elements that stretch across the entire height and width of the screen.
-
-```html
-
-
-#### Props
-
-| Name | Type | Description |
-|------|------|-------------|
-| `stretchLastChild` | `Boolean` | Enables or disables stretching the last child to fit the remaining space.
-
-#### Additional children props
-
-When an element is a direct child of `Valid values: `top`, `right`, `bottom`, or `left`. - -### FlexboxLayout - -`
-
-#### Column flex layout
-
-The following example creates a column of three equally-sized elements that span across the entire width of the screen.
-
-```html
-
-
-#### Row flex layout with items aligned to `flex-start`
-
-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.
-
-```html
-
-
-#### Row flex layout with custom order
-
-The following example creates a row of three items placed at the top of the screen. Items are placed in a customized order.
-
-```html
-
-
-#### Row flex layout with wrapping
-
-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.
-
-```html
-
-
-#### Column flex layout with reverse order and items with a different `alignSelf`
-
-The following example shows how to use:
-
-* `flexDirection` to place items in a column, starting from the bottom.
-* `justifyContent` to create equal spacing between the vertically placed items.
-* `alignSelf` to modify the position of items across the main axis.
-
-```html
-
-
-#### Props
-
-| Name | Type | Description |
-|------|------|-------------|
-`flexDirection` | `String` | Sets the direction for placing child elements in the flexbox container.Valid values:
`row` (horizontal, left to right),
`row-reverse` (horizontal, right to left),
`column` (vertical, top to bottom), and
`column-reverse` (vertical, bottom to top).
Default value: `row`. -`flexWrap` | `String` | 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:
`nowrap` (single line which may cause the container to overflow),
`wrap` (multiple lines, direction is defined by `flexDirection`), and
`wrap-reverse` (multiple lines, opposite to the direction defined by `flexDirection`).
Default value: `nowrap`. -`justifyContent` | `String` | 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:
`flex-start` (items are packed toward the start line),
`flex-end` (items are packed toward the end line),
`center` (items are centered along the line),
`space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and
`space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. -`alignItems` | `String` | (Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as `justifyContent` for the cross axis.
Valid values:
`flex-start` (cross-start margin edge of the items is placed on the cross-start line),
`flex-end` (cross-end margin edge of the items is placed on the cross-end line),
`center` (items are centered оn the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (items are stretched to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. -`alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values:
`flex-start` (lines are packed to the start of the container),
`flex-end` (lines are packed to the end of the container),
`center` (lines are packed to the center of the container),
`space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end),
`space-around` (lines are evenly distributed with equal space between them), and
`stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. - -#### Additional children props - -When an element is a direct child of `
Valid values:
`flex-start` (cross-start margin edge of the item is placed on the cross-start line),
`flex-end` (cross-end margin edge of the item is placed on the cross-end line),
`center` (item is centered on the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (item is stretched to fill the container but respects `min-width` and `max-width`).
Default value: `stretch`. -`flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. - -### GridLayout - -`
-
-#### Grid layout with star sizing
-
-The following example creates a grid with responsive design, where space is alotted proportionally to child elements.
-
-```html
-
-
-#### Grid layout with fixed and auto sizing
-
-The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height.
-
-```html
-
-
-#### Grid layout with mixed sizing and merged cells
-
-The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells.
-
-```html
-
-
-#### Props
-
-| Name | Type | Description |
-|------|------|-------------|
-`columns` | `String` | A string value representing column widths delimited with commas.Valid values: an absolute number, `auto`, or `*`.
A number indicates an absolute column width. `auto` makes the column as wide as its widest child. `*` makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. -`rows` | `String` | A string value representing row heights delimited with commas.
Valid values: an absolute number, `auto`, or `*`.
A number indicates an absolute row height. `auto` makes the row as tall as its tallest child. `*` makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. - -#### Additional children props - -When an element is a direct child of `
The first row is indicated by `0`. -`col` | `Number` | Specifies the column for the element. Combined with a `row` property, specifies the cell coordinates of the element.
The first column is indicated by `0`. -`rowSpan` | `Number` | Specifies the number of rows that this element spans across. -`colSpan` | `Number` | Specifies the number of columns that this element spans across. - -### StackLayout - -`
-
-#### Horizontal stacking
-
-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.
-
-```html
-
-
-#### Stack layout with horizontally aligned children
-
-The following example creates a diagonal stack of items with responsive sizes. Items are vertically stacked.
-
-```html
-
-
-#### Horizontal stack layout with vertically aligned children
-
-The following example creates a diagonal stack of items with responsive sizes. Items are horizontally stacked.
-
-```html
-
-
-#### Props
-
-| Name | Type | Description |
-|------|------|-------------|
-`orientation` | `String` | Specifies the stacking direction.Valid values: `vertical` and `horizontal`.
Default value: `vertical`. - -### WrapLayout - -`
-
-#### Vertical wrap layout
-
-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.
-
-```html
-
-
-#### Props
-
-| Name | Type | Description |
-|------|------|-------------|
-`orientation` | `String` | Specifies the stacking direction.Valid values: `horizontal` (arranges items in rows) and `vertical` (arranges items in columns).
Default value: `horizontal`. -`itemWidth` | `Number` | Sets the width used to measure and layout each child.
Default value: `Number.NaN`, which does not restrict children. -`itemHeight` | `Number` | Sets the height used to measure and layout each child.
Default value is `Number.NaN`, which does not restrict children. diff --git a/docs_src/content/docs/35-action-bars.md b/docs_src/content/docs/35-action-bars.md deleted file mode 100644 index 6306c19..0000000 --- a/docs_src/content/docs/35-action-bars.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: ActionBars ---- - -### ActionBar - - - -`
Valid values: `left` or `right`.
Default value is `left`. -| `android.position` | `String` | Gets or sets the position of the `ActionItem` within the `ActionBar` for Android.
Valid values:
`actionBar` (places the item in the ActionBar),
`popup` (places the item in the options menu; renders items as text), and
`actionBarIfRoom` (places the item in the `ActionBar` if there is enough room for it there; otherwise, places it in the options menu).
Default value is `actionBar`. - -#### Events - -| Name | Description | -|------|-------------| -| `tap`| Emitted when the `ActionItem` is tapped. - -#### Native component - -| Android | iOS | -|---------|-----| -| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem) - - -### NavigationButton - - - -`