首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

优化单选框 radio 样式:随点击变换选中选中状态图片

果酱小程序的页面管理,其中一个模块是图片魔方,就是用户可以给小程序首页设置不同数量和布局的图片魔方来装修,其中在设置图片模仿的时候,要选择几张图布局是怎么布局的,如下图所示: 这里的布局其实是一个单选框...radio,为了加强用户体验,我们通过示意图来演示这个布局下的图片魔方在小程序前端的效果,为区分选中选中状态,每种布局需要两种状态。...contain; margin-right:10px; } input[type="radio"]{ // 隐藏 radio display: none; } #label_layout_3-1{ // 选中的效果...background-image: url(cube-radio-3-1.png); } #layout_3-1:checked + #label_layout_3-1 { // 选中的效果,使用了

2.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

单选按钮的用户体验设计

单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中单选按钮,之前的选择就会恢复成选中。...正确的使用单选按钮会非常好—它们能够阻止用户输入错误的数据,因为它们仅显示合法的选项。...一、单选按钮的名字由何而来 单选按钮的命名源自于旧式汽车中收音机用来切换频道的物理按键—当一个按钮被按下,其他的就会被弹出,留下唯一的按钮处于被选中的状态。...如果单选按钮只被用来影响一个命令的执行,那最好还是用显示命令的变化来取代。这样做允许用户选择单个交互的正确命令。...单选按钮很容易使用纸上原型测试,所以你不需要实现任何产出来检测用户是否理解该设计并正确地使用它。

6.1K100

CompoundButton

CompoundButton 具有两种状态的按钮选中选中。当按钮被按下或点击时,状态会自动改变。 这是一个抽象类,目前有的子类有 复选框,单选按钮,开关,切换按钮。...复选框 复选框是一种特定类型的双状态按钮,可以选中或取消选中单选按钮 单选按钮是两个状态的按钮,可以选中也可以取消选中。...切换按钮选中/选中状态显示为带有“指示灯”指示器的按钮,默认情况下带有文本“ON”或“OFF”。...CompoundButton的XML 属性 android:button Drawable 用于按钮图形(例如,复选框和单选按钮)。 android:buttonTint 应用于按钮图形的色调。...int getAutofillType() 描述此视图的自动填充类型,因此 AutofillService可以AutofillValue 在自动填充视图时创建正确的类型。

2K20

Qt Style Sheet实践(三):QCheckBox和QRadioButton

单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自动取消。复选框则可以让用户同时选中多个选项,这在多项选择的情况下非常有用。...单选按钮和复选框应用广泛,在WEB表单、软件配置界面常常是不可或缺的元素。这篇博文主要讲述Qt中单选按钮和复选框如何通过样式表进行外观定制。...基本实现       单选按钮(QRadioButton)的基本特征是互斥。当一个按钮选中,系统自动取消其他按钮选中状态。当然,前提是这些按钮都要放置同一个父组件(Parent Widget)中。...这样,当一个按钮选中的时候其他选中按钮将被自动取消。但是缺点是:如果我们想要获取当前被选中按钮是哪一个,不太方便判断。一个简单而粗暴的方法是,循环遍历每个单选按钮的状态进行检查。...不过传统设计中单选按钮都设计成了原型,这里的图片来自金山卫士。相比于复选框(QCheckBox),单选按钮少了一个状态:indeterminate。

8.9K60

JavaSwing:JRadioButton-单选按钮开发详解

单选按钮的实现-可以选择或取消选择的项目,并向用户显示其状态。 与ButtonGroup对象一起使用以创建一组按钮,其中一次只能选择一个按钮。...构造方法: 无文本,选中 JRadioButton() 有文本,选中 JRadioButton(String text) 有文本,并指定是否选中 JRadioButton(String...) void setForeground(Color fg) /* 以下方法定义在 javax.swing.AbstractButton 基类中 */ // 设置单选按钮是否选中状态 void setSelected...(boolean b) // 判断单选按钮是否选中 boolean isSelected() // 设置单选按钮是否可用 void setEnabled(boolean enable) // 设置单选按钮在...): 当有多个单选按钮时,一般只允许一个单选按钮选中,因此需要对同一类型的单选按钮进行分组,如下: // 创建一个按钮组 ButtonGroup btnGroup = new ButtonGroup()

2K31

JavaSwing_2.3: JRadioButton(单选按钮)「建议收藏」

JButton 常用构造方法: // 无文本,选中 JRadioButton() // 有文本,选中 JRadioButton(String text) // 有文本,并指定是否选中 JRadioButton...setFont(Font font) void setForeground(Color fg) /* 以下方法定义在 javax.swing.AbstractButton 基类中 */ // 设置单选按钮是否选中状态...void setSelected(boolean b) // 判断单选按钮是否选中 boolean isSelected() // 设置单选按钮是否可用 void setEnabled(boolean...enable) // 设置单选按钮在 默认、被选中、不可用 时显示的图片 void setIcon(Icon defaultIcon) void setPressedIcon(Icon pressedIcon...): 当有多个单选按钮时,一般只允许一个单选按钮选中,因此需要对同一类型的单选按钮进行分组,如下: // 创建一个按钮组 ButtonGroup btnGroup = new ButtonGroup()

48440

Java GUI编程11—单选按钮:JRadioButton

) 创建一个单选按钮,设定图片,并设定是否选中 3 public JRadioButton(String text) 创建一个单选按钮,制定按钮文本,默认不选中 4 public JRadioButton...() 返回该按钮是否被选中,如果选定了按钮,则返回 true,否则返回 false。...问题: 上面的程序中只是在按钮样式像单选按钮,单并不能实现单选的功能,我们可以同时选中上面的所有按钮。运行结果如下。 从运行结果来看,此时已经形成多选的功能了。...现在只能选中一个按钮,如果选中下一个按钮,上一个选中按钮就会变成选中。...ButtonGroup group=new ButtonGroup(); //把单选按钮添加到按钮组中,这样只能选组中的一个按钮,真正实现单选 group.add(jradio1);

4.4K20

【Flutter 专题】109 图解自定义 ACERadio 单选

groupValue 从而响应 onChanged 回调; 案例尝试 onChanged Radio 单选框一般分为三个状态,分别为选中状态、选中状态和不可选中状态;onChanged 为单选选中的回调...& 不可选颜色 Radio 并未提供选中状态和不可选中状态按钮颜色;和尚分析源码,发现 选中状态 与 ThemeData.unselectedWidgetColor 颜色对应,不可选中状态 与...ACERadio 为了更灵活的应用 Radio 单选框,和尚准备在此基础上扩展如下几个方面: 动态设置 选中状态颜色; 动态设置 不可选中状态颜色; 动态设置 选中按钮尺寸; 添加状态...选中状态 & 不可选中状态 选中状态 & 不可选中状态 可以通过 ThemeData 来动态修改,和尚为了方便,添加了 unCheckedColor & disabledColor 可直接进行设置...选中按钮尺寸 Radio 单选框尺寸是固定的,和尚为了更方便的修改,添加了 radioSize 尺寸来动态修改按钮尺寸,且在动态设置按钮尺寸之后依旧支持最小点击范围的三种样式; return Column

1.5K40

C++ Qt开发:RadioButton单选框分组组件

setChecked(bool checked) 设置单选按钮选中状态,true表示选中,false表示选中。 isChecked() const 判断单选按钮是否处于选中状态。...setAutoExclusive(bool enabled) 设置是否自动将同一组中的其他单选按钮设为选中状态。...checkState() const 获取单选按钮选中状态,返回Qt::Checked、Qt::Unchecked或Qt::PartiallyChecked。...toggled(bool checked) 信号,当单选按钮选中状态发生改变时触发。参数checked表示是否选中。 click() 模拟点击单选按钮,触发点击事件。...这些方法提供了对QRadioButton的一些基本操作,包括设置文本、选中状态、信号与槽等。通过这些方法,可以在应用程序中方便地创建和控制单选按钮

42710

Vue表单输入绑定

文章目录 1、简介 2、单行文本输入框 3、多行文本输入框 4、复选框 5、单选按钮 6、选择框 7、值绑定 7.1 复选框 7.2 单选按钮 7.3 选择框的选项 8、实例:用户注册 1、简介   ...true,选中则值为false;后者绑定的是同一个数组,选中的复选框的值将被保存到数组中。...当单选按钮选中时,v-model指令绑定的数据属性的值会被设置为该单选按钮的value值。...7.1 复选框   在使用复选框时,在元素上可以使用两个特殊的属性true-value和false-value来指定选中状态下和选中状态下v-model绑定的值是什么。 <!...如下图 7.2 单选按钮   单选按钮选中时,v-model绑定的数据属性的值默认被设置为该单选按钮的value值,可以使用v-bind将云南苏的value属性再绑定到另一个数据属性上

7.3K70

《手把手教你》系列技巧篇(三十三)-java+ selenium自动化测试-单选和多选按钮操作-上篇(详解教程)

2.什么是单选框、复选框?   单选按钮一般叫raido button,就像我们在电子版的单选答题过程一样,单选只能点击一次,如果点击其他的单选,之前单选选中状态就会变成选中。...单选按钮的点击,一样是使用click方法。多选按钮,就是复选框,一般叫checkbox,就像我们在电子版的多选答题过程一样,可以选择多个选项,多选按钮的点击,同样是使用click方法。...:isSelected()   有时单选框、复选框会有默认选中的状况,那么有必要我在操做单选框或者复选框的时候,先判断选项框是否为选中状态。...使用element.isSelected()来获取元素是否为选中状态,返回结果为布尔类型,若是为选中状态返回true,若是选中返回为false。...org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇(三十三)-java+ selenium自动化测试-单选和多选按钮操作

1.9K20

后台系统设计(上篇:选择)

但在极少数情况下,默认选项可能会不正确。例如,涉及性别、政治、宗教信仰等,这些情况下可以不提供默认选项。...·在用户与单选按钮交互时,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中和禁用)。...全选操作(全选状态): ?...·在用户与复选框交互时,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中、禁用和全选状态)。 讨论:仅有两个互斥的选项(二元)是选择单选按钮还是复选框?...三、Icon button 图标按钮 图标按钮可以说是结合了单选按钮、复选框及命令控件的变形形式,性质上存在互斥(单选)和非互斥(多选)。

9.6K21

超全的Android组件及UI框架

RadioButton 单选按钮 5.1 常用属性 RadioButton 单选按钮就是只能够选中一个,所以我们需要把 RadioButton 放到 RadioGroup 按钮组中,从而实现单选功能...checked android:checked 设置或获取 RadioButton 的选中状态 如果 RadioButton 选中,那么点击它可以让它选中,但反过来是不可以的,就是不能从选中状态到选中状态...RadioGroup 单选按钮组 6.1 常用属性 要实现 RadioButton 的 单选功能,需要把所有的 RadioButton 放到 RadioGroup 里面  用于将几个 RadioButton... 组在一起形成单选按钮组,实现单选功能,也就是选中一个,会取消其它选项的选中 RadioGroup 只提供了一个 XML 属性 android:checkedButton 用于指定初始化时选中的 ID...CheckBox 复选框 7.1 常用属性 Android CheckBox (复选框) 继承自 Button ,可以说是只有两种状态的按钮 (选中选中状态) 可以把多个 CheckBox 放在一起实现同时选中多项

6K30

Android widget之CompoundButton

简介 具有两个状态的按钮,已选中选中。当按下或点击按钮时,状态会自动更改。...实现方法:onCheckedChanged( CompoundButton buttonView,boolean isChecked) buttonView 复合按钮视图的状态。...toggle() — 将视图的状态更改为当前状态的逆(反向) 子类 CheckBox 复选框:可以选中或取消选中的特定类型的双状态按钮。...RadioButton 单选按钮:是可以选中或取消选中的双状态按钮。当单选按钮被取消选中时,用户可以单击来选中它。 注:单选按钮通常与RadioGroup在一起使用。...当多个单选按钮在RadioGroup内时,检查一个单选按钮将取消选中所有其他单选按钮。 <?xml version="1.0" encoding="utf-8"?

2.2K20

Radiobutton

首先因为单选按钮有一个特性(一个被选中后,自动清除其它按钮选中状态) 所以使用方式也有点不同 错误示例 from tkinter import * root = Tk() r1 = Radiobutton...这样的话,两个单选按钮其实是“各自独立的” 正确的使用方法 from tkinter import * root = Tk() ButtonList = IntVar() # IntVar 是tkinter...的一个类,可以管理单选按钮 r1 = Radiobutton(root, variable=ButtonList, value=0, text="一号按钮") r2 = Radiobutton(root..., variable=ButtonList, value=1, text="二号按钮") # variable=从属的“管理类” value=索引/ID ButtonList.set(1) # 设置选中的位置...,如果越界则全部均不选中 # 有对应的get属性,用来获取选中项的索引 r1.pack() r2.pack() root.mainloop() 结果 ?

48520

【译】W3C WAI-ARIA最佳实践 -- 表单

如果该组中没有选项被选中,该三态复选框呈现的整体状态为选中。 用户仅使用一个操作,就可以改变三态复选框组中所有选项的状态: 选中整体复选框,可以选中组中的所有选项。...选中后,复选框元素状态 aria-checked 设置为 true。 如果选中,它的状态 aria-checked 设置为 false。...单选按钮单选按钮组,是一个可选中按钮的组合,被称为单选按钮,且在该组合中,只有一个按钮处于选中状态。...如果没有被选中单选按钮,那么将焦点设置在第一个单选按钮上。 Space: 如果该按钮还没有被选中,则选中当前聚焦的单选按钮。...在某些浏览器中,如果没有选中任何一个单选按钮,使用 Shift+ Tab 将焦点移动到单选按钮组,焦点将会被放置在最后一个单选按钮,而不是第一个单选按钮

8.2K30
领券