NativeScript 富文本输入框

此插件允许您轻松创建带有图标且可以使用暴露的属性轻松样式的文本输入框。

先决条件

此插件使用 FontAwesome，因此作为先决条件，您需要将包含 FontAwesome .ttf 文件的 fonts 文件夹添加到您的应用程序根目录。

安装

npm install nativescript-rich-textfield --save

使用方法

您需要将 xmlns:rt="nativescript-rich-textfield" 命名空间添加到您的页面标签中，然后简单地使用 <rt:RichTextField/> 将小部件添加到页面中。

一些示例

Sample Android

按出现顺序排列的代码示例

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="page"
xmlns:rt="nativescript-rich-textfield">
  <StackLayout >

    <rt:RichTextField icon="0xf123" height="60" iconColor="red" fieldHintColor="red" fieldPaddingLeft="20" textPaddingLeft="80" fieldPaddingRight="90" fieldBackgroundColor="transparent"/>

    <rt:RichTextField icon="&#xf099;" iconSize="20" iconColor="rgba(240,248,255,1)" fieldHint="Twitter Hint"
     height="60" style="background-color:rgba(30,144,255,1)" fieldBorderColor="rgba(255,255,255,1)" fieldBottomBorderWidth="2"/>

    <rt:RichTextField icon="&#xf262;" fieldBorderColor="rgba(212,175,55,1)" fieldColor="rgba(138,43,226,1)" fieldHeight="50" height="50" fieldBottomBorderWidth="4"
     fieldTopBorderWidth="4" iconColor="rgba(138,43,226,0.8)" fieldHintColor="rgba(138,43,226,0.6)" style="background-color:rgba(255,223,0,1);margin-top:10;" />

    <rt:RichTextField icon="&#xf17b;" fieldBorderColor="rgba(124,252,0,1)" fieldHeight="45" height="45" fieldTopBorderWidth="3" iconColor="rgba(173,255,47,1)" 
     style="background-color:rgba(34,139,34,1);margin-top:10;margin-bottom:10;" fieldColor="rgba(34,139,34,1)" />

     <rt:RichTextField iconSize="15" icon="&#xf028;" iconColor="rgba(1,1,1,1)" style="margin-bottom:10;" fieldBackgroundColor="red" fieldBorderColor="white" fieldBorderWidth="3" 
      fieldHint="Volume value Hint" fieldHintColor="rgba(1,1,1,0.6)" fieldHeight="45" width="90%" />

    <rt:RichTextField icon="&#xf007;" fieldLeftBorderWidth="8" width="80%" fieldHint="Username" fieldPaddingLeft="34" />

    <rt:RichTextField icon="&#xf13e;" secure="true" fieldLeftBorderWidth="4" fieldRightBorderWidth="4" width="80%" fieldHint="Password" />

  </StackLayout>
</Page>

API

RichTextField 属性

属性	描述
icon	可以是来自 http://fontawesome.io/cheatsheet/ 的代码值（例如 ``）或十六进制表示（例如 `0xf123`）
fieldHeight	字段的高度（例如 `50`）
fieldColor	字段中的文字颜色。值可以是已知颜色名称或 rgba（红/绿/蓝/透明度）表示（例如 `"red"` 或 `"rgba(34,139,34,0.8)"`）。透明度值可以在 `0-1` 范围内，其余可以在 `0-255` 范围内。
fieldPaddingLeft	到父元素的左侧空间（例如 `"50"`）
fieldPaddingRight	到父元素的右侧空间（例如 `"50"`）
textPaddingLeft	图标与字段文本/提示之间的距离（例如 `"50"`）
fieldBackgroundColor	字段背景颜色（例如 `"red"` 或 `"rgba(34,139,34,0.8)"`）
iconColor	图标颜色（例如 `"red"` 或 `"rgba(34,139,34,0.8)"`）
fieldHint	字段提示的字符串值（例如 `"Custom Hint"`）
iconSize	图标大小（例如 `"20"`）
fieldHintColor	提示文本的颜色值（例如 `"red"` 或 `"rgba(34,139,34,0.8)"`）
fieldBorderColor	边框的颜色值（例如 `"red"` 或 `"rgba(34,139,34,0.8)"`）
fieldBorderWidth	边框宽度（例如 `"2"`）。设置此值将应用所有边框。
fieldLeftBorderWidth	左侧边框宽度（例如 `"2"`）。设置此值仅应用左侧边框。
fieldRightBorderWidth	右侧边框宽度（例如 `"2"`）。设置此值仅应用右侧边框。
fieldTopBorderWidth	顶部边框宽度（例如 `"2"`）。设置此值仅应用顶部边框。
fieldBottomBorderWidth	底部边框宽度（例如 `"2"`）。设置此值仅应用底部边框。
secure	指定是否要屏蔽字段的输入。对于密码非常有用（例如 `"true"`）。

许可证

Apache 许可证版本 2.0，2004 年 1 月