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

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

1. 创建基本表格结构

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

2. 填充表格内容

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

3. 设计左滑删除功能

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

4. 遵循Element UI风格

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

5. 预览和测试

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

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

相关推荐
招风的黑耳19 小时前
高标准农田信息化管理系统实战应用大纲
智慧农业·axure·农田管理·高标准农田
招风的黑耳8 天前
Axure 高保真视频播放器原型设计实战:10 个关键交互场景详解
axure·视频播放器
招风的黑耳9 天前
Axure 可视化原型设计效果全景展示
axure·可视化大屏·大屏端
招风的黑耳10 天前
用Axure中继器快速搭建高复用条形图原型
axure
招风的黑耳11 天前
Axure动态滑块进度器设计指南:打造高效交互体验
交互·axure·photoshop
招风的黑耳12 天前
从水电大屏到全行业通用方案:用Axure搭建可视化大屏原型的完整方法论
ui·axure·photoshop
夜郎king1 个月前
Axure 原型落地 HTML:基于 Trae Solo 实现 GIS 多级行政区划切换全流程实践
axure·trae solo·gis可视化
测试修炼手册2 个月前
[测试工具] Axhub MCP:把 Axure PRD 变成测试用例
测试工具·测试用例·axure
梓贤Vigo2 个月前
【Axure原型分享】AI自动回复机器人
交互·产品经理·axure·原型
xy34532 个月前
Axure9.0中继器-初识篇
产品经理·axure·原型