如何设置添加有百分比进度的进度条原型图(新)

 时间:2024-10-13 21:18:07

1、首先我们需要创建一个新的工作区,用于创建我们的自定义的进度条

如何设置添加有百分比进度的进度条原型图(新)

2、准备我们需要进行展示进度条原型需要的元件,两个矩形,一个文本标签,然后按照如下的方式进行排版,然后分别命名背景、进度,以及进度显示

如何设置添加有百分比进度的进度条原型图(新)

3、然后设置进度元件的位置以及宽度,原则是将进度的元件覆盖到背景的上面,然后设置进度的宽度以及颜色

如何设置添加有百分比进度的进度条原型图(新)

4、把文本标签,放到最上层,然后放到背景长度的一半的位置,设置文本标签为隐藏状态,方法是在标签上右键点击,选择设置为隐藏

如何设置添加有百分比进度的进度条原型图(新)

5、然后进行交互的设置操作,设置进度元件的交互状态,点击进度元件,在载入时的用例里面设置具体的参照下图操作

如何设置添加有百分比进度的进度条原型图(新)

6、然后设置百分比进度文本的交互,添加更多事件里面找到显示时的时间,双击进入设置页面,具体设置如下

如何设置添加有百分比进度的进度条原型图(新)

7、设置的函数为[[Math.floor(LVAR1.width/LVAR2.width*100)]]%,百分比的设置函数,就是设置的进度的宽度和背景的宽度的比

如何设置添加有百分比进度的进度条原型图(新)

8、然后点击Axure软件的预览功能,在浏览器中进行预览

如何设置添加有百分比进度的进度条原型图(新)
  • QQ浏览器怎样设置为无图模式?
  • 灵魂潮汐幻境遗迹3攻略
  • 宝贝详情页设计要点
  • PS如何使用自由变换的斜切功能?
  • Axure如何制作带提示信息的输入框
  • 热门搜索
    教师节手抄报简单又漂亮 小学生二年级手抄报 数学王国手抄报 手抄报的边框 饮食与健康手抄报 关于宇宙的手抄报 庆祝国庆手抄报 中秋节手抄报大全 小学手抄报大全 防火安全手抄报