NativeScript UI plugin for Tagging

NativeScript UI plugin for tagging with rich features including autocomplete

Platform Support

Currently only support Android. Any collaborator for iOS support is welcomed!

##Android side alt tag

Usage

The plugin is developed using nativescript plugin seed (https://github.com/NathanWalker/nativescript-plugin-seed). Pls see demo for full example.

    <Label text="{{ message }}" class="message" textWrap="true"/>

    <Label text="Editable (Default size, Custom Color)" textWrap="true" />    
    <Tags:TagGroup id="tag1" ntag_editMode="true" value="{{ tags }}" ntag_borderColor="#2095F2" ntag_textColor="#2095F2" ntag_bgColor="#ffffff" ntag_checkedBorderColor="#2095F2" ntag_checkedBgColor="#2095F2" ntag_checkedTextColor="#ffffff" />

    <Label text="Editable (with AutoComplete)" textWrap="true" />
    <Tags:TagGroup id="tag4" value="{{ tags }}" autoCompleteTags="{{ autoCompleteTags }}" ntag_autoComplete="true" />

    <Label text="Read-only (Custom size, Default Color)" textWrap="true" />    
    <Tags:TagGroup id="tag2" ntag_tagClick="{{ onTagClick }}" value="{{ tags }}" ntag_borderStrokeWidth="0.7" ntag_textSize="15" ntag_hSpacing="9" ntag_vSpacing="5" ntag_hPadding="14" ntag_vPadding="4" />

    <Label text="Read-only (Small size, Default Color)" textWrap="true" />
    <Tags:TagGroup id="tag3" value="{{ tags }}" ntag_tagClick="tag3Click" ntag_small="true" />

    <Label text="Read-only (Large size, Default Color)" textWrap="true" />
    <Tags:TagGroup id="tag3" ntag_tagClick="{{ onTagClick }}" value="{{ tags }}" ntag_large="true" />

    <Label text="Editable (Custom input hint)" textWrap="true" />
    <Tags:TagGroup id="tag4" value="{{ tags }}" ntag_editMode="true" ntag_inputHint="New Tag" ntag_large="true" />

How to add tag (with auto complete)? Set ntag_autoComplete="true" in xml and chose a suggestion or tap the autocomplete text view.
How to remove tag (with auto complete)? Set ntag_autoComplete="true" in xml and double-tap the tag to remove.
How to add tag (without auto complete)? Set ntag_editMode="true" in xml and press 'Enter' or tap the blank area of the tag group. (A few soft keyboard not honour the key event).
How to remove tag (without auto complete)? Set ntag_editMode="true" in xml and press 'Backspace' or double-tap the tag to remove.

Attributes

Important attributes

value - required

String array of tags for binding

autoCompleteTags - optional

String array of auto complete suggestion

ntag_autoComplete - optional

Set true when needs autcomplete. Default is false

ntag_editMode - (boolean) - optional

Default is false - read only. When true, can remove and add tags by double tapping and tapping the blank area of the tag group respectively. Mutually exclusive to ntag_tagClick due to the native android library.

ntag_tagClick - optional

Tag click event. Mutually exclusive to ntag_editMode=true due to the native android library.

ntag_small or ntag_large - (boolean) - optional

Preset tag sizes. Mutually execlusive.

ntag_inputHint - (string) - optional

Default is 'Add Tag'

Color attributes

ntga_acPopupBg - (string) - optional

Background color for autocomplete popup. Default is #F5F8FA

ntag_borderColor - (string) - optional

Default is #49C120

ntag_textColor - (string) - optional

Default is #49C120

ntag_bgColor - (string) - optional

Default is #FFFFFF

ntag_dashBorderColor - (string) - optional

Default is #AAAAAA

ntag_inputHintColor - (string) - optional

Default is #80000000

ntag_inputTextColor - (string) - optional

Default is #DE000000

ntag_checkedBorderColor - (string) - optional

Default is #49C120

ntag_checkedTextColor - (string) - optional

Default is #FFFFFF

ntag_checkedMarkerColor - (string) - optional

Default is #FFFFFF

ntag_checkedBgColor - (string) - optional

Default is #49C120

ntag_pressedBgColor - (string) - optional

Default is #EDEDED

Size attributes

ntag_textSize - (number) - optional

Default is 13sp

ntag_borderStrokeWidth - (number) - optional

Default is 0.5dp

ntag_hSpacing - (number) - optional

Default is 8dp

ntag_vSpacing - (number) - optional

Default is 4dp

ntag_hPadding - (number) - optional

Default is 12dp

ntag_vPadding - (number) - optional

Default is 3dp

Credit

Credit goes to the native android library (https://github.com/2dxgujun/AndroidTagGroup) by 2dxgujun (https://github.com/2dxgujun)

Contributing - Support for iOS?

Currently there is no support for iOS. Any suggestion (iOS library, etc) and/or contribution is welcomed!