Nepotistic Pontifex Maximus
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@nativescript-rtl/ui

0.1.8 • Public • Published

@nativescript-rtl/ui

Add right-to-left UI support to NativeScript framework

Installation

to install plugin write:

NativeScript 7 and higher

tns plugin add @nativescript-rtl/ui

Support NativeScript older then version 7

tns plugin add @nativescript-rtl/ui@0.1.7

Preview

LTR Layout RTL
screenshot 1 AbsoluteLayout screenshot 1
screenshot 2 DockLayout screenshot 2
screenshot 3 GridLayout screenshot 3
screenshot 4 StackLayout screenshot 4
screenshot 5 WrapLayout screenshot 5

Properties

Name Default Description
isRtl true isRtl use to change layout direction by default is true that mean layout from right to left but you can change it to false that change layout direction from left to right

CSS Properties

Name Default Description
direction rtl use to change layout direction by default is rtl that mean layout from right to left but you can change it to ltr that change layout to direction from left to right

How to use

declare plugin in XML then use it.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:rtl="@nativescript-rtl/ui">
  <rtl:WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
    <Label text="Label 1" width="70" height="70" backgroundColor="red"/>
    <Label text="Label 2" width="70" height="70" backgroundColor="green"/>
    <Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
    <Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
  </rtl:WrapLayout>
</Page>

For Angular/Vue 'registerElement` must be used to register each RTL element

example: register elements in app.module.ts

import { registerElement } from "nativescript-angular/element-registry";
registerElement(
  "RGridLayout",
  () => require("@nativescript-rtl/ui").GridLayout
);
registerElement(
  "RWrapLayout",
  () => require("@nativescript-rtl/ui").WrapLayout
);
registerElement(
  "RAbsoluteLayout",
  () => require("@nativescript-rtl/ui").AbsoluteLayout
);
registerElement(
  "RDockLayout",
  () => require("@nativescript-rtl/ui").DockLayout
);
registerElement(
  "RStackLayout",
  () => require("@nativescript-rtl/ui").StackLayout
);

now you can use RGridLayout, RWrapLayout, RAbsoluteLayout, RDockLayout and RStackLayout in your angular project

example:

  <RWrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
    <Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
    <Label text="Label 2" width="70" height="70" backgroundColor="green"></Label>
    <Label text="Label 3" width="70" height="70" backgroundColor="blue"></Label>
    <Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
  </RWrapLayout>

Install

npm i @nativescript-rtl/ui

DownloadsWeekly Downloads

71

Version

0.1.8

License

MIT

Unpacked Size

50.2 kB

Total Files

64

Last publish

Collaborators

  • avatar