基于Axure与Element UI风格的左滑删除行表格设计

简介: 本文介绍如何在Axure RP中设计一个符合Element UI风格的可左滑删除行的表格。涵盖创建表格结构、填充数据、添加左滑交互与删除图标、设置视觉样式(颜色、字体、边框等),并进行预览测试,提升用户体验。

ezgif-111a528a47d9bdbe.gif

预览:https://2tn7fx.axshare.com

1. 创建基本表格结构

  1. 打开Axure RP:启动Axure RP软件并创建一个新的项目。
  2. 拖放表格元件:从元件库中拖放一个“表格”元件到画布上。
  3. 设置表格列数和行数:根据需求设置表格的列数(例如序号、日期、姓名、省份、状态、地址)和初始行数(可以先设置几行作为示例)。
  4. 调整列宽:根据内容长度调整每列的宽度,使其看起来整齐美观。

2. 填充表格内容

  1. 输入表头文本:在表格的第一行(表头行)中,分别输入“序号”、“日期”、“姓名”、“省份”、“状态”、“地址”。
  2. 填充数据行:在后续行中,填充示例数据,如日期、姓名、省份、状态(已发货、已签收、待发货)和地址信息。

3. 设计左滑删除功能

  1. 添加删除图标
  • 从元件库中拖放一个“图标”元件(例如一个垃圾桶图标)到每一行的最左侧,作为删除图标。
  • 调整图标的大小和位置,使其位于每行的左侧中间位置。
  1. 设置交互效果
  • 选中某一行(不包括表头行),在“交互”面板中点击“新建交互”。
  • 选择“拖动时”事件,然后选择“移动”动作。
  • 在“移动”设置中,选择“水平拖动”,并设置移动的边界(例如向左移动的最大距离为删除图标的宽度)。
  • 再新建一个交互,选择“拖动结束时”事件。
  • 在“拖动结束时”的交互中,添加条件判断:如果拖动距离超过一定阈值(例如50像素),则显示删除图标;否则,将行移回原始位置。
  • 当删除图标显示时,再为删除图标添加“单击时”事件,设置“删除”动作,删除当前行。

4. 遵循Element UI风格

  1. 颜色和字体
  • 表头背景色可以设置为浅灰色(如#F5F7FA),字体加粗。
  • 表格内容字体使用常规字体,颜色为深灰色(如#606266)。
  • 状态列根据不同的状态使用不同的颜色标识,例如“已发货”用绿色,“已签收”用蓝色,“待发货”用橙色。
  1. 边框和间距
  • 为表格添加细边框,颜色为浅灰色(如#EBEEF5)。
  • 调整行高和列间距,使其符合Element UI的紧凑风格。

5. 预览和测试

  1. 预览:点击Axure工具栏中的“预览”按钮,查看表格的显示效果和交互功能是否正常。
  2. 测试左滑删除:在预览界面中,尝试左滑某一行,查看删除图标是否显示,以及单击删除图标是否能正确删除该行。

通过以上步骤,你可以在Axure中设计出一个遵循Element UI风格的左滑删除行表格。这样的表格在实际项目中可以提供良好的用户体验,方便用户快速删除不需要的数据行。

相关文章
|
7月前
|
前端开发 JavaScript Java
Axure原型设计:当文件上传遇上“魔法”,开发都得瞪大眼!
这是一款基于Axure 9开发的高保真文件上传动态交互原型,含文件列表与单图上传双案例。支持进度显示、多状态反馈(成功/失败/上传中)、重传、下载删除等真实交互,并融合JavaScript增强体验,助力产品、设计、前端高效协作与灵感落地。(239字)
256 1
|
缓存 JavaScript
运行vue报错npm ERR! A complete log of this run can be found in解决办法
在这里我们需要清除npm的缓存: (1)在cmd命令行窗口中输入:npm cache clean --force (2)然后再运行我们需要安装模块的命令,输入npm install。 有时是网络问题,依赖包加载不完整,删掉node_modules文件后,重新执行npm install即可。
3082 0
|
7月前
|
安全 数据安全/隐私保护 C++
HTTPS ECDHE 握手全解析
HTTPS ECDHE握手详解:基于椭圆曲线的临时密钥交换,实现前向保密与高效安全。解析TLS 1.2下客户端与服务器如何通过6步完成密钥协商,对比RSA握手机制,揭示ECDHE为何成为现代网站标配。
733 1
|
10月前
|
传感器 编解码 数据挖掘
ASTER 全球数字高程模型 V003
ASTER GDEM V3由NASA与METI合作开发,提供全球陆地高程数据,空间分辨约30米,覆盖北纬83°至南纬83°。基于188万景ASTER影像自动生成,含DEM与场景数图层,数据经云掩膜、异常值去除及多源融合优化,适用于地形分析,但可能存在局部伪影。
672 1
|
资源调度 前端开发 JavaScript
Tailwind CSS那些事儿
Tailwind CSS那些事儿
1481 1
|
人工智能 算法 C语言
详解树状数组(C/C++)
详解树状数组(C/C++)
|
开发者 UED
Axure“Web高端交互元件库”:产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容,分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件,设计师与开发者可以根据具体项目需求,快速找到并应用这些元件,从而大大提升工作效率。
404 1
|
JavaScript Java 测试技术
基于SpringBoot+Vue的 在线文档管理系统附带文章和源代码
基于SpringBoot+Vue的 在线文档管理系统附带文章和源代码
487 1
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
Axure 弹出框遮罩层灯箱效果
Axure 弹出框遮罩层灯箱效果
372 0

热门文章

最新文章