首页 >>  正文

indeterminate

来源:baiyundou.net   日期:2024-08-06

在Axure中继器的全选复选框中,有时候会出现“半选中状态”,这种状态通常用于提醒用户,并且在一些特定场景下也有实际的应用。本文作者分享了在Axure中全选复选框时实现“半选中状态”的方法,一起来看一下吧。

在Axure中继器的全选复选框中,有时候会出现“半选中状态”,也被称为“The indeterminate state(不确定状态)”。这种状态是指当子复选框中既有选中状态的,又有未选中状态的时候,全选复选框就会呈现出这种不确定的状态。

半选中状态通常用于提醒用户,并且在一些特定场景下也有其实际的应用。例如,当用户在一组中继器中选择部分选项时,如果不是所有选项都被选中了,全选复选框就会呈现出半选中状态,以提醒用户还有未选择的选项。

一、基本教程

先自行准备好以下元件,自行调整元件尺寸、样式、默认内容、选中时样式等。

一个带有多行数据的中继器,外部包裹一个组合,内部包含:

1)一个动态面板(取名:框选监听),进阶教程时使用:

  • 默认的矩形,用来显示数据,最好添加“选中样式”效果。
  • 一个复选框,用来设置选中状态。

2)一个3状态的动态面板(取名:全选操作),用来显示“全选”功能。

3)一个文本框(取名:每项状态),用来记录中继器每项的选中状态。

我们先来做全选操作的动态面板吧,演示里使用的是Axure自带图标库。三个状态分别是:

“未选中状态”,放入未选中图标,交互为:

“半选中状态”,放入半选图标,交互可根据自身要求设置全选或者不选,按照自身需求来。

“全选中状态”,放入全选图标,交互为:

然后中继器的交互,这里就是初始化文本框的内容:

中继器外部包裹一个组合,也需要添加交互:

复选框的交互如下,U代表Unchecked未选,C代表Checked选中:

  • 选中时设置的文本值为:[[Target.Text.substr(0, Item.index-1)]]C[[Target.Text.substr(Item.index)]]
  • 取消选中时的文本值为:[[Target.Text.substr(0, Item.index-1)]]U[[Target.Text.substr(Item.index)]]

最后,文本框利用添加“文本改变时”实时更新动态面板。

最基本的半选功能就完成了。怎么样?简单易懂对吧?我们还可以再升级一下。

二、进阶先决知识

你对中继器监听器了解多少?如果不明白监听器是什么东西,可以先阅读一下《Axure监听之中继器监听》这篇文章。最好能够清楚为什么要用监听器、什么时候用、以及怎么用。

!!!这个知识点是中继器进阶应用的基础,很多以往非常难以实现的交互通过监听器都可轻松实现。

而且,在上一篇《Axure任意方向鼠标拖拽框选》后,有很多朋友迷茫这个效果能做什么,今天的进阶教程就梦幻联动一下。

三、进阶教程

在前面原型的基础上,将框选功能的动态面板放在中继器的下层,但需要让“框选矩形”在初始化时“置顶”。

记得中继器里的第一层是个动态面板吧?我们先把它做为框选监听器:

再在框选矩形的“拖动时”里触发监听:

四、效果泰酷辣

赶快添加到你的原型里秀BOSS一脸吧!

五、总结

半选中状态是复选框中一个比较特殊的状态,可以帮助用户更加清晰地理解当前选择的情况,提高用户体验。利用文本框就可以在Axure中轻松实现。

本文由 @Jorkin 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

","gnid":"99c6a9360aced0422","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01f73e4d4eb34a0b55.jpg","width":"900"},{"desc":"","height":"300","title":"","url":"https://p0.ssl.img.360kuai.com/t011eef083f05f783f8.jpg","width":"758"},{"desc":"","height":"300","title":"","url":"https://p0.ssl.img.360kuai.com/t01a29d56ddb64ae45e.jpg","width":"758"},{"desc":"","height":"300","title":"","url":"https://p0.ssl.img.360kuai.com/t015d0ae08dff60b4f0.jpg","width":"758"},{"desc":"","height":"492","title":"","url":"https://p0.ssl.img.360kuai.com/t01fb730320af114db3.jpg","width":"758"},{"desc":"","height":"492","title":"","url":"https://p0.ssl.img.360kuai.com/t0172d395db5a8192bc.jpg","width":"758"},{"desc":"","height":"904","title":"","url":"https://p0.ssl.img.360kuai.com/t01e56bcb8d6e461b87.jpg","width":"758"},{"desc":"","height":"492","title":"","url":"https://p0.ssl.img.360kuai.com/t010d11935d19b4afbb.jpg","width":"758"},{"desc":"","height":"552","title":"","url":"https://p0.ssl.img.360kuai.com/t01c51ff991203ba63f.jpg","width":"758"},{"desc":"","height":"386","title":"","url":"https://p0.ssl.img.360kuai.com/t01758e67640bc0e655.jpg","width":"758"},{"desc":"","height":"543","title":"","url":"https://p0.ssl.img.360kuai.com/t01d3c721896c8e1296.jpg","width":"758"},{"desc":"","height":"550","s_url":"https://p0.ssl.img.360kuai.com/t0171deb0b64f872ef1_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0171deb0b64f872ef1.gif","width":"600"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1684464060000,"pure":"","rawurl":"http://zm.news.so.com/39c2cb1a9b68fe238e29d923f6a12d76","redirect":0,"rptid":"ee8ee0dfc82f8bb7","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"Axure中继器全选操作的“半选中状态”及框选

隗丽泡1229at the sale和in sale有什么区别 -
谈婉制18026405875 ______ at the sale和in sale的区别为:读音不同、含义不同、用法不同.百 一、读音不同 1.at the sale 读音:度英 [æt seɪl] 美 [æt seɪl] 2.in sale 读音:英 [ɪn seɪl] 美 [ɪn seɪl] 二、含义不同 1.at the sale 释义:折(降)价(出售版).权 2.in ...

隗丽泡1229求in the first time和at the first time 、for the first time的区别~~ -
谈婉制18026405875 ______ the first time 第一次,是名词,在句子中只能做名词的成分. at the first time 是介词短语,是“在第一次” for the first time 也是第一次,是个副词短语,在句子中做状语. 例子: I felt nervous the first time I gave a speech to many students. 我第一次给学生做演讲时感到很紧张. He won the match at the first time. 他在第一次比赛中就获胜了. I felt repentance and sorrow for the first time . 我第一次感到后悔,感到难过.

隗丽泡1229in front与in the front区别 -
谈婉制18026405875 ______ in front和in the front都需要加of再加可数名词复数,表示在……的前面,但二者又有区别: in front of 表示广义的在……之前,没有空间范围的限制,反义词是behind.例如: 1.Tom sits in front of me.汤姆坐在我的前面. 2.There is a beautiful ...

隗丽泡1229in ten minutes 是表示什么的时间状语 -
谈婉制18026405875 ______ in ten minutes“十分钟内;十分钟后” 与完成时连用

隗丽泡1229in the end和finally在用法上有什么区别吗?
谈婉制18026405875 ______ finally通常用于句首或动词之前,可以用句中 He finally got it.Finally,he got it.而in the end 不能用句中 其余用法相同 意思方面 二者基本一样 不过finally 意思略多 有时带有感情色彩 “终于” Finally,china got all of the golden medals.而in the end 就显得很平淡 没什么感情(体会一下下) 还有in the end 用在书面中 阐述说明中多 而finally用在正式和非正式场合都可 很高兴帮助你

隗丽泡1229in the front可以单独用吗,和in front 有什么区别
谈婉制18026405875 ______ 不能单独用 in front和in the front都需要加of再加可数名词复数,表示在……的前面,但二者又有区别:in front of 表示广义的在……之前,没有空间范围的限制,反义词是behind.例如:1.Tom sits in front of me.汤姆坐在我的前面.2.There is a ...

隗丽泡1229in his twentieth这个短语对吗? -
谈婉制18026405875 ______ 应该没有这样的说法.如果说具体几岁,那直接用at 20即可,如果是在20多岁时,则需要用in his twenties.

隗丽泡1229英语回答 :in后面也可以直接跟表示服装的名词,此时,in的意思是? -
谈婉制18026405875 ______ 穿 XX 的意思. 例如 that women in red, 穿红衣服的女人

隗丽泡1229. A: Whose shirt is this? Is it Tom's? B: No, it isn't. - ------------ - is white. A.Mine B. -
谈婉制18026405875 ______ C 本题考查的名词性物主代词与形容词性物主代词的区别,名词性物主代词后能接名词,而形容词性物主代...

隗丽泡1229in a minute和 after minute有什么区别 -
谈婉制18026405875 ______ 前者是在那时间内 后都是那时间后

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024