@nativescript-rtl/ui

为 NativeScript 框架添加从右到左的 UI 支持

安装

要安装插件，请编写

NativeScript 7 及更高版本

tns plugin add @nativescript-rtl/ui

支持低于版本 7 的 NativeScript

tns plugin add @nativescript-rtl/[email protected]

预览

LTR	布局	RTL
	`绝对布局`
	`停靠布局`
	`网格布局`
	`堆叠布局`
	`包装布局`

属性

名称	默认值	描述
isRtl	`true`	`isRtl` 用于改变布局方向，默认为 `true`，表示从右到左布局，但您可以将其更改为 `false` 以改变布局方向为从左到右

CSS 属性

名称	默认值	描述
direction	`rtl`	用于改变布局方向，默认为 `rtl`，表示从右到左布局，但您可以将其更改为 `ltr` 以改变布局为从左到右方向

如何使用

在 XML 中声明插件然后使用它。

<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>

对于 Angular/Vue，必须使用 'registerElement' 来注册每个 RTL 元素

示例：在 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
);

现在您可以在 Angular 项目中使用 RGridLayout、RWrapLayout、RAbsoluteLayout、RDockLayout 和 RStackLayout

示例

  <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>