Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
1009 lines (606 sloc) 44.4 KB
title
Компоненты

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
You can’t perform that action at this time.