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!