It is a framework to develop android and ios applications in a more organized way with tabrisjs
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.
execute command
npm i voir-nativeaddView function adds views to the CoordinatePage
| parameter types |
|---|
| ...Array<tabris.Action | tabris.Page> |
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 />);| parameter types |
|---|
| Array<IMenuItemOption> |
interface IMenuItemOption {
id: string;
text: string;
image?: string;
}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",
},
]);displays as a popup element in the user interface
show popup message with duration time
| method | parameter types |
|---|---|
| contructor | string, number |
| static makeToast | string, number |
| show |
import { Toast } from "voir-native";
Toast.makeText("hello");displays a popup that represents a view
| method | parameter types | return |
|---|---|---|
| addView | ...Widget[] | |
| setButtonCancel | string | tabris.Listeners |
| setButtonAccept | string | tabris.Listeners |
| remove | ||
| removeView | ||
| removeButtons | ||
| show |
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();añade nuevo datos de preferencia
| parameter types |
|---|
| string |
| any |
recupera el valor de preferencia
| parameter types | return |
|---|---|
| string | any |
comprueba si existe la preferencia
| parameter types | return |
|---|---|
| string | boolean |
to add preferences where data can be saved in which the user preference persists
properties received by default to:
- ListPreference
- SwitchPreference
- CheckBoxPreference
| property | type |
|---|---|
| title | string |
| summary | string |
| key | string |
| value | string | boolean | number |
| onSelect | (event: any)=> any |
create preference page
create a modal displaying a view of options to select
received aditional property
| property | type |
|---|---|
| entries | IEntry[] |
interface IPropertyListPreference extends IPropertyChildPreference {
entries: IEntry[];
}
interface IEntry {
text: string;
id: string;
}| property | type |
|---|---|
| title | string |
| summary | string |
| onSelect | (event: any)=> any |
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" }],
})
)
);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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent