winmintun / nativescript-tag

NativeScript UI plugin for tagging with rich features including autocomplete

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

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!