Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (92 sloc) 7.04 KB
title
Панель действий

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