InputTag 标签输入框

介绍

用于通过输入方式创建标签。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入

import { IBestInputTag } from "@ibestservices/ibest-ui";

代码演示

基础用法

TIP

输入框输入文字后，点击输入法回车键即可添加标签。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: string[] = ["测试", "测试1"]
  build() {
    Column() {
      IBestInputTag({
        value: $value
      })
    }
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  @State value: string[] = ["测试", "测试1"]
  build() {
    Column() {
      IBestInputTag({
        value: $value,
        space: 8,
        outerBorder: {
          width: { bottom: 1 },
          color: "#1989fa"
        },
        outerRadius: 0,
        tagBgColor: "#1989fa",
        tagFontColor: "#fff",
        fontSize: 14
      })
    }
  }
}

API

@Props

参数	说明	类型	默认值
value	标签列表,支持双向绑定	string[]	[]
space	标签间距	number	6
tagBgColor	标签背景色	ResourceColor	#f2f3f5
fontSize	字体大小	string | number	12
tagFontColor	标签字体颜色	ResourceColor	#969799
inputFontColor	输入框字体颜色	ResourceColor	#323233
outerBorder	外边框	BorderOptions	{ width: 1, color: '#ebedf0' }
outerRadius	外圆角	Length	BorderRadiuses | LocalizedBorderRadiuses
outerBgColor	背景色	ResourceColor	#fff
outerPadding	外侧内边距	Length | Padding | _LocalizedPadding	4

Events

事件名	说明	事件类型
onTagsChange	添加删除标签时的回调事件	() => void

主题定制

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称	描述	默认值
ibest_inputTag_bg_color	背景颜色	#fff
ibest_inputTag_tag_bg_color	标签背景颜色	#f2f3f5