Важное замечание

Это проект сообщества

Svelte Native разрабатывается членами сообщества Svelte, которые хотят создавать приложения для мобильных платформ с такой же лёгкостю и лаконичностью, которую обеспечивает Svelte при разработке web-приложений. Этот проект официально не поддерживается ни проектом NativeScript, ни проектом Svelte.

Пока что.

Введение

Что такое NativeScript?

NativeScript — это фреймворк для разработки приложений на платформах Apple iOS и Android. У него открытый исходный код, который можно найти на GitHub

Что такое Svelte?

Svelte — это совершенно новый подход к созданию web-приложений. В то время как традиционные фреймворки, вроде React и Vue, выполняют основную часть своей работы в браузере, Svelte делает эту работу на этапе компиляции при сборке приложения.

Вместо того, чтобы использовать прожорливые методы, вроде анализа изменений в Virtual DOM, Svelte создаёт код, который точечно обновляет DOM при изменении состояния приложения.

Что такое Svelte Native

Svelte Native — это инструмент для создания мобильных приложений. Он сочетает в себе доступ NativeScript к нативным компонентам платформ с быстрыми и эффективными обновлениями представлений в Svelte, что позволяет создавать собственные мобильные приложения с использованием таких инструментов, как HTML, CSS и Javascript.

Прочитайте вводную статью в блоге.

NativeScript + Svelte = Svelte Native

Начало работы

Лёгкий старт

Установите Nativescript

Svelte-Native работает поверх NativeScript. Чтобы установить NativeScript выполните:

$ npm install -g nativescript

Проверьте, что он установился, запустив команду tns:

Success

Установите мобильное приложение NativeScript Playground

Svelte-Native действительно является нативным, поэтому для его работы требуется мобильное устройство. Настройка сборки приложения под iOS или Android не очень простая процедура, поэтому мастера из Progress создали приложение NativeScript Playground. Это позволяет нам запускать код приложения Svelte-Native без необходимости сборки полноценного мобильного приложения.

Скачать а App Store Скачать в Google Play

Создайте новое приложение Svelte-Native

Самый простой способ начать — использовать последнюю веерсию шаблона приложения

$ degit halfnelson/svelte-native-template myapp

Голое приложение svelte-native будет находится в папке myapp

Запустите приложение

Запустите приложение, которое вы только что создали:

$ cd myapp
$ tns preview --bundle

В терминале появится ASCII QR-код, который нужно будет отсканировать в приложении NativeScript Playground, которое вы установили ранее.

Запущенное приложение

Расширенная установка

Чтобы создавать приложения готовые для распространения, вам нужно будет настроить систему для локальной компиляции.

Svelte-Native работает поверх немодифицированной платформы NativeScript. Инструкции по установке для вашей операционной системы можно найти в Руководстве по Native Script

Проверить, что настройка среды сборки NativeScript была выполнена правильно, можно с помощью Nativescript команды doctor:

$  tns doctor

Когда все будет в порядке, вы можете выполнить полную компиляцию и запуск приложения следующим образом:

$ tns run android --bundle

или

$ tns run ios --bundle

Навигация/Маршруты

Так как Svelte Native — это тонкая прослойка между Svelte и NativeScript. Лучше всего, если вы ознакомитесь с основной концепцией маршрутизации в NativeScript

Маршрутизация в Svelte Native устроена очень похожим образом. Модуль svelte-native предоставляет следующие функции:

navigate

Укажите страницу назначения в обязательной опции page, которая принимает экземпляр компонента Svelte.

App.svelte
<page>
	<actionBar title="Master" />
	<stackLayout>
		<button text="To Details directly" on:tap="{ () => navigate({ page: Detail }) }" />
	</stackLayout>
</page>

<script>
	import Detail from './Detail.svelte'
	import { navigate } from 'svelte-native'
</script>

Передача свойств в компонент

Вы можете передать свойства, требуемые компонентом Svelte, используя опцию props.

App.svelte
<page>
	<actionBar title="Master" />
	<stackLayout>
		<button text="To Details directly" on:tap="{showDetailWithProps}" />
	</stackLayout>
</page>

<script>
	import Detail from './Detail.svelte'
	import { navigate } from 'svelte-native'

	function showDetailWithProps() {
		navigate({ 
			page: Detail,
			props: { message: "Hello from master" }
		});
	}
</script>

Указание фрейма

Каждый элемент <frame> имеет свой собственный стек навигации. Если вы используете несколько фреймов, вы можете явно указать, в каком фрейме должна происходить навигация. Например, такая необходимость может возникнуть в ситуации, когда есть приложение с кнопкой на боковой панели, которая сменяет страницу в основной области. Это можно сделать, добавив опцию frame:

navigate({ 
	page: Detail,
	frame: '<id, ссылка или экземпляр>'
});

Значениями параметра frame могут быть:

  • идентификатор id компонента <frame> (например: <frame id="main-frame">)
  • ссылка на элемент <frame> (например: <frame bind:this="{mainFrame}">)
  • экземпляр объекта NativeScript Frame.

Если фрейм не указан, навигация будет выполняться в самом верхнем фрейме.

Другие опции

Для получения дополнительной информации об опциях, которые вы можете передать, см. раздел NavigationEntry.

goBack

Для перехода на предыдущую страницу, используйте функцию goBack.

App.svelte
<page>
  <actionBar title="Detail"/>
  <stackLayout>
	<button text="Back to Master" on:tap="{goBack}" />
  </stackLayout>
</page>

<script>
import { goBack } from 'svelte-native'
</script>

Чтобы переход назад произошел в другом фрейме, передайте ссылку или идентификатор кадра в опцию frame.

  goBack({frame: 'sub-nav-frame'})

goBack по умолчанию возвращается на предыдущую страницу, но вы можете вернуться сразу на несколько страниц назад, если укажите в опциях ссылку на страницу page.

  goBack({to: options_page_ref})

showModal

Для отображения страницы или компонента в модальном окне используйте функцию showModal. Укажите страницу, которую нужно открыть опцией page, а свойства передайте в props (как в navigate).

App.svelte
<page>
   <actionBar title="Master" />
   <stackLayout>
	 <button text="Open Modal" on:tap="{launchModal}" />
   </stackLayout>
</page>


<script>
	import DetailPage from './DetailPage.svelte'
	import { showModal } from 'svelte-native'
	function launchModal() {
		showModal({ page: DetailPage, props: { msg: 'hi' } })
	}
</script>
DetailPage.svelte
<frame id="detail-page-frame">
  <page>

  </page>
</frame>

Другие доступные параметры напрямую соответствуют параметрам в ShowModalOptions и передаются в базовый метод NativeScript showModal.

Функция showModal возвращает промис, который выполняется, когда что-либо возвращается функцией closeModal.

ПРИМИЧАНИЕ Модальное окно открывается в новом контексте навигации. Если вам требуется совершить навигацию в приложении из модального окна или показать панель действий, вам нужно будет обернуть целевую страницу в элемент frame. Если вам не нужна какая-либо навигация, то в этом нет необходимости.

closeModal

Функция closeModal закрывает текущее модальное окно и опционально возвращает значение туда, откуда была вызвана функция showModal в виде результата промиса.

App.svelte
<page>
   <actionBar title="Master" />
   <stackLayout>
	 <button text="Open Modal" on:tap="{launchModal}" />
	 <label text="{modalResult}" />
   </stackLayout>
</page>
<script>
	import DetailPage from './DetailPage.svelte'
	import { showModal } from 'svelte-native'

	let modalResult = "Waiting for modal"
	async function launchModal() {
		let result = await showModal({ page: DetailPage, props: { msg: 'hi' } })
		modalResult = `got result: ${result}`
	}
</script>
DetailPage.svelte
<frame id="detail-page-frame">
  <page>
	<button text="Close me" on:tap="{ () => closeModal('hi from modal') }" />
  </page>
</frame>
<script>
  import { closeModal } from 'svelte-native'
</script>

Утилиты

Компонент Template

Svelte-компонент <Template> позволяет определить разметку, которая будет повторно использоваться, в качестве шаблона. На данный момент он используется для отрисовки пунктов в компоненте <listView>.

Простое использование

<page>
  <listView items="{items}">
	<Template let:item={i}>
	  <label text="{i}" />
	</Template>
  </listView>
</page>
<script>
  import { Template } from 'svelte-native/components'
  let items = ['one', 'two', 'three']
</script>

ПРИМЕЧАНИЕ Элемент <Template> пишется с заглавной буквы T и импортируется изsvelte-native/components потому, что это компонент Svelte, а не элемент NativeScript.

Расширенное использование

Вы можете использовать Template для реализации пользовательских элементов NativeScript, для которых требуется шаблон или несколько шаблонов.

Когда Template рендерится в Svelte, на выходе получается специальный элемент DOM с именем template, у которого есть атрибут component. Реализации элементов NativeScript, такие как listView, ищут внутри себя элементы template и используют компонент для создания и отображения содержимого шаблона.

Любые дополнительные свойства, добавленные в компонент Template, передаются дальше и добавляются в DOM элемент template.

Для конкретного примера этого шаблона см. исходник элемента listView.

Элемент свойства

Некоторые элементы управления NativeScript имеют свойства, значениями которых должны являться представления NativeScript. Чтобы иметь возможность указывать представления непосредственно в разметке, Svelte Native вводит понятие элемент свойства. Этот элемент работает так же, как аналогичное свойство из основной документации NativeScript, т.е. присваивает указанному свойству родительского представления значение первого дочернего элемента внутри этого элемента. Имя тега - это имя родительского элемента, за которым через точку следует имя нужного свойства. Например, <page.actionbar> установит свойство actionbar родительского элемента page.

Пример

Компонент <radSideDrawer> является частью Progress NativeScript UI.

Компонент <radSideDrawer> требует, чтобы свойствам drawerContent и mainContent были присвоены соответствующие экземпляры представлений View. Используя элемент свойства, вы можете сделать это с помощью всего нескольких строк кода:

<radSideDrawer>
  <radSideDrawer.drawerContent>
	<stackLayout />
  </radSideDrawer.drawerContent>
  <radSideDrawer.mainContent>
	<stackLayout />
  </radSideDrawer.mainContent>
</radSideDrawer>

Без элементов свойств вам нужно пройти утомительный и подверженный ошибкам путь:

<radSideDrawer bind:this="{drawer}">
  <stackLayout bind:this="{drawerContent}" />
  <stackLayout bind:this="{mainContent}" />
</radSideDrawer>
  import { onMount } from 'svelte'

  let drawer
  let drawerContent
  let mainContent

  onMount(() => {
	drawer.nativeView.mainContent = mainContent.nativeView
	drawer.nativeView.drawerContent = drawerContent.nativeView
  })

Макеты

AbsoluteLayout

Контейнер <absoluteLayout> является простейшим контейнером макета в NativeScript.

<absoluteLayout> имеет следующее поведение:

  • Использует пару абсолютных left/top координат для позиционирования вложенных элементов.
  • Не применяет никаких ограничений макета для своих дочерних элементов.
  • Изменяет размеры своих потомков во время выполнения, когда его размер изменяется.

Примеры

Макет сетки

В следующем примере создается простая сетка. Для получения дополнительной информации о создании макетов сетки см. GridLayout.

<absoluteLayout backgroundColor="#3c495e">
  <label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#4383b8"/>
  <label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#4383b8"/>
  <label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#4383b8"/>
  <label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#4383b8"/>
</absoluteLayout>

Перекрывающиеся элементы

В следующем примере создается группа перекрывающихся элементов.

<absoluteLayout backgroundColor="#3c495e">
  <label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#286290"/>
  <label text="30,40" left="30" top="40" width="100" height="100" backgroundColor="#4383b8"/>
</absoluteLayout>

Свойства дочерних элементов

У вложенных напрямую в <absoluteLayout> элементов, появляются дополнительные свойства:

Имя Тип Описание
top Number Получает или задаёт расстояние в пикселях между верхним краем дочернего элемента и верхним краем его родительского элемента.
left Number Получает или задаёт расстояние в пикселях между левым краем дочернего элемента и левым краем его родительского элемента.

DockLayout

<DockLayout> — это контейнер макета, который позволяет закреплять дочерние элементы по бокам или по центру макета.

<DockLayout> имеет следующее поведение:

  • Использует свойство dock, чтобы прикрепить свои дочерние элементы кleft, right,top, bottom или центру макета.
    Чтобы прикрепить дочерний элемент к центру, он должен быть последним потомком контейнера, и вы должны установить значение true для свойства stretchLastChild родительского элемента.
  • Применяет ограничения макета для своих дочерних элементов.
  • Изменяет размеры своих потомков во время выполнения, когда его размер изменяется.

Примеры

Прикрепление ко всем сторонам без растягивания последнего потомка

В следующем примере создается рамкообразный макет, состоящий из 4 элементов, расположенных по 4 краям экрана.

<dockLayout stretchLastChild="false" backgroundColor="#3c495e">
  <label text="left" dock="left" width="40" backgroundColor="#4383b8"/>
  <label text="top" dock="top" height="40" backgroundColor="#286290"/>
  <label text="right" dock="right" width="40" backgroundColor="#4383b8"/>
  <label text="bottom" dock="bottom" height="40" backgroundColor="#286290"/>
</dockLayout>

Прикрепление ко всем сторонам и растягивание последнего потомка

В следующем примере показано, как stretchLastChild влияет на расположение дочерних элементов в контейнере DockLayout. Последний дочерний элемент (bottom) растягивается, чтобы занять все оставшееся пространство после размещения первых трех элементов.

<dockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <label text="left" dock="left" width="40" backgroundColor="#4383b8"/>
  <label text="top" dock="top" height="40" backgroundColor="#286290"/>
  <label text="right" dock="right" width="40" backgroundColor="#4383b8"/>
  <label text="bottom" dock="bottom" backgroundColor="#1c486b"/>
</dockLayout>

Прикрепление ко всем сторонам и к центру

В следующем примере создается <dockLayout> из 5 элементов. Первые четыре окружают рамкой центральный элемент.

<dockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <label text="left" dock="left" width="40" backgroundColor="#4383b8"/>
  <label text="top" dock="top" height="40" backgroundColor="#286290"/>
  <label text="right" dock="right" width="40" backgroundColor="#4383b8"/>
  <label text="bottom" dock="bottom" height="40" backgroundColor="#286290"/>
  <label text="center" backgroundColor="#1c486b" />
</dockLayout>

Прикрепление нескольких элементов к одной и той же стороне

В следующем примере создается строка из 4 элементов, которые растягиваются по всей высоте и ширине экрана.

<dockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <label text="left 1" dock="left" width="40" backgroundColor="#4383b8"/>
  <label text="left 2" dock="left" width="40" backgroundColor="#286290"/>
  <label text="left 3" dock="left" width="40" backgroundColor="#1c486b"/>
  <label text="last child" backgroundColor="#4383b8"/>
</dockLayout>

Свойства

Имя Тип Описание
stretchLastChild Boolean Включает или отключает растяжение последнего дочернего элемента до заполнения незанятого пространства.

Свойства дочерних элементов

У вложенных напрямую в <DockLayout> элементов, появляются дополнительные свойства:

Имя Тип Описание
dock String Указывает, к какой стороне прикрепить элемент.
Допустимые значения: top, right, bottom или left.

FlexboxLayout

<FlexboxLayout> является контейнером макета, который обеспечивает примерную реализацию CSS Flexbox. Этот макет позволяет расположить дочерние компоненты как по горизонтали, так и по вертикали.

Примеры

Flex-макет по умолчанию

В следующем примере создается строка из трех элементов одинакового размера, которые растягиваются на всю высоту экрана.

<flexboxLayout backgroundColor="#3c495e">
  <label text="first" width="70" backgroundColor="#4383b8"/>
  <label text="second" width="70" backgroundColor="#1c486b"/>
  <label text="third" width="70" backgroundColor="#286290"/>
</flexboxLayout>

Flex-макет столбцом

В следующем примере создается столбец из трех элементов одинакового размера, которые растягиваются на всю ширину экрана.

<flexboxLayout flexDirection="column" backgroundColor="#3c495e">
  <label text="first" height="70" backgroundColor="#4383b8"/>
  <label text="second" height="70" backgroundColor="#1c486b"/>
  <label text="third" height="70" backgroundColor="#286290"/>
</flexboxLayout>

Flex-макет строкой с элементами, выровненными по flex-start

В следующем примере создается строка из трех элементов, размещенных в верхней части экрана. Элементы размещаются в том порядке, в котором они были объявлены.

<flexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <label text="first" width="70" height="70" backgroundColor="#4383b8"/>
  <label text="second" width="70" height="70" backgroundColor="#1c486b"/>
  <label text="third" width="70" height="70" backgroundColor="#286290"/>
</flexboxLayout>

Flex-макет строкой с заданным порядком

В следующем примере создается строка из трех элементов, размещенных в верхней части экрана. Элементы размещаются в указанном порядке.

<flexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <label text="first" order="2" width="70" height="70" backgroundColor="#4383b8"/>
  <label text="second" order="3" width="70" height="70" backgroundColor="#1c486b"/>
  <label text="third" order="1" width="70" height="70" backgroundColor="#286290"/>
</flexboxLayout>

Flex-макет строкой с переносом

В следующем примере создаются четыре элемента с включенным переносом строк. Когда в строке заканчивается свободное место, контейнер переносит последний элемент на новую строку.

<flexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
  <label text="first" width="30%" backgroundColor="#4383b8"/>
  <label text="second" width="30%" backgroundColor="#1c486b"/>
  <label text="third" width="30%" backgroundColor="#286290"/>
  <label text="fourth" width="30%" backgroundColor="#286290"/>
</flexboxLayout>

Flex-макет столбцом с элементами в обратном порядке и разным значением свойства alignSelf

В следующем примере показано, как использовать:

  • flexDirection для размещения элементов в столбце, начиная снизу.
  • justifyContent для создания равного расстояния между вертикально расположенными элементами.
  • alignSelf для изменения положения элементов относительно главной оси.
<flexboxLayout flexDirection="column-reverse"
			   justifyContent="space-around" backgroundColor="#3c495e">
  <label text="first" height="70" backgroundColor="#4383b8"/>
  <label text="second" alignSelf="center" width="70" height="70" backgroundColor="#1c486b"/>
  <label text="third\nflex-end" alignSelf="flex-end" width="70" height="70" backgroundColor="#286290"/>
  <label text="fourth" height="70" backgroundColor="#286290"/>
</flexboxLayout>

Свойства

Имя Тип Описание
flexDirection String Задаёт направление размещения дочерних элементов в flexbox-контейнере .
Допустимые значения:
row (горизонтально, слева направо),
row-reverse (горизонтально, справа налево),
column (вертикально, сверху вниз),
column-reverse (вертикально, снизу вверх).
По умолчанию: row.
flexWrap String Устанавливает, должны ли дочерние элементы оставаться в одной строке или могут переносится на несколько строк. Если задано несколько строк, также указывает поперечную ось, по которой будут появляться новые строки.
Допустимые значения:
nowrap (единственная строка, которая может выйти за рамки контейнера),
wrap (перенос строк, направление по flexDirection)
wrap-reverse (перенос строк, направление обратное flexDirection).
По умолчанию: nowrap.
justifyContent String Задаёт выравнивание дочерних элементов вдоль главной оси. Может использоваться для равномерного распределения нерастянутых элементов по оси. Также используется для управления выравниванием элементов, когда они выходят за рамки строки.
Допустимые значения:
flex-start (элементы прижимаются к началу контейнера),
flex-end (элементы прижимаются к концу контейнера),
center (элементы выравниваются по центру контейнера),
space-between (элементы равномерно распределены по линии; первый элемент находится в начале контейнера, последний элемент в конце контейнера)
space-around (элементы равномерно распределены по линии с равным пространством вокруг них).
По умолчанию: flex-start.
alignItems String (только Android) Задаёт выравнивание дочерних элемент вдоль поперечной оси текущей линии. Работает как justifyContent, только для поперечной оси.
Допустимые значения:
flex-start (поперечное начало элементов размещается на поперечном начале линии),
flex-end (поперечный конец элементов размещается на поперечном конце линии),
center (элементы центрируются относительно поперечной оси),
baseline (базовая линия всех элементов выравнивается),
stretch (элементы растягиваются по всей поперечной оси контейнера с учётом свойств min-width и max-width).
По умолчанию: stretch.
alignContent String Задаёт выравнивание линий внутри контейнера на поперечной оси, подобно тому, как justifyContent выравнивает отдельные элементы в пределах главной оси.
Это свойство не имеет никакого действия, если имеется только одна линия.
Допустимые значения:
flex-start (линии прижимаются к началу контейнера),
flex-end (линии прижимаются к концу контейнера),
center (линии выравниваются по центру контейнера),
space-between (линии равномерно распределены; первая линия находится в начале контейнера, последняя линия в конце контейнера),
space-around (линии равномерно распределены по линии с равным пространством вокруг них),
stretch (линии растягиваются на всё свободное пространство).
По умолчанию: stretch.

Свойства дочерних элементов

У вложенных напрямую в <FlexboxLayout> элементов, появляются дополнительные свойства:

Имя Тип Описание
order Number Задаёт порядок отображения элемента относительно других элементов.
flexGrow Number Указывает, что элемент может увеличиваться. Задаёт коэффициент размера элемента, относительно других элементов.
flexShrink Number Указывает, что элемент может сжиматься, когда в линии заканчивается свободное место. Устанавливает, насколько элемент будет уменьшен пропорционально остальным дочерним элементам в контейнере. Если не указано, его значение равно 1.
alignSelf String (только Android) Переписывает значение свойства alignItems только для этого элемента.
Допустимые значения:
flex-start (поперечное начало элемента размещается на поперечном начале линии),
flex-end (поперечный конец элемента размещается на поперечном конце линии),
center (элемент центрируется относительно поперечной оси),
baseline (выравнивается по базовой линии),
stretch (элемент растягиваются по всей поперечной оси контейнера с учётом свойств min-width и max-width).
По умолчанию: stretch.
flexWrapBefore Boolean При значении true, заставляет элемент переместится на новую линию. Это свойство не является частю официальной спецификации Flexbox.
По умолчанию: false.

GridLayout

<GridLayout> является контейнером макета, который позволяет упорядочивать дочерние элементы в виде таблицы.

Сетка состоит из строк, столбцов и ячеек. Ячейка может занимать одну или несколько строк и один или несколько столбцов. Она может содержать несколько дочерних элементов, которые могут занимать несколько строк и столбцов и даже перекрывать друг друга.

По умолчанию <GridLayout> имеет один столбец и одну строку. Вы можете добавлять столбцы и строки, настраивая свойства columns и rows. В этих свойствах нужно установить количество столбцов и строк, а также их ширину и высоту. Количество столбцов задаётся, перечислением их ширины через запятую. Количество строк задаётся, перечислением их высоты через запятую.

Вы можете установить фиксированный размер для ширины столбца и высоты строки, либо сделать их 'резиновыми':

  • число: Фиксированный размер.
  • auto: Делает столбец таким же по ширине, как его самый широкий дочерний элемент, или делает ряд таким же по высоте, как его самый высокий дочерний элемент.
  • *: Занимает столько места, сколько останется после заполнения всех столбцов или строк с фиксированным или auto размером.

Примеры

Макет сетки с фиксированным размером

В следующем примере создается простая сетка 2-на-2 с фиксированными шириной столбцов и высотой строк.

<gridLayout columns="115, 115" rows="115, 115">
  <label text="0,0" row="0" col="0" backgroundColor="#4383b8"/>
  <label text="0,1" row="0" col="1" backgroundColor="#1c486b"/>
  <label text="1,0" row="1" col="0" backgroundColor="#286290"/>
  <label text="1,1" row="1" col="1" backgroundColor="#4383b8"/>
</gridLayout>

Макет сетки с резиновым размером

В следующем примере создается сетка с адаптивным дизайном, где пространство распределяется пропорционально значениям со звёздочкой.

<gridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#4383b8"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c486b"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#286290"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#4383b8"/>
</gridLayout>

Макет сетки с фиксированным и auto размером

В следующем примере создается сетка с одним столбцом фиксированной ширины и одним столбцом ширины auto. Строки имеют фиксированную высоту.

<gridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <label text="0,0" row="0" col="0" backgroundColor="#4383b8"/>
  <label text="0,1" row="0" col="1" backgroundColor="#1c486b"/>
  <label text="1,0" row="1" col="0" backgroundColor="#286290"/>
  <label text="1,1" row="1" col="1" backgroundColor="#4383b8"/>
</gridLayout>

Макет сетки со смешанными размерами и объединенными ячейками

В следующем примере создается сложная сетка с адаптивным дизайном, смешанными настройками ширины и высоты и несколькими объединенными ячейками.

<gridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <label text="0,0" row="0" col="0" backgroundColor="#4383b8"/>
  <label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c486b"/>
  <label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#286290"/>
  <label text="1,1" row="1" col="1" backgroundColor="#4383b8"/>
  <label text="1,2" row="1" col="2" backgroundColor="#286290"/>
  <label text="2,1" row="2" col="1" backgroundColor="#1c486b"/>
  <label text="2,2" row="2" col="2" backgroundColor="#4383b8"/>
</gridLayout>

Свойства

Имя Тип Описание
columns String Строковое значение, описывающее ширину столбцов через запятую.
Допустимые значения: число, auto или *.
Число указывает абсолютную ширину столбца. auto задаёт ширину по ширине самого широкого потомка. * указывает, что нужно занять всё свободное пространство по горизонтали, которое пропорционально делится между всеми колонками со звёздочкой. Вы можете задать ширину колонок, например так — 3* и 5*, чтобы разделить пространство в пропорции 3 к 5.
rows String Строковое значение, описывающее высоту строк через запятую.
Допустимые значения: число, auto или *.
Число указывает абсолютную высоту строки. auto задаёт высоту по высоте самого высокого потомка. * указывает, что нужно занять всё свободное пространство по вертикали, которое пропорционально делится между всеми строками со звёздочкой. Вы можете задать высоту строк, например так — 3* и 5*, чтобы разделить пространство в пропорции 3 к 5.

Свойства дочерних элементов

У вложенных напрямую в <GridLayout> элементов, появляются дополнительные свойства:

Имя Тип Описание
row Number Указывает строку для данного элемента. Вместе со свойством col, задаёт координаты ячейки для элемента.
Нумерация строк начинается с 0.
col Number Указывает столбец для данного элемента. Вместе со свойством row задаёт координаты ячейки для элемента.
Нумерация столбцов начинается с 0.
rowSpan Number Определяет количество строк, которые необходимо объединить.
colSpan Number Определяет количество столбцов, которые необходимо объединить.

StackLayout

<stackLayout> является контейнером макетов, который позволяет укладывать вложенные элементы по вертикали (по умолчанию) или по горизонтали.

Примеры

Укладка по умолчанию

В следующем примере создается вертикальная раскладка из 3 элементов одинакового размера. Элементы растягиваются на всю ширину экрана. Элементы размещаются в том порядке, в котором они были объявлены.

<stackLayout backgroundColor="#3c495e">
  <label text="first" height="70" backgroundColor="#4383b8"/>
  <label text="second" height="70" backgroundColor="#286290"/>
  <label text="third" height="70" backgroundColor="#1c486b"/>
</stackLayout>

Укладка по вертикали

В следующем примере создается горизонтальная раскладка из 3 элементов одинакового размера. Элементы растягиваются на всю высоту экрана. Элементы размещаются в том порядке, в котором они были объявлены.

<stackLayout orientation="horizontal" backgroundColor="#3c495e">
  <label text="first" width="70" backgroundColor="#4383b8"/>
  <label text="second" width="70" backgroundColor="#286290"/>
  <label text="third" width="70" backgroundColor="#1c486b"/>
</stackLayout>

Вертикальная укладка с элементами выровненными по горизонтали

В следующем примере создается диагональная раскладка по вертикали элементов с адаптивными размерами.

<stackLayout backgroundColor="#3c495e">
  <label text="left" horizontalAlignment="left"
		 width="33%" height="70" backgroundColor="#4383b8"/>
  <label text="center" horizontalAlignment="center"
		 width="33%" height="70" backgroundColor="#286290"/>
  <label text="right" horizontalAlignment="right"
		 width="33%" height="70" backgroundColor="#1c486b"/>
  <label text="stretch" horizontalAlignment="stretch"
		 height="70" backgroundColor="#4383b8"/>
</stackLayout>

Горизонтальная укладка с элементами выровненными по вертикали

В следующем примере создается диагональная раскладка по горизонтали элементов с адаптивными размерами.

<stackLayout orientation="horizontal" backgroundColor="#3c495e">
  <label text="top" verticalAlignment="top"
		 width="70" height="33%" backgroundColor="#4383b8"/>
  <label text="center" verticalAlignment="center"
		 width="70" height="33%" backgroundColor="#286290"/>
  <label text="bottom" verticalAlignment="bottom"
		 width="70" height="33%" backgroundColor="#1c486b"/>
  <label text="stretch" verticalAlignment="stretch"
		 width="70" backgroundColor="#4383b8"/>
</stackLayout>

Свойства

Имя Тип Описание
orientation String Задаёт направление раскладки
Допустимые значения: vertical и horizontal.
По умолчанию: vertical.

WrapLayout

<WrapLayout> - это контейнер макетов, который позволяет позиционировать элементы в строках или столбцах на основе свойства direction. Когда пространство заполняется элементами, контейнер автоматически переносит следующие элементы в новую строку или столбец.

Примеры

Размещение по умолчанию

В следующем примере создается строка элементов одинакового размера. Когда в строке заканчивается свободное место, контейнер переносит последний элемент в новую строку.

<wrapLayout backgroundColor="#3c495e">
  <label text="first" width="30%" height="30%" backgroundColor="#4383b8"/>
  <label text="second" width="30%" height="30%" backgroundColor="#1c486b"/>
  <label text="third" width="30%" height="30%" backgroundColor="#286290"/>
  <label text="fourth" width="30%" height="30%" backgroundColor="#286290"/>
</wrapLayout>

Размещение в колонках

В следующем примере создается столбец элементов одинакового размера. Когда в строке заканчивается свободное место, контейнер переносит последний элемент в новый столбец.

<wrapLayout orientation="vertical" backgroundColor="#3c495e">
  <label text="first" width="30%" height="30%" backgroundColor="#4383b8"/>
  <label text="second" width="30%" height="30%" backgroundColor="#1c486b"/>
  <label text="third" width="30%" height="30%" backgroundColor="#286290"/>
  <label text="fourth" width="30%" height="30%" backgroundColor="#286290"/>
</wrapLayout>

Свойства

Имя Тип Описание
orientation String Определяет направление укладки элементов.
Допустимые значения: horizontal (упорядочивает элементы в строки) и vertical (упорядочивает элементы в колонки).
По умолчанию: horizontal.
itemWidth Number Устанавливает ширину каждого дочернего элемента.
По умолчанию: Number.NaN, т.е. ширина не ограничивается
itemHeight Number Устанавливает высоту каждого дочернего элемента.
По умолчанию: Number.NaN, т.е. высота не ограничивается

Панель действий

ActionBar

<actionBar> — это UI компонент, который размещает панель инструментов вверху экрана.

Этот компонент является абстракцией NativeScript для app bar в Android и navigation bar в iOS.

Использование заголовка

<actionBar title="MyApp" />

Использование представления заголовка

<actionBar>
  <stackLayout orientation="horizontal">
	<image src="res://icon" width="40" height="40" verticalAlignment="center" />
	<label text="NativeScript" fontSize="24" verticalAlignment="center" />
  </stackLayout>
</actionBar>

Установка иконки приложения для Android

<actionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />

Удаление границы

По умолчанию по низу <actionBar> рисуется граница. В дополнение к границе, на устройствах iOS также применяется фильтр полупрозрачности для <actionBar>.

Для того, чтобы убрать эту стилизацию, установите свойству flat значение true.

<actionBar title="My App" flat="true" />

Свойства

Имя Тип Описание
title String Возвращает или задаёт заголовок, отображаемый на панели.
android.icon String Возвращает или задаёт иконку, которая будет отображена на Android устройствах.
android.iconVisibility String Возвращает или задаёт видимость иконки на Android устройствах.
flat boolean Удаляет границу на Android и убирает полупрозрачность на iOS. По умолчанию: false.

Нативный компонент

Android iOS
android.widget.Toolbar UINavigationBar

ActionItem

<actionItem> — UI компонент, который позволяет добавить кнопки на компонент панели действий <actionBar>.

Основное использование

<actionBar title="My App">
  <actionItem on:tap="{onTapShare}"
	ios.systemIcon="9" ios.position="left"
	android.systemIcon="ic_menu_share" android.position="actionBar" />
  <actionItem on:tap="onTapDelete"
	ios.systemIcon="16" ios.position="right"
	text="delete" android.position="popup" />
</actionBar>

Свойства

Имя Тип Описание
ios.systemIcon Number Возвращает или задаёт иконку кнопки ActionItem для iOS. Значение должно быть числом из Перечисление UIBarButtonSystemItem.
android.systemIcon String Возвращает или задаёт иконку кнопки ActionItem для Android. Значение должно быть именем drawable-ресурса.
ios.position String Возвращает или задаёт позицию кнопки ActionItem на панели ActionBar для iOS.
Допустимые значения: left или right.
По умолчанию: left.
android.position String Возвращает или задаёт позицию ActionItem на панели ActionBar для Android.
Допустимые значения:
actionBar (размещает кнопку в панели действий)
popup (размещает кнопку в меню опций; отрисовывается как текст)
actionBarIfRoom (размещает кнопку в панели действий ActionBar при наличии свободного пространства; иначе, размещает кнопку в меню опций)
По умолчанию: actionBar.

События

Имя Описание
tap Вызывается, когда пользователь тапает по ActionItem.

Нативный компонент

Android iOS
android.widget.Toolbar UINavigationItem

NavigationButton

<navigationButton> — UI компонент, который является абстракцией для кнопки навигации в Android и кнопки 'Назад' в iOS.

Расширяет <actionItem>.

<actionBar title="My App">
  <navigationButton text="Go back" android.systemIcon="ic_menu_back" on:tap="{goBack}" />
</actionBar>

Свойства

Имя Тип Описание
text String (только iOS) Задаёт текст кнопки.
android.systemIcon String (только Android) Задаёт иконку для кнопки. Можно указать любую системную иконку, чьё имя начинается с префикса ic_. Полный список таких иконок можно посмотреть тут: Android класс R.drawable.

События

Имя Описание
tap Вызывается, когда пользователь тапает по <NavigationButton>.

Нативный компонент

Android iOS
android.widget.Toolbar UINavigationItem

Компоненты

ActivityIndicator

<activityIndicator> — UI компонент, показывающий индикатор прогресса, сигнализирующий пользователю об операциях запущенных в фоне.

<activityIndicator busy="{true}" on:busyChange="{{onBusyChanged}}" />

Свойства

Имя Тип Описание
busy Boolean Возвращает или задаёт находится ли индикатор в активном состоянии. При значении true, индикатор отображается.

События

Имя Описание
busyChange Вызывается, когда свойство busy изменяется.

Нативный компонент

Android iOS
android.widget.ProgressBar UIActivityIndicatorView

Button

<button> — UI компонент, который отображает кнопку, которая реагирует на жесты пользователя.

Для дополнительной информации по всем возможным жестам, смотрите Официальную документацию NativeScript.

<button text="Button" on:tap="{onButtonTap}" />

Свойства

Имя Тип Описание
text String Задаёт текст на кнопке.
textWrap Boolean Возвращает или задаёт нужно ли переносить текст на кнопке. Полезно при длинном тексте. По умолчанию:false.

События

Имя Описание
tap Вызывается, когда пользователь тапает по кнопке.

Нативный компонент

Android iOS
android.widget.Button UIButton

DatePicker

<datePicker> — UI компонент, который позволяет пользователю выбрать дату из заданного диапазона.

<datePicker date="{someDate}" />

<datePicker> обеспечивает двухстороннюю привязку данных через директиву bind.

<datePicker bind:date="{selectedDate}" />

См. также: TimePicker.

Свойства

Имя Тип Описание
date Date Возвращает или задаёт полную дату.
minDate Date Возвращает или задаёт минимальную дату, которую можно выбрать.
maxDate Date Возвращает или задаёт максимальную дату, которую можно выбрать.
day Number Возвращает или задаёт день.
month Number Возвращает или задаёт месяц.
year Number Возвращает или задаёт год.

События

Имя Описание
dateChange Вызывается, когда изменяется выбранная дата.

Нативный компонент

Android iOS
android.widget.DatePicker UIDatePicker

Frame

<frame> — UI компонент, который используется для отображения элементов <page>. Любое приложене должно иметь хотя бы один элемент <frame>, обычно играющий роль корневого элемента. Svelte Native создаёт корневой фрейм за вас.

Если вам нужно создать несколько фреймов, вы можете сделать это, поместив их в Макет, например, если нужно, чтобы 2 фрейма были рядом друг с другом.

<gridLayout columns="*, *">
  <frame col="0"/>
  <frame col="1"/>
</gridLayout>

Первый дочерний элемент фрейма становится его страницей по умолчанию. Эта страница отобразится перед какой-либо навигацией во фрейме.

<frame>
  <page>
	<actionBar title="Заголовок страницы по умолчанию" />
	<gridLayout>
	  <label text="Содержимое страницы по умолчанию" />
	</gridLayout>
  </page>
</frame>

В качестве страницы по умолчанию, можно использовать компонент Svelte, если его корневым элементом будет page.

<frame>
  <Home />
</frame>
import Home from './Home.svelte'

Нативный компонент

Android iOS
org.nativescript.widgets.ContentLayout UINavigationController

HtmlView

<htmlView> — UI компонент, который отображает статический HTML контент.

См. также: WebView.

<htmlView html="<div><h1>HtmlView</h1></div>" />

Свойства

Имя Тип Описание
html String HTML разметка, которую нужно показать.

Нативный компонент

Android iOS
android.widget.TextView UITextView

Image

<image> — UI компонент, который показывает изображение из ImageSource или по URL.

В NativeScript символ ~ указывает на директорию где находится приложение.

<image src="~/logo.png" stretch="none" />

Изображения могут загружаться из сети:

<image src="https://svelte-native.technology/media/todoapp/todo-add-item.png" stretch="none" />

Изображения также могут извлекаться из директории App_Resources при помощи префикса res://.

<image src="res://icon" stretch="none" />

NativeScript также поддерживает данные, закодированные в base64

<image src="data:Image/png;base64,iVBORw..." stretch="none" />

Свойства

Имя Тип Описание
src String или ImageSource Возвращает или задаёт источник изображения как URL или ImageSource.
imageSource ImageSource Возвращает или задаёт ImageSource изображения.
tintColor Color (свойство стиля) Задаёт цвет заглушки загружаемого изображения.
stretch Stretch (свойство стиля) Возвращает или задаёт как изображение должно растягиваться в выделенном пространстве.
Допустимые значения: none, aspectFill, aspectFit или fill.
См. подробнее: Stretch.
loadMode Возвращает или задаёт метод загрузки изображений из локальной файловой системы.
Допустимые значения: sync или async.
По умолчанию: async.
См. подробнее: loadMode.

Нативный компонент

Android iOS
android.widget.ImageView UIImageView

Label

<label> — UI компонент, который просто отображает метку с текстом.

ВАЖНО: Компонент <label> совершенно не то же самое, что HTML тег <label>.

<label text="Label" />

Стилизация текста

Если требуется стилизовать часть текста, можно использовать комбинацию элементтов FormattedString и Span.

<label textWrap="{true}">
  <formattedString>
	<span text="В этом тексте есть " />
	<span text="красная " style="color: red" />
	<span text="часть. " />
	<span text="Также, этот кусок написан курсивом, " fontStyle="italic" />
	<span text="а этот кусок жирный." fontWeight="bold" />
  </formattedString>
</label>

Свойства

Имя Тип Описание
text String Возвращает или задаёт текст метки.
textWrap Boolean Возвращает или задаёт нужно ли переносить текст.
По умолчанию: false.

Нативный компонент

Android iOS
android.widget.TextView UILabel

ListPicker

<listPicker> — UI компонент, который позволяет пользователю выбрать значение из предустановленного списка.

<listPicker items="{listOfItems}" selectedIndex="0"
	on:selectedIndexChange="{selectedIndexChanged}" />

<listPicker> обеспечивает двухстороннюю привязку данных через директиву bind.

<listPicker items="{listOfItems}" v-model="selectedItem" />

Свойства

Имя Тип Описание
items Array<string> Возвращает или задаёт элементы, которые будут отображены в списке для выбора.
selectedIndex Number Возвращает или задаёт индекс выбранного элемента.

События

Имя Описание
selectedIndexChange Вызывается, когда выбранное значение (индекс) изменяется.

Нативный компонент

Android iOS
android.widget.NumberPicker UIPickerView

ListView

<listView> — UI компонент, отображает элементы в списке с вертикальной прокруткой. Для настройки отображения элементов списка можно воспользоваться компонентом <Template>.

<listView items="{listOfItems}" on:itemTap="{onItemTap}">
  <Template let:item>
	<!-- Shows the list item label in the default color and style. -->
	<!-- Показывает элемент списка 'label' с цветом и стилями по умолчанию. -->
	<label text="{item}" />
  </Template>
</listView>
<script>
	import { Template } from 'svelte-native/components'
	let listOfItems = ['one','two','three']
	function onItemTap(e) { console.log(e.item) }
</script>

<listView> не перебирает элементы списка, как обычный блок each в Svelte. Вместо этого? <listView> создаёт только необходимые представления для отображения на экране видимых в данный момент элементов и повторно использует представления, которые уже находятся вне экрана при прокрутке. Эта концепция называется view recycling и обычно используется в мобильных приложениях для повышения производительности.

Вы можете использовать событие itemTap, которое содержит индекс выбранного элемента и сам элемент из списка.

onItemTap(event) {
  console.log(event.index)
  console.log(event.item)
}

ПРИМЕЧАНИЕ В отличие от выражений Svelte, компонент listView не будет обновляться если вы передадите ссылку на тот же объект, что уже есть в компоненте(например: items.push('four'); list.items = items). Но он обновится если передать ему ссылку на новый объект (например: items = items.concat('four'); list.items = items)

Свойства

Имя Тип Описание
items Array<any> Массив элементов для отображения в <listView>.
separatorColor Color Задаёт цвет линии разделителя. Чтобы скрыть разделитель, укажите значение transparent.

События

Имя Описание
itemTap Вызывается, когда происходит тап по элементу в <listView>. Для доступа к выбранному элементу используйте event.item.

Нативный компонент

Android iOS
android.widget.ListView UITableView

Page

<page> — UI компонент страницы, которая представляет собой экран приложения. Приложения NativeScript обычно состоят из одной или нескольких страниц <page>, которые могут содержать в себе <actionBar> и другие UI компоненты.

<page>
  <actionBar title="Моё приложение" />
  <gridLayout>
	<label text="Мой контент"/>
  </gridLayout>
</page>

Свойства

Имя Тип Описание
actionBarHidden Boolean Показывает или прячет панель действий <actionBar>.
По умолчанию: false.
backgroundSpanUnderStatusBar Boolean Возвращает или задаёт должен ли фон страницы распространяется также и под строку состояния.
По умолчанию: false.
androidStatusBarBackground Color (только Android) Возвращает или задаёт цвет статусной строки на устройствах Android.
enableSwipeBackNavigation Boolean (только iOS) Возвращает или задаёт можно ли со страницы вернуться свайпом возврата на предыдущий экран в iOS.
По умолчанию: true.
statusBarStyle String Возвращает или задаёт стиль статусной строки.
Допустимые значения:
light,
dark.

События

Имя Описание
navigatedFrom Вызывается после того, как пользователь ушёл с текущей страницы.
navigatedTo Вызывается после того, как пользователь зашёл на текущую страницу.
navigatingFrom Вызывается перед тем, как пользователь уйдёт с текущей страницы.
navigatingTo Вызывается перед тем, как пользователь зайдёт на текущую страницу.

Нативный компонент

Android iOS
org.nativescript.widgets.GridLayout UIViewController

Progress

<progress> — UI компонент, отображающий полосу для индикации прогресса какой-либо задачи.

См. также: ActivityIndicator.

<progress value="{currentProgress}" />

Свойства

Имя Тип Описание
value Number Возвращает или задаёт текущее значение прогресса. Должно быть в диапазоне между 0 и maxValue.
maxValue Number Возвращает или задаёт максимальное значение для индикатора прогресса.
По умолчанию: 100.

События

Имя Описание
valueChange Вызывается, когда изменяется свойство value.

Нативный компонент

Android iOS
android.widget.ProgressBar (indeterminate = false) UIProgressView

ScrollView

<scrollView> — UI компонент, отображающий содержимое в области с прокруткой. Контент может прокручиваться как по вертикали, так и по горизонтали.

<scrollView orientation="horizontal">
  <stackLayout orientation="horizontal">
	<label text="этот" />
	<label text="текст" />
	<label text="при необходимости" />
	<label text="может прокручиваться" />
	<label text="по горизонтали" />
  </stackLayout>
</scrollView>

Свойства

Имя Тип Описание
orientation String Возвращает или задаёт направление в котором контент может быть прокручен: horizontal или vertical.
По умолчанию: vertical.
scrollBarIndicatorVisible Boolean Указывает отображать ли полосу прокрутки.
По умолчанию: true.

События

Имя Описание
scroll Вызывается, когда происходит прокрутка.

Нативный компонент

Android iOS
android.view UIScrollView

SearchBar

<searchBar> — UI компонент, для организации пользовательского интерфейса для ввода поисковых запросов и отправки их соответствующим обработчикам.

<searchBar hint="Найти" text="{searchPhrase}" on:textChange="{onTextChanged}" on:submit="{onSubmit}" />

<searchBar> обеспечивает двухстороннюю привязку данных через директиву bind.

<searchBar v-model="searchQuery" />

Свойства

Имя Тип Описание
hint String Возвращает или задаёт подсказку для пустой строки поиска.
text String Возвращает или задаёт значение поискового запроса.
textFieldBackgroundColor Color Возвращает или задаёт цвет фона поисковой строки.
textFieldHintColor Color Возвращает или задаёт цвет текста подсказки.

События

Имя Описание
textChange Вызывается при изменении текста.
submit Вызывается при отправке поискового запроса.
clear Вызывается, когда строка ввода очищается кнопкой X.

Нативный компонент

Android iOS
android.widget.SearchView UISearchBar

SegmentedBar

<segmentedBar> — UI компонент, который отображает набор кнопок для раздельного выбора. Может отображать текст или изображения.

Отличия от <tabView>:

  • Позиция <segmentedBar> не является фиксированной.
  • Вы можете стилизовать и разместить его в нужном месте страницы или любого другого элемента, вроде меню приложения.
  • Необходимо вручную обрабатывать выбор кнопки и отображать запрашиваемое содержимое.
<segmentedBar>
  <segmentedBarItem title="Первый" />
  <segmentedBarItem title="Второй" />
  <segmentedBarItem title="Третий" />
</segmentedBar>
<segmentedBar items="{listOfItems}" selectedIndex="0"
	on:selectedIndexChange="{onSelectedIndexChange}" />

<segmentedBar> обеспечивает двухстороннюю привязку данных через директиву bind.

<segmentedBar items="{listOfItems}" v-model="selectedItem" />

Свойства

Имя Тип Описание
items Array<segmentedBarItem> Массив элементов для отображения. Представляет собой текст для кнопок или иконки.
Массив должен быть создан ранее.
selectedIndex Number Возвращает или задаёт выбранного элемента.
selectedBackgroundColor Color (свойство стиля) Возвращает или задаёт цвет фона выбранного элемента, для указания цвета фона всего компонента используйте свойство backgroundColor.

События

Имя Описание
selectedIndexChange Вызывается, когда происходит тап по элементу.

Нативный компонент

Android iOS
android.widget.TabHost UISegmentedControl

Slider

<slider> — UI компонент, который представляет собой ползунок для выбора значения из определенного числового диапазона.

<slider value="80" on:valueChange="{onValueChanged}" />

<slider> обеспечивает двухстороннюю привязку данных через директиву bind.

<slider v-model="value" />

Свойства

Имя Тип Описание
value Number Возвращает или задаёт текущее выбранное значение.
По умолчанию: 0.
minValue Number Возвращает или задаёт минимальное значение ползунка.
По умолчанию: 0.
maxValue Number Возвращает или задаёт максимальное значение ползунка.
По умолчанию: 100.

События

Имя Описание
valueChange Вызывается, при изменении значения ползунка

Нативный компонент

Android iOS
android.widget.SeekBar UISlider

Switch

<switch> — UI компонент, который представляет собой переключатель с двумя состояниями.

Состояние по умолчанию равно false или ВЫКЛЮЧЕНО.

<switch checked="{true}" />

<switch> обеспечивает двухстороннюю привязку данных через директиву bind.

<switch v-model="itemEnabled" />

Свойства

Имя Тип Описание
checked Boolean Возвращает или задаёт состояние переключателя.
По умолчанию: false.

События

Имя Описание
checkedChange Вызывается при изменении состояния переключателя.

Нативный компонент

Android iOS
android.widget.Switch UISwitch

TabView

<tabView> компонент навигации, который отображает контент, сгруппированный по вкладкам, и позволяет пользователям переключаться между ними.

<tabView selectedIndex="{selectedIndex}" on:selectedIndexChange="{indexChange}">
  <tabViewItem title="Вкладка 1">
	<label text="Содержимое первой вкладки" />
  </tabViewItem>
  <tabViewItem title="Вкладка 2">
	<label text="Содержимое второй вкладки" />
  </tabViewItem>
</tabView>
function indexChange(args) {
	let newIndex = args.value
	console.log('Индекс выбранной вкладки: ' + newIndex)
}

ПРИМЕЧАНИЕ В настоящее время, элемент TabViewItem ожидает, что у него будет единственный дочерний элемент. В большинстве случаев, контент внутри вкладки оборачивается в один из Макетов.

Добавление иконок на вкладки

<tabView selectedIndex="{selectedIndex}" iosIconRenderingMode="alwaysOriginal">
  <tabViewItem title="Вкладка 1" iconSource="~/images/icon.png">
	<label text="Содержимое первой вкладки" />
  </tabViewItem>
  <tabViewItem title="Вкладка 2" iconSource="~/images/icon.png">
	<label text="Содержимое второй вкладки" />
  </tabViewItem>
</tabView>

ПРИМЕЧАНИЕ В большинстве случаев лучше использовать изображения вместо иконочных шрифтов. Юолее подробно о работе с иконками читайте в Работа с изображениями из папки ресурсов.

Свойства

Имя Тип Описание
selectedIndex Number Возвращает или задаёт индекс выбранной вкладки. По умолчанию 0.
tabTextColor Color (свойство стиля) Возвращает или задаёт цвет текста на вкладках.
tabBackgroundColor Color (свойство стиля) Возвращает или задаёт цвет фона вкладок.
selectedTabTextColor Color (свойство стиля) Возвращает или задаёт цвет текста выбранной вкладки.
androidTabsPosition String Устанавливает позицию вкладок на Android устройствах
Допустимые значения: top или bottom.

События

Имя Описание
selectedIndexChange Вызывается при смене текущей вкладки и содержит свойство value с индексом выбранного <tabViewItem>.

Нативный компонент

Android iOS
android.support.v4.view.ViewPager UITabBarController

TextField

<textField> компонент для создания однострочного редактируемого текстового поля.

<textField> расширяет TextBase и EditableTextBase, предоставляя дополнительные свойства и события.

<textField text="{textFieldValue}" hint="Введите текст..." />

<textField> обеспечивает двухстороннюю привязку данных через директиву bind.

<textField bind:text="{textFieldValue}" />

Свойства

Имя Тип Описание
text String Возвращает или задаёт значение текстового поля.
hint String Возвращает или задаёт текст подсказки при пустом поле.
editable Boolean Когда равно true, пользователь может редактировать текст в поле.
maxLength Number Ограничивает количество вводимых символов.
secure Boolean При значении true прячет за маской вводимый текст. Используйте это свойство при создании полей ввода паролей.
По умолчанию: false.
keyboardType KeyboardType Указывает, что требуется использовать определённый тип клавиатуры, чтобы облегчить ввод.
Допустимые значения: datetime, phone, number, url или email.
returnKeyType ReturnKeyType Возвращает или задаёт тип клавиши ввода.
Допустимые значения: done, next, go, search или send.
autocorrect Boolean Включает или отключает автокоррекцию.

События

Имя Описание
textChange Вызывается при изменении текста.
returnPress Вызывается при нажатии клавиши ввода.
focus Вызывается, когда поле получает фокус.
blur Вызывается, когда поле теряет фокус.

Нативный компонент

Android iOS
android.widget.EditText UITextField

TextView

<textView> — UI компонент, который отображает многострочную область текста, доступного для редактирования или только для чтения. Используйте его, когда надо дать пользователю возможность набирать большие тексты в вашем приложении или для показа длинных многострочных текстов на экране.

<textView> расширяет TextBase и EditableTextBase, предоставляя дополнительные свойства и события.

<textView text="Много...\n...строчный\nТекст" />

<textView> обеспечивает двухстороннюю привязку данных через директиву bind.

<textView bind:text="{textViewValue}" />

Отображение текста с различными стилями

Для применения различных стилей в тексте внутри элемента <textView> можно использовать элемент <formattedString>

<textView editable="{false}">
  <formattedString>
	<span text="Вы можете использовать различное форматирование: " />
	<span text="жирный, " fontWeight="Bold" />
	<span text="курсив " fontStyle="Italic" />
	<span text="и " />
	<span text="подчеркивание." textDecoration="Underline" />
  </formattedString>
</textView>

Свойства

Имя Тип Описание
text String Возвращает или задаёт текст для компонента.
hint String Возвращает или задаёт подсказку для пустого поля, доступного для редактирования.
editable Boolean Когда равно true, пользователь может редактировать текст в поле.
maxLength Number Ограничивает количество вводимых символов.
keyboardType KeyboardType Указывает, что требуется использовать определённый тип клавиатуры, чтобы облегчить ввод.
Допустимые значения: datetime, phone, number, url или email.
returnKeyType ReturnKeyType Возвращает или задаёт тип клавиши ввода. Поддерживается только в iOS
Допустимые значения: done, next, go, search или send.
autocorrect Boolean Включает или отключает автокоррекцию.

События

Имя Описание
textChange Вызывается при изменении текста.
returnPress Вызывается при нажатии клавиши ввода.
focus Вызывается, когда поле получает фокус.
blur Вызывается, когда поле теряет фокус.

Нативный компонент

Android iOS
android.widget.EditText UITextView

TimePicker

<timePicker> — UI компонент, который позволяет пользователю выбрать время.

См. также: DatePicker.

<timePicker hour="{selectedHour}" minute="{selectedMinute}" />

<timePicker> обеспечивает двухстороннюю привязку данных через директиву bind.

<timePicker bind:time="{selectedTime}" />

Свойства

Имя Тип Описание
hour Number Возвращает или задаёт час.
minute Number Возвращает или задаёт минуту.
time Date Возвращает или задаёт выбранное время.
minHour Number Возвращает или задаёт минимально возможный час.
maxHour Number Возвращает или задаёт максимально возможный час.
minMinute Number Возвращает или задаёт минимально возможную минуту.
maxMinute Number Возвращает или задаёт максимально возможную минуту.
minuteInterval Number Возвращает или задаёт интервал между минутами, которые можно выбрать. Например: 5 или 15 минут.
По умолчанию: 1.

События

Имя Описание
timeChange Вызывается, когда изменяется выбранное время.

Нативный компонент

Android iOS
android.widget.TimePicker UIDatePicker

WebView

<webView> — UI компонент, который позволяет отображать web-содержимое в вашем приложении. Вы может получить и показать содержимое по URL адресу или из локального HTML файла. Также можно отобразить просто статический HTML контент.

См. также: HtmlView.

<webView src="http://svelte-native.technology/" />

<webView src="~/html/index.html" />

<webView src="<div><h1>Немного HTML кода</h1></div>" />

Свойства

Имя Тип Описание
src String Возвращает или задаёт отображаемое содержимое.
Допустимые значения: URL адрес, путь к локальному HTML файлу или строка HTML кода.

События

Имя Описание
loadStarted Вызывается, когда страница начинает загружаться в <webView>.
loadFinished Вызывается, когда страница полностью загрузилась в <webView>.

Нативный компонент

Android iOS
android.webkit.WebView WKWebView

Диалоги

ActionDialog

Метод action() отображает список опций, которые можно выбрать, и кнопку отмены. Используйте его, чтобы дать пользователю возможность выбрать один из предложенных вариантов или отказаться от выбора.

Метод является частью модуля dialogs.

Основное использование

import { action } from 'tns-core-modules/ui/dialogs'

action("Ваше сообщение", "Текст кнопки отмены", ["Опция 1", "Опция 2"])
  .then(result => {
	console.log(result);
  });

AlertDialog

Метод alert() показывает сообщение и кнопку OK. Используйте его для показа пользователю информации или уведомлений, которые не требуют от него каких-либо действий.

Метод является частью модуля dialogs.

Основное использование

import { alert } from 'tns-core-modules/ui/dialogs'

alert('Ваше сообщение')
  .then(() => {
	console.log("Окно диалога закрыто.");
  });

Параметры диалога

alert({
  title: "Заголовок окна",
  message: "Ваше сообщение",
  okButtonText: "Текст кнопки"
}).then(() => {
  console.log("Окно диалога закрыто.");
});

ConfirmDialog

Метод confirm() показывает сообщение, требующее подтверждения, с кнопками ОК и Отмена.

Метод является частью модуля dialogs.

Основное использование


import { confirm } from 'tns-core-modules/ui/dialogs'

confirm('Ваше сообщение')
  .then(result => {
	console.log(result);
  });

Параметры диалога

confirm({
  title: "Заголовок окна",
  message: "Ваше сообщение",
  okButtonText: "Текст кнопки ОК",
  cancelButtonText: "Текст кнопки отмены"
}).then(result => {
  console.log(result);
});

LoginDialog

Метод login() показывает диалог с полями для ввода учётных данных.

Метод является частью модуля dialogs.

Основное использование

import { login } from 'tns-core-modules/ui/dialogs'

login("Ваше сообщение", "Значение поля логина", "Значение поля пароля").then(result => {
  console.log(`Данные из диалога: ${result.result}, логин: ${result.userName}, пароль: ${result.password}`);
});

Параметры диалога

login({
  title: "Заголовок окна",
  message: "Ваше сообщение",
  okButtonText: "Текст кнопки ОК",
  cancelButtonText: "Текст кнопки отмены",
  userName: "Значение поля логина",
  password: "Значение поля пароля"
}).then(result => {
  console.log(`Данные из диалога: ${result.result}, логин: ${result.userName}, пароль: ${result.password}`);
});

PromptDialog

Метод prompt(), который открывает диалоговое окно со строкой ввода текста.

Метод является частью модуля dialogs.

Основное использование

prompt('Ваше сообщение пользователю', 'Значение по умолчанию')
.then(result => {
  console.log(`Данные из диалога: ${result.result}, текст: ${result.text}`)
})

Параметры диалога

import { prompt } from 'tns-core-modules/ui/dialogs'

prompt({
  title: "Заголовок окна",
  message: "YВаше сообщение",
  okButtonText: "Текст кнопки ОК",
  cancelButtonText: "Текст кнопки отмены",
  defaultText: "Текст по умолчанию",
}).then(result => {
  console.log(`Данные из диалога: ${result.result}, текст: ${result.text}`)
});

Настройка поля ввода текста

Вы можете настроить тип поля ввода при помощи inputType. Можно выбрать между простым текстом (text), адресом электронной почты(email) и скрытым паролем (password).

inputType: inputType.text
inputType: inputType.email
inputType: inputType.password

Example

import { inputType } from 'tns-core-modules/ui/dialogs'

prompt({
  title: "Запрос E-Mail",
  message: "Сообщите ваш E-Mail:",
  okButtonText: "OK",
  cancelButtonText: "Отмена",
  defaultText: "name@domain.com",
  inputType: dialogs.inputType.email
}).then(result => {
  console.log(`Данные из диалога: ${result.result}, текст: ${result.text}`)
});

TODO...

Эта документация все еще находится в стадии разработки, как и сам Svelte Native. Если вы нашли определенные вещи, которые отсутствуют или могут быть улучшены, напишите в Issues на GitHub!