首页 >>  正文

行高列宽在哪设置

来源:baiyundou.net   日期:2024-09-21

本篇文章,将分享一个干货——教会你如何在Axure表格中,制作一个可以通过鼠标拖动来调整行高列宽的中继器表格。其过程分为四步,能帮助你快速上手,接下来,我们看看作者的操作吧。

表格是在系统软件中非常常用的工具。表格通常由行和列组成,用于以结构化的方式显示和组织数据。它们在各种场景中都有广泛的应用,包括数据分析、数据录入、报表生成、项目管理和数据可视化等领域。

今天作者就教大家如何在Axure里制作一个能通过鼠标拖动调整行高列宽的中继器表格模板。

一、效果展示

  1. 鼠标移动到中继器表格某行的底部,会出现一条可拖动的虚线,上下拖动可以调整该行的高度
  2. 鼠标移入某列表头右侧,会出现一套白线,左右拖动白线可以调整该列的宽度

原型地址:https://ybog3v.axshare.com/#g=1

二、制作教程

1. 中继器表格的制作

我们主要用中继器来制作表格内容的主体,所需元件包括矩形,文字,线段,如下图所示摆放:

每列要有一个对应的矩形,用于设置每列显示的值,这些表格的小矩形我们要用透明色,不要用白色。如果用白色就会挡住下面的背景矩形,也会挡住中继器的背景色,有需要的伙伴也可以设置单双行交替的颜色。

操作列我们用不同颜色的文字代表不同操作即可。

背景矩形我们设置一个选中样式,填充颜色为浅蓝色。将上面所有元件组合在一起,鼠标移入组合时,我们用选中的交互,设置背景矩形为选中状态,这样就做出了高亮显示的效果。

鼠标移出组合时,我们用取消选中的交互,将背景矩形取消选中,这种就可以恢复原来的颜色。

在矩形底部,我们要增加一条虚线,默认我透明色,鼠标悬停的交互样式为黑灰色,我们要把这条线段转为动态面板,因为只有动态面板有拖动时的交互事件。

转为动态面板后,可以适当调整动态面板的高度和虚线所在的位置,因为如果仅仅是1的高度,就不容易拖动到,案例中动态面板高度是5,所以线段y值为3,刚好在中部。

然后我们在中继器器表格里添加对应的列,有几列内容就添加几列,案例中是6列:

填写好之后,我们在中继器每项加载时,用设置文本的交互,分别将column1~6列的内容,设置到矩形1~6中。

这样表格里的数据就显示出来了,中继器表格内容基本就完成了。

2. 拖动设置表格行高

我们在虚线的动态面板拖动时,用移动的交互,让他跟随鼠标垂直移动,这样虚线就可以跟随鼠标拖动上下移动了。

不过这里需要注意,我们要设置一个虚线上下移动的范围,如果不设置的话,就会导致某一行拖动之后太小,文字就会比表格高度要高。

所以我们可以通过移动事件里的界限,设置移动的边界。

然后我们再用设置尺寸的交互,将中继器里的组合调整他的高度,其实他的高度就是线段面板所在的底部的y坐标值,我们可以直接用bottom函数来获取。

这样我们就完成了垂直方向拖动调整行高的效果了。

3. 表头的设置

表头主要是用矩形和垂直线,如下图所示:

这个表格有多少列,就增加多少个矩形,表头的矩形要和表格里对应矩形的宽度是一致的。

然后我们在两个矩形链接处增加垂直线,默认灰色,移入样式设置为白色,如果背景色是白色,最后一根白线就可能看不到了,所以可以自行替换成其他颜色。

和上面水平线一样,也是要将他转为动态面板。因为只有动态面板可以拖动,同样的可以适当增加动态面板的宽度和垂直线的位置,方便我们拖动到他。

这样我们表头就完成了。

4. 拖动设置表格列宽

鼠标拖动垂直线面板的时候,我们首先用移动的交互,让他跟随鼠标水平方向移动。

当然了,和前面一样,移动我们要增加一个边界,因为这里不是在中继器里面,所以我们要控制格子的最小值。例如是60,我们就可以用每个各自的x坐标值+最小值60,得出拖动的边界。

然后我们再用设置尺寸的交互,将表头和中继器表格里面两个对应的格子的宽度设置为新的宽度,新的宽度其实就是动态面板的x坐标-对应格子矩形的x坐标

那因为这里动态面板宽度不是1,我们前面为了好拖动,设置了3,所以还要减去1。

这样就设置完成当前的格子的尺寸,就是当前格子尺寸设置好了。但是后面的格子是不会自动往前靠的,所以我们还需要用移动的交互,将后面的格子往前移动。

所以我们要依次移动,将2移动到1的后面,将3移动到2后面……将7移动到6后面,这里我们可以用right函数动态获取每个矩形最右侧的坐标值。

表头和中继器表格里的都是这样移动。

移动完格子之后,我们用同样的操作,将每列的垂直线的动态面板移动到每隔的右侧。

最后,因为中继器里除了对应每一列内容的矩形,还有背景矩形、虚线以及其面板,如果列宽改变了,上面三个元件的尺寸同样要跟着一起改变的。

我们用设置尺寸的交互,将他们设置成和整个表头组合的宽度一致即可。

这样就完成了一根垂线动态面板的交互,后面其他垂线也是一样的交互,我们可以通过复制粘贴,选择对应的元件和变量即可完成。

这样我们就完成了拖动调整行高列宽的表格原型模板的制作了,下次使用也很方便,我们只需要在中继器表格里填写表格值,即可自动生成交互效果。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

","gnid":"968336ea15df0ff67","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t017e8f9e2495a6278a.jpg","width":"900"},{"desc":"","height":"810","s_url":"https://p0.ssl.img.360kuai.com/t01c90e797c0f5c0fe4_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01c90e797c0f5c0fe4.gif","width":"1694"},{"desc":"","height":"159","title":"","url":"https://p0.ssl.img.360kuai.com/t0117222da48db6fb0d.jpg","width":"130"},{"desc":"","height":"216","title":"","url":"https://p0.ssl.img.360kuai.com/t016127cb61b7f7d1a4.jpg","width":"604"},{"desc":"","height":"193","title":"","url":"https://p0.ssl.img.360kuai.com/t01c86c532a9d5ffeea.jpg","width":"188"},{"desc":"","height":"147","title":"","url":"https://p0.ssl.img.360kuai.com/t017bb108f35b2b0d80.jpg","width":"348"},{"desc":"","height":"563","title":"","url":"https://p0.ssl.img.360kuai.com/t01d779f5c846a00b3d.jpg","width":"229"},{"desc":"","height":"178","title":"","url":"https://p0.ssl.img.360kuai.com/t01ae07852497bca5b0.jpg","width":"254"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1688181180000,"pure":"","rawurl":"http://zm.news.so.com/8aa0f4a8e5617b94787fe7350b8c5e8c","redirect":0,"rptid":"9ca1e3b21ec5c0a4","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[{"clk":"ktechnology_1:移动","k":"移动","u":""}],"title":"Axure高保真原型:拖动调整行高列宽的表格

乐终竹1220WORD里如何设置表格的列宽和行高 -
严慧宗18164626396 ______ 44怎样调整word表格的行高和列宽,全国计算机等级考试一级,计算机基础及MS Office应用上机指导.

乐终竹1220如何调整表格的行高和列宽 -
严慧宗18164626396 ______ 选中表格行或列,右键-表格属性-行-指定高度-输入所需值-右边选为固定值.列同样.确定即可.或者直接在表格上拖动调整,若要平均分布行或列,可选中后单击表格工具栏上的平均分布各行或各列.

乐终竹1220如何设置excel单元格行高和列宽 -
严慧宗18164626396 ______ 可以用下列方法之一: 1、选中相关行或列,鼠标放置于行标签间或列标签间,光标变为双箭头时拖拉; 2、选中相关行或列,右击行或列标签,“行高”或“列宽”; 3、选中相关行或列,开始--单元格--格式,“行高”或“列宽”.

乐终竹1220excel怎么设置行高和列宽 -
严慧宗18164626396 ______ 选定具体行(或列)——右键——行高(或列宽):输入磅值——确定. 或 选定具体行(或列)——菜单栏——开始——单元格版块——格式——行高(或列宽):输入磅值——确定.

乐终竹1220如何在excel设置列宽和行高 -
严慧宗18164626396 ______ 方法/步骤 打开我们需要进行设置的excel表格(以下图片为空表,仅供参考) 点击选中我们需要设置的单元格,鼠标点击然后选中 选中之后将鼠标移动到wps表格处点击下拉,然后在其下拉菜单中找到“格式” 在格式的选项中我们可以看到“行”和“列”,在其下拉菜单里有可以看到“行高”“列宽”然后点击选择,先点击进行设置 点击行行高之后会出现一个可以设置大小的选项,在这里输入你想设置的行高大小,然后点击确定 6 同样,列宽也是选择之后会出现一个设置大小的选项,然后在这里输入你想要设置的大小,点击确定即可

乐终竹1220在工作表里怎样设置行高和列宽呢?
严慧宗18164626396 ______ 格式-行-行高,输入一个行高值. 全部选定多个目标列,再单击右键,在弹出菜单中点选“列宽”,输入相应数值后“确定” 行高也可以这样设置

乐终竹1220表格设置行高 - 制作表格设置行高
严慧宗18164626396 ______ 制作表格设置行高打开需要编辑的Word文件,将光标定位在需要调整行高的单元格;鼠标右键,选择【表格属性】,在对话框里选择【行】;调整好行的高度值,最后点...

乐终竹1220电子表格列宽行高怎样设置 -
严慧宗18164626396 ______ 提供几种方法供选择使用: 1、格式——行、列——按需要设置. 2、将行号刷黑,用左键按住行号接缝处上下拉动,调整行高. 3、将列号字母刷黑,用左键按住列号接缝处左右拉动,调整列宽.

乐终竹12202003版word行高和列宽
严慧宗18164626396 ______ 如果想改变表格中的所有列宽和行高,我们点击表格左上角的方框箭头图标,这样就全选表格,或者按住鼠标左键不放,然后拖动鼠标全选表格.表格选中后,接着单击鼠标右键,然后在扩展框中选中“表格属性”选项,这样将会弹出“表格属性”对话框.在“表格属性”对话框中选择“行”,然后点击“指定高度”,这样就可以设置表格的行高啦.行高设置好后,我们再选择“列”,然后输入数字,设定列宽.最后点击“确认”按钮,这样表格的列宽和行高就设置好啦.

乐终竹1220excel中怎样调整行高和列宽 -
严慧宗18164626396 ______ 方法/步骤 当在单元格中输入过长的字符串后,由单元格容纳不下,只能显示部分内容或以其他形式表示,此时完整的数据仍存于此单元格中.因此,就有必要调整行高与列宽,以使数据能在屏幕上完整显示.首先打开需要设置的EXCEL表格....

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024