Nativescript-rich-textfield

This plugins let's you easily create textfield with icon that can be effortlessly styled using the exposed properties.

Prerequisites

This plugin is using FontAwesome so as a prerequisite you will have to add fonts folder to your app root directory containing FontAwesome .ttf file.

Installation

npm install nativescript-rich-textfield --save

Usage

You will have to add xmlns:rt="nativescript-rich-textfield" namespace to your page tag, and then simply use <rt:RichTextField/> in order to add the widget to your page.

A few examples:

Code samples in order of appearance:

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

| Attribute | Description | | ------ | ------ | | icon| can be code value from http://fontawesome.io/cheatsheet/ (e.g. ) or hex representation (e.g. 0xf123) | fieldHeight| height of the field (e.g. 50) | fieldColor| text color of the field. The value can be known color name or rgba (red/green/blue/alpha) representation (e.g. "red" or "rgba(34,139,34,0.8)"). Alpha value can be in the range 0-1 the rest can be 0-255. | fieldPaddingLeft| left hand side space to the parent element (e.g. "50") | fieldPaddingRight| right hand side space to the parent element (e.g. "50") | textPaddingLeft| the distance between the icon and the text/hint of the field (e.g. "50") | fieldBackgroundColor| background color of the field (e.g. "red" or "rgba(34,139,34,0.8)") | iconColor| icon color (e.g. "red" or "rgba(34,139,34,0.8)") | fieldHint| string value of the field hint (e.g. "Custom Hint") | iconSize| icon size (e.g. "20") | fieldHintColor| color value of the hint text (e.g. "red" or "rgba(34,139,34,0.8)") | fieldBorderColor| color value of the border (e.g. "red" or "rgba(34,139,34,0.8)") | fieldBorderWidth| border width (e.g. "2"). Setting this applies all sides border. | fieldLeftBorderWidth| left side border width (e.g. "2"). Setting this applies only left side border. | fieldRightBorderWidth| right side border width (e.g. "2"). Setting this applies only right side border. | fieldTopBorderWidth| top side border width (e.g. "2"). Setting this applies only top side border. | fieldBottomBorderWidth| bottom side border width (e.g. "2"). Setting this applies only bottom side border. | secure| specify whether to mask the input of the field. Useful for passwords (e.g. "true").

License

Apache License Version 2.0, January 2004