美文网首页
一个支持单选和多选的文字标签组件

一个支持单选和多选的文字标签组件

作者: aJIEw | 来源:发表于2020-05-09 12:46 被阅读0次
Octocat

文字标签算是最常用的组件之一了,在我的很多项目中都会使用到,但是同时支持单选和多选的文字标签好像比较少。目前在做的一个项目中,有比较多的地方会用到多标签选择,还有用标签对选项进行切换,于是自己封装了一个 TagGroup 组件,觉得挺好用的,帮我节省了不少时间,所以开源出来希望给更多的人使用。

项目地址:react-native-tag-group

功能演示

主要分为两种模式,默认为多选模式,在回调方法 onSelectedTagChange 中会得到选中的标签数组:

标签多选.gif

另一种是单选模式,通过设置 singleChoiceMode 开启,此时回调方法 onSelectedTagChange 中的参数为选中标签的值和对应的下标:

标签单选.gif

从上面的动图中可以看到,我们还可以通过 TagGroupselect(index)unselect(index) 方法选中或者解选标签。除此之外,TagGroup 中还有一个 getSelectedIndex() 方法,用于获取当前选中的标签数组的下标。

更多用法请查看项目 README

一点心得

这是我开源的第一个 RN 组件,虽然功能很简单,但是这也让我意识到开源其实并不难,只要你愿意动手去做,每个人都可以创造出一些东西。而且开源也比较容易得到正反馈,比如如果你造的轮子特别好用,受到了比较多的关注,你的成就感会特别高。这和我们平时工作中获得的成就感还不太一样,因为工作有明确的目的性,而开源则完全是一种自我驱动的行为,并不能直接给我们带来任何实际的利益,但是却能给我们带来满足感。另外这也是一种交流和学习的方式,你只有不断进步,才能得到更多人的认可。

相关文章

  • 一个支持单选和多选的文字标签组件

    文字标签算是最常用的组件之一了,在我的很多项目中都会使用到,但是同时支持单选和多选的文字标签好像比较少。目前在做的...

  • vue 自定义组件多选和单选EasyCheckBox

    项目中需要用到多选和单选框,许多框架都有,但是发现使用很不灵活。这里自己封装了一个支持单选和多选的vue组件。看看...

  • 自定义标签库-FHHTagView

    FHHTagView Github Tip: 提供高度计算Api 自定义标签样式 可设置标签控件是否支持单选、多选...

  • Vue列表多想选中和单向选中效果

    问题:Vue项目会遇到一些选中高亮效果,将选项列表写入组件,需要让组件即支持单选也支持多选,通过传入props参数...

  • React Native多功能选择页面

    这是一个多功能的选择页面,支持如下功能: 单层或者多层的数据。 单选或者多选。 显示或者隐藏内部的UI组件。 自定...

  • 微信小程序自定义多选事件

    要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单...

  • android图文混排

    背景 最近我们的产品来了个新的模块,给学生做题提高成绩的。需求如下: 支持单选、多选、填空题 支持图片文字混排 输...

  • HTML 表单的用法

    :表单 :标签 :输入text:输入文本password:输入密码checkbox:多选radio:单选file:...

  • react学习资料六

    一、复习 约束组件(表单对于input(tyoe=text)等等用value,单选框和多选框设置checked)组...

  • 单选、多选标签视图SGTagsView

    前言 前段时间公司另一iOS工程师在做项目的时候遇到一个标签视图,刚开始的时候他是自己创建的,但遇到一些问题,我就...

网友评论

      本文标题:一个支持单选和多选的文字标签组件

      本文链接:https://www.haomeiwen.com/subject/xdfknhtx.html