Native

In this tutorial we will cover tags and some useful scripts of svelte native and native script overalll, the Official tutorial also covers everything about native script. The svelte native has different tags compared to normal html tags and also the text input works differently in it, lets find out

Svelte Native has variety of tags that serve different purposes and have different functionality.

When running the app in preview you can press R key to restart the development process as sometimes the changes are stuck and can't be seen in the mobile, also the following templates that are provided should be nested in <frame><page> {Your code/tags here!} </page></frame>, remember not to nest two <page></page> as it may result in error lets see and example :

<frame>
	<page>
		<Your rest of the tags>
	</page>
</frame>

1. actionBar

Represents the apps top bar.

<page>
	<actionBar title="My App"/>
</page>

2. actionItem

A button in the action bar

<page>
	<actionBar title="My App">
		<actionItem text="Info" />
	</actionBar>
</page>

3. activityIndicator

Shows a spinning loader.

<page>
	<activityIndicator busy={true} />
</page>

4. button

A tappable button.

<page>
	<button text="Click Me" />
</page>

5. datePicker

A date selection component.

<page>
	<datePicker />
</page>

6. dockLayout

Layout where children can be docked to a specific side.

<page>
	<dockLayout>
		<label dock="top" text="Top Dock" />
		<label dock="bottom" text="Bottom Dock" />
	</dockLayout>
</page>

7. flexboxLayout

A layout based on css flexbox

<page>
	<flexboxLayout>
		<label text="Item 1" />
		<label text="Item 2" />
	</flexboxLayout>
</page>

8. frame

The main navigation container.

<frame>
	<page>
		<label text="Home Page" />
	</page>
</frame>

9. gridLayout

Grid-based layout with rows and columns.

<page>
	<gridLayout rows="auto, auto" columns="auto, auto">
		<label row="0" col="0" text="Row 0, Col 0" />
		<label row="0" col="1" text="Row 0, Col 1" />
		<label row="1" col="0" text="Row 1, Col 0" />
		<label row="1" col="1" text="Row 1, Col 1" />
	</gridLayout>
</page>

10. htmlView

Displays HTML content.

<page>
	<htmlView html="<h1>Hello World</h1><p>This is HTML content.</p>" />
</page>

11. image

Displays an image.

<page>
	<image src="~/images/logo.png" />
</page>

12. listPicker

A dropdown list.

<page>
	<listPicker items={['Item 1', 'Item 2', 'Item 3']} />
</page>

13. listView

A scrollable list of items.

<page>
	<listView items={['Item 1', 'Item 2', 'Item 3']}>
		{#each items as item}
			<label text={item} />
		{/each}
	</listView>
</page>

14. navigationButton

A button to navigate back.

<page>
	<actionBar title="Page Title">
		<navigationButton text="Back" />
	</actionBar>
</page>

15. label

a label that represents some text.

<page>
	<label text="Hello, World!" />
</page>

16. progress

A progress bar.

<page>
	<progress value="50" maxValue="100" />
</page>

17. proxyViewContainer

A container that proxies its children.

<page>
	<proxyViewContainer>
		<label text="Proxy View" />
	</proxyViewContainer>
</page>

18. rootLayout

The root layout of the app.

<rootLayout>
	<label text="Root Layout Content" />
</rootLayout>

19. scrollView

A scrollable container.

<page>
	<scrollView>
		<label text="Scrollable content" />
	</scrollView>
</page>

20. searchBar

A search input

<page>
	<searchBar hint="Search here..." />
</page>

21. segmentedBar

A segment control and segment item.

<page>
	<segmentedBar>
		<segmentedBarItem title="Tab 1" />
		<segmentedBarItem title="Tab 2" />
	</segmentedBar>
</page>

22. slider

A control for selecting value from a given range.

<page>
	<slider minValue="0" maxValue="100" value="50" />
</page>

23. formattedString

Enables rich text formatting.

<page>
	<label>
		<formattedString>
			<span text="Normal " />
			<span text="Bold" fontWeight="bold" />
		</formattedString>
	</label>
</page>

24. stackLayout

A layout where children are stacked vertically.

<page>
	<stackLayout>
		<label text="Item 1" />
		<label text="Item 2" />
	</stackLayout>
</page>

25. switch

A toggle switch.

<page>
	<switch checked={true} />
</page>

26. tabView

A container with multiple tabs.

<page>
	<tabView>
		<tabViewItem title="Tab 1">
			<label text="Content for Tab 1" />
		</tabViewItem>
		<tabViewItem title="Tab 2">
			<label text="Content for Tab 2" />
		</tabViewItem>
	</tabView>
</page>

27. tabViewItem

items for tab view container

<page>
	<tabView>
		<tabViewItem title="Tab 1">
			<label text="Content for Tab 1" />
		</tabViewItem>
	</tabView>
</page>

28. textField

A single-line text input field.

<page>
	<textField hint="Enter text here" />
</page>

29. textView

multi-line text input field.

<page>
	<textView hint="Enter long text here" />
</page>

30. timePicker

A time selection component.

<page>
	<timePicker />
</page>

31. webView

A component to display web content.

<page>
	<webView src="https://www.example.com" />
</page>

32. wrapLayout

A layout that wraps its children in a new row or column when they exceed the available space.

<page>
	<wrapLayout>
		<label text="Item 1" />
		<label text="Item 2" />
		<label text="Item 3" />
		<label text="Item 4" />
	</wrapLayout>
</page>

Svelte JS

Svelte Native

Tanishq Dhote