NativeScript UI plugin for tagging
Homepage npm TypeScript Download
npm install nativescript-tag@1.0.0
NativeScript UI plugin for tagging with rich features including autocomplete
Currently only support Android. Any collaborator for iOS support is welcomed!
The plugin is developed using nativescript plugin seed (https://github.com/NathanWalker/nativescript-plugin-seed). Pls see demo
for full example.
```XML
<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.
String array of tags for binding
String array of auto complete suggestion
Set true
when needs autcomplete. Default is false
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.
Tag click event. Mutually exclusive to ntag_editMode=true
due to the native android library.
Preset tag sizes. Mutually execlusive.
Default is 'Add Tag'
Background color for autocomplete popup. Default is #F5F8FA
Default is #49C120
Default is #49C120
Default is #FFFFFF
Default is #AAAAAA
Default is #80000000
Default is #DE000000
Default is #49C120
Default is #FFFFFF
Default is #FFFFFF
Default is #49C120
Default is #EDEDED
Default is 13sp
Default is 0.5dp
Default is 8dp
Default is 4dp
Default is 12dp
Default is 3dp
Credit goes to the native android library (https://github.com/2dxgujun/AndroidTagGroup) by 2dxgujun (https://github.com/2dxgujun)
Currently there is no support for iOS. Any suggestion (iOS library, etc) and/or contribution is welcomed!