voir-native v0.3.0

Documentation

• getting started
  • installation
• helpers view
  • addView
  • menuDrawer
• popup
  • Toast
  • Modal
• helpers storage
  • setPreference
  • getValuePreference
  • existsKeyPreference
• components
  • PreferenceScreen
    • SwitchPreference
    • CheckBoxPreference
    • ListPreference
    • TextPreference
  • CoordinatePage

Getting Started

when installing voir-native installs with the dependency of tabrisjs you can go to the documentation of tabrisjs and see the entire list of widgets, services and more.

Installation

execute command

npm i voir-native

Helpers View

addView

addView function adds views to the CoordinatePage

| parameter types |:-- | ...Array<tabris.Action | tabris.Page>

example

import addView, { CoordinatePage } from "voir-native";
import { Action, Page, contentView } from "tabris";

contentView.append(<CoordinatePage layoutData="stretch" />);

addView(<Action title="setting" />, <Page title="setting" stretch />);

menuDrawer

| parameter types |:-- | Array\<IMenuItemOption>

interface IMenuItemOption {
  id: string;
  text: string;
  image?: string;
}

example

import { menuDrawer } from "voir-native";
import { drawer } from "tabris";

drawer.enabled = true;

menuDrawer([
  {
    text: "home",
    id: "home",
    image: "/images/home.png",
  },
  {
    text: "favorite",
    id: "favorite",
    image: "/images/favorite.png",
  },
  {
    text: "configure",
    id: "config",
    image: "/images/settings.png",
  },
]);

popup

displays as a popup element in the user interface

Toast

show popup message with duration time

example

import { Toast } from "voir-native";

Toast.makeText("hello");

Modal

displays a popup that represents a view

example

import { Modal } from "voir-native";
import {TextView} from "tabris";

const modal = new Modal();

modal.addView(
    <TextView text="this is my text" />
);

modal.setButtonCancel("cancel").addListener(() => {
    modal.remove();
});

modal.setButtonAccept("accept").addListener(() => {
    modal.remove();
});

modal.show();

helpers storage

setPreference

añade nuevo datos de preferencia

| parameter types |:-- | string | any

getValuePreference

recupera el valor de preferencia

existsKeyPreference

comprueba si existe la preferencia

Components

Preference

to add preferences where data can be saved in which the user preference persists

properties received by default to:

• ListPreference
• SwitchPreference
• CheckBoxPreference

PreferenceScreen

create preference page

ListPreference

create a modal displaying a view of options to select

received aditional property

interface IPropertyListPreference extends IPropertyChildPreference {
  entries: IEntry[];
}

interface IEntry {
  text: string;
  id: string;
}

TextPreference

Example

import {
  PreferenceScreen,
  TextPreference,
  SwitchPreference,
  CheckBoxPreference,
  ListPreference,
} from "voir-native";
import { contentView } from "tabris";

contentView.append(
  PreferenceScreen({
    layoutData: "stretch",
  }).append(
    TextPreference({
      title: "text info",
      summary: "summary",
    }),
    SwitchPreference({
      title: "title",
      summary: "summary",
      key: "keySwitch",
      value: true,
    }),
    CheckBoxPreference({
      title: "title",
      summary: "summary",
      key: "cbPreference",
      value: false,
    }),
    ListPreference({
      title: "my list preference",
      key: "list",
      value: 0, // default value select
      entries: [{ id: "myId", text: "item 1" }],
    })
  )
);

CoordinatePage

handles the elements of a current page

import { CoordinatePage } from "voir-native";

import { contentView } from "tabris";

contentView.append(
  CoordinatePage({
    layoutData: "stretch",
    drawerActionVisible: true,
  })
);

// or

contentView.append(<CoordinatePage layoutData="stretch" />);

new features will be added little by little