使用 Angular 或 Angular 材质的 HTML 表格单元格中的垂直线和水平双向箭头答案

【问题标题】：Vertical line and horizontal bi-directional arrow within HTML table cell using Angular or Angular Material使用 Angular 或 Angular 材质的 HTML 表格单元格中的垂直线和水平双向箭头
【发布时间】：2020-02-24 15:47:00
【问题描述】：

我们需要在单元格中间显示一条垂直虚线，并且垂直线的高度应该根据行数增加[垂直线参见附图中的红色框2] 此外，我们需要在两条垂直线之间显示一个连接箭头[水平箭头参见红框 1]。

我们尝试对垂直线使用角度材质分隔器，但没有按预期工作。我们尝试创建一个没有角度材料的普通 HTML 表格，并将 CSS 应用于表格 tr、td，但也没有按预期工作我们尝试了以下方法：

.verticalLine  {  
    border-left: thick solid #ff0000;
}

<div class="verticalLine"></div>

例如：2

<mat-divider [vertical]="true"></mat-divider>

示例图片：

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

你可以安装这个 npm 包：https://www.npmjs.com/package/cool-line-arrow 并指定 fromSelector ：您的箭头将从其开始的 DOM 元素和 toSelector : 箭头将指向的 DOM 元素。

【讨论】：

【解决方案2】：

关于你问题的第二部分：

您可以使用图片作为箭头：http://geraintluff.github.io/sequence-diagram-html/example-css.html

像这样的：

<div class="action left-1-4 right-2-4">
  <img class="arrow-right" src="images/arrow-right.png" alt="Alice --> Bob">
  talks
</div>

SVG 也可以：https://iconmonstr.com/arrow-right-thin-svg/ 甚至这个：https://www.beyondjava.net/how-to-connect-html-elements-with-an-arrow-using-svg。用于连接箭头的外部库：https://www.cssscript.com/connect-elements-directional-arrow/

像这样的：

<link rel="stylesheet" href="domarrow.css">
<script src="domarrow.js"></script>
<div id="d1"></div>
<div id="d2"></div>
<connection from="#d1" to="#d2" tail></connection>

你甚至可以尝试组合lines + css triangle：https://www.w3schools.com/howto/howto_css_arrows.asp

【讨论】：

我建议您在答案中添加一些代码，这样万一这些网站离线，您的答案仍然有用

【解决方案3】：

成功了！您需要在上面添加height:100%

<mat-divider [vertical]="true" style="height:100%"></mat-divider>

【讨论】：