今天看啥  ›  专栏  ›  AT阿宝哥

《Axure官方文档译读》之0319:Table Widgets(表格部件)

AT阿宝哥  · 简书  ·  · 2020-01-15 17:21
Axure RP

Table Widgets

表格部件

Table widget

1、Editing Table Data

编辑表格数据

You can add text to a table cell or edit its current text via any of the options below:
您可以添加文本到表格单元格或编辑其当前文本通过以下任何选项:

  • Double-click the cell to enter text-editing mode
    双击单元格以进入文本编辑模式

  • Select the cell and press ENTER to enter text-editing mode
    选择单元格并按 ENTER 进入文本编辑模式

  • Select the cell and begin typing. (This option is only available if you have disabled single-key shortcuts)
    选择单元格并开始键入。(此选项仅在您禁用单键快捷方式时可用)

image

1.1、Pasting from Spreadsheet Applications

从电子表格应用程序粘贴

You can copy table data from spreadsheet applications like Microsoft Excel and Google Sheets and paste it into Axure RP as a table widget. First, copy the table cells in your spreadsheet app. Then, in Axure RP, right-click the canvas and select Paste Special → Paste as Table .

您可以从诸如Microsoft Excel和谷歌之类的电子表格应用程序中复制表数据,并将其作为表小部件粘贴到Axure RP中。首先,复制表格单元格在您的电子表格应用程序。然后,在Axure RP,右键单击画布,并选择 粘贴特殊→粘贴为表格

You can also paste tabular data into an existing table widget. To do so, select the top-left cell of the table and press CTRL V or CMD V . The pasted data will fill the cells already present in the table.

您还可以将表格数据粘贴到现有的表格小部件中。为此,选择表的左上角单元格并按 CTRL V CMD V 。粘贴的数据将填充表格中已经存在的单元格。

Note
提示
New columns and rows will not be added to existing table widgets when you paste data into them. If the table is too small to accommodate the pasted data, add more columns and/or rows to the table before pasting the data.
当您将数据粘贴到现有的表小部件中时,不会将新列和新行添加到这些小部件中。如果表太小,无法容纳粘贴的数据,请在粘贴数据之前向表*添加更多的列和/或行。

2、Editing Rows and Columns

编辑行和列

editing table widget rows and columns

2.1、Adding, Deleting, and Moving Rows and Columns

添加、删除、及移动行业列

To add a row or column to a table widget, right-click one of its cells or one of the grey row or column controls. In the context menu, choose from the following:

要将行或列添加到表小部件,请右键单击其单元格或灰色行或列控件之一。在上下文菜单中,选择以下内容:

  • Insert Row Above
    从上方插入行

  • Insert Row Below
    从下方插入行

  • Insert Column Left
    从左边插入列

  • Insert Column Right
    从右边插入列

To delete a row or column, right-click a cell in that row or column, or right-click the appropriate grey row or column control. In the context menu, choose Delete Row or Delete Column .

要删除行或列,请右键单击该行或列中的单元格,或右键单击适当的灰色行或列控件。在上下文菜单中,选择 删除行 删除列

To rearrange a table's rows and columns, select a grey row or column control and then drag it up/down or left/right.

若要重新排列表的行和列,请选择灰色的行或列控件,然后将其向上/向下或向左/向右拖动。

2.2、Resizing Rows and Columns

调整行和列的大小

You can change a row's height or a column's width by clicking one of its borders and dragging.
您可以通过单击某一行的边框并拖动来更改该行的高度或列的宽度。

You can also set an individual cell's width and height with the W and H fields in the Style pane. This will automatically resize the row and column that the cell is a part of.
您还可以使用 Style 窗格中的 W H *字段设置单个单元格的宽度和高度。这将自动调整单元格所属的行和列的大小。

To resize multiple cells at once, select the cells with a click-drag or by <kbd>SHIFT</kbd>-clicking each cell. Then, use the W and H fields.
要同时调整多个单元格的大小,请通过单击-拖动或<kbd>SHIFT</kbd>-单击每个单元格来选择单元格。然后,使用 W H 字段。

3、Special Interactions

特殊交互

3.1、Interacting with Individual Cells

与单个单元格相互作用

Each cell in a table widget has its own events that you can use to set up interactions specific to that particular cell. For example, you can configure a cell's Click or Tap event to show another widget on the page.

表小部件中的每个单元格都有自己的事件,可以使用它们来设置特定于特定单元格的交互。例如,您可以配置单元格的 Click或Tap 事件来在页面上显示另一个小部件。

You can also target individual table cells in interactions and conditions. For example, you can change the text on a cell with the Set Text action, and you can evaluate the text on a cell with the text on widget value option.

您还可以针对交互和条件中的单个表单元格。例如,您可以使用 Set text 操作更改单元格上的文本,您可以使用 text on widget value选项计算单元格上的文本。

interactively setting the text on a table cell

Tip
提示

When you mouse over a cell's name in the Select Widget dropdown, the cell is highlighted in yellow on the canvas. Look at the Column 3 cell in the screenshot above for an example.
当您在 Select窗口小部件 下拉菜单中鼠标移动一个单元格的名称时,该单元格在画布上以黄色突出显示。查看上面屏幕截图中的 列3 单元格作为示例。

You can also name individual table cells in the Interactions and Notes panes to make them easier to find.
您还可以在** interaction Notes**窗格中命名各个表单元格,以便更容易地找到它们。

4、Limitations and Workarounds

限制和解决方法

4.1、Images

图片

Table cells cannot contain images, only text. To simulate a column of images, create an empty column in your table and place image widgets on top of it.
表格单元格不能包含图像,只能包含文本。要模拟一列图像,请在表中创建一个空列并将图像小部件放置在其上。

4.2、Merging Cells

合并单元格

merging table cells with a rectangle widget

Table widget cells cannot be merged. To give the appearance of merged table cells, place a rectangle widget over the cells that would be merged. Then, set the text on the rectangle to the text that would have occupied the merged cells.

无法合并表小部件单元格。要给出合并后的表格单元格的外观,请在将要合并的单元格上放置一个矩形小部件。然后,将矩形上的文本设置为将占用合并单元格的文本。

4.3、Mouseover Style for Rows

行的鼠标悬停样式

To give the appearance of a mouseover or rollover style for an entire table row, place a rectangle widget on top of the row. Give the rectangle a semiopaque fill and assign it a :mouseover style effect.

要显示整个表行的鼠标悬停或翻转样式,请将一个矩形小部件放在该行的顶部。给矩形一个不透明的填充,并赋给它一个 :鼠标悬停 样式的效果。

4.4、Dynamically Adding, Removing, Sorting, and Filtering Rows

动态添加、删除、排序和过滤行

Table rows cannot be dynamically added, removed, sorted, or filtered in the web browser. To prototype this behavior, try one of the following:
无法在web浏览器中动态添加、删除、排序或筛选表行。要创建这种行为的原型,请尝试以下方法之一:

  • Use a multi-state dynamic panel to simulate dynamic changes to a table widget. In each state of the dynamic panel, put a table widget with the expected changes already made. When a given change needs to occur, show its corresponding dynamic panel state.

使用多状态动态面板来模拟表小部件的动态更改。在动态面板的每个状态中,放置一个表小部件,其中包含已经完成的预期更改。当给定的更改需要发生时,显示其相应的动态面板状态。

  • If you need to be able to make true dynamic changes to a table, use a repeater widget instead.
    如果需要对表进行真正的动态更改,可以使用repeater小部件。

4.5、Not Adaptive

不适应

All aspects of table widgets are consistent across all adaptive views. To style a table differently across adaptive views, you can "place" a different table widget in each adaptive view, "unplacing" from each view the table widgets designed for other adaptive views.

表小部件的所有方面在所有自适应视图中都是一致的。要跨自适应视图以不同的方式设计表,可以在每个自适应视图中“放置”不同的表小部件,从每个视图“替换”为其他自适应视图设计的表小部件。




原文地址:访问原文地址
快照地址: 访问文章快照