WEB元件库打造全过程(一)--单选按钮篇【Cchen姓陈的】 获赏8金币 基础教程

Cchen姓陈的 普通用户 2019-10-29 2349

【Cchen姓陈的】出品 --- WEB元件库打造全过程

本文是《WEB元件库打造全过程》第一篇--单选按钮篇

授人以鱼不如授人以渔,所以每一篇的教程中都会附带一个思考的段落,阐述整体的思路


单选按钮作为WEB元件中的重要组成部分,在WEB网页中有着大量的应用场景,所以也作为教程的第一篇(我是不会告诉你因为色彩、字体、边框、按钮这些没啥好写的原因)

效果预览:

思考:

什么是单选按钮,作为单选按钮最重要的属性是什么?单选按钮制作过程中有哪些注意事项和改进点?

制作过程:

准备工作:

单选按钮的圆形图标:

可上iconfont进行svg图标下载或直接下载本文教程中提供的附件danxuanxuanzhong-copy.svg

第一步:

axure软件中,直接拖入下载的单选图标,点击图标,并在属性栏中或右键菜单中将其转换为形状,

注意:本文中的单选图标为两个圆圈组成,内部圆圈可作为选中态


点击选择单选图标中的内部圆圈,在属性中,设置鼠标悬停、鼠标按下、选中、禁用等交互样式,主要设置填充颜色

第二步:

直接拖入一个矩形框,并将矩形框大小设置为适当大小,拖放置单选按钮右侧,边框设置为无,填充为透明,双击矩形框,设置文字为“备选项”

设置鼠标悬停、鼠标按下、选中、禁用等交互样式,主要设置文字颜色,同上一步

第三步:

同时选中单选图标和矩形框,右键或Ctrl+G设置为组合,点击属性中的组合,勾选“允许触发鼠标交互”,并且设置选项组名称,名称可自行设置,不与其他选项组重复即可,该步骤将决定多个单选按钮能否实现单选效果的关键,切记要设置选项组

第四步:

选中单选按钮组合,设置交互动作

1、设置鼠标单击时,选中当前元件为true


第五步:

复制多个已设置好的单选按钮组合,形成单选按钮组


现在就完成了单选按钮的全部制作过程,预览看看自己的成果吧~~

有兴趣的小伙伴,可以试试用中继器的方式制作单选按钮组

上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 8金币
最新回复 (10)
  • 猴神大叔(千千岩求女) 普通用户 2020-7-23
    0 引用 11
    感谢楼主的分享,好好学习中!
  • 单单 普通用户 2020-3-20
    0 引用 10
    非常好,可以学习学习嘛
  • 哎哟还挺难 普通用户 2020-3-11
    0 引用 9
    感谢
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 8
    感谢分享
  • 咋咯 普通用户 2019-12-2
    0 引用 7
    谢谢
  • 染墨成霜 普通用户 2019-11-4
    0 引用 6
    感谢
  • 黯黄老师 管理员 2019-10-30
    0 引用 5
    Cchen姓陈的 我这看帖子的动态效果图是正常显示的
    是一个小BUG  已经修复了  你重新上传一下就可以了。
  • 沈十三 管理员 2019-10-30
    0 引用 4
    经多人验证,确实无法正常显示,建议重新上传一下。
  • Cchen姓陈的 普通用户 2019-10-29
    0 引用 3
    沈十三 感谢你的分享,效果预览图无法正常展示哦。
    我这看帖子的动态效果图是正常显示的
  • 沈十三 管理员 2019-10-29
    0 引用 2
    感谢你的分享,效果预览图无法正常展示哦。
返回
发新帖
AxureShop
AxureShop
AxureShop