NativeScript UI 标签插件

NativeScript UI 标签插件，具有丰富的功能，包括自动完成

平台支持

目前仅支持 Android。欢迎任何协作支持 iOS！

##Android 端 alt tag

使用方法

该插件使用 nativescript-plugin-seed（https://github.com/NathanWalker/nativescript-plugin-seed）开发。请查看 demo 获取完整示例。

    <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" />

如何添加标签（带自动完成）？在 xml 中设置 ntag_autoComplete="true" 并选择建议或点击自动完成文本视图。
如何删除标签（带自动完成）？在 xml 中设置 ntag_autoComplete="true" 并双击标签进行删除。
如何添加标签（不带自动完成）？在 xml 中设置 ntag_editMode="true" 并按 'Enter' 或点击标签组的空白区域。（一些软键盘不遵守键事件）。
如何删除标签（不带自动完成）？在 xml 中设置 ntag_editMode="true" 并按 'Backspace' 或双击标签进行删除。

属性

重要属性

value - 必需

用于绑定的标签字符串数组

autoCompleteTags - 可选

自动完成建议的字符串数组

ntag_autoComplete - 可选

需要自动完成时设置为 true。默认为 false

ntag_editMode - (布尔值) - 可选

默认为 false - 只读。当为 true 时，可以通过双击和点击标签组的空白区域分别删除和添加标签。由于原生 Android 库，与 ntag_tagClick 相互排斥。

ntag_tagClick - 可选

标签点击事件。由于原生 Android 库，与 ntag_editMode=true 相互排斥。

ntag_small 或 ntag_large - (布尔值) - 可选

预设标签大小。相互排斥。

ntag_inputHint - (字符串) - 可选

默认为 '添加标签'

颜色属性

ntga_acPopupBg - (字符串) - 可选

自动完成弹出窗口的背景颜色。默认为 #F5F8FA

ntag_borderColor - (字符串) - 可选

默认为 #49C120

ntag_textColor - (字符串) - 可选

默认为 #49C120

ntag_bgColor - (字符串) - 可选

默认为 #FFFFFF

ntag_dashBorderColor - (字符串) - 可选

默认为 #AAAAAA

ntag_inputHintColor - (字符串) - 可选

默认为 #80000000

ntag_inputTextColor - (字符串) - 可选

默认为 #DE000000

ntag_checkedBorderColor - (字符串) - 可选

默认为 #49C120

ntag_checkedTextColor - (字符串) - 可选

默认为 #FFFFFF

ntag_checkedMarkerColor - (字符串) - 可选

默认为 #FFFFFF

ntag_checkedBgColor - (字符串) - 可选

默认为 #49C120

ntag_pressedBgColor - (字符串) - 可选

默认为 #EDEDED

尺寸属性

ntag_textSize - (数字) - 可选

默认为 13sp

ntag_borderStrokeWidth - (数字) - 可选

默认值为0.5dp

ntag_hSpacing - (数字) - 可选

默认值为8dp

ntag_vSpacing - (数字) - 可选

默认值为4dp

ntag_hPadding - (数字) - 可选

默认值为12dp

ntag_vPadding - (数字) - 可选

默认值为3dp

致谢

感谢2dxgujun（https://github.com/2dxgujun）提供的原生Android库（https://github.com/2dxgujun/AndroidTagGroup）

贡献 - 支持iOS吗？

目前不支持iOS。欢迎提出建议（iOS库等）和/或贡献！