时间戳

首页 > 解决方案 > 如何将数值绑定到 CSS 以创建时间线？

html - 如何将数值绑定到 CSS 以创建时间线？

问题描述

我正在尝试在时间线上定位 div 元素。这些元素将根据数组定位，并且该数组将由从 0 到 1 的浮点数组成。0 是时间线的开始，1 是结束。

 let events = [0, 0.25, 0.5, 1]

我正在使用 AngularCLI。我想我会用 *NgFor 遍历我的列表，但是我只是不知道如何使用我的数组的值将我的 CSS 元素放置在正确的比例上。

这是我的想法：

时间线

标签： htmlcssangular

解决方案

我认为您可以从这样的事情开始（请参阅Stackbliz 上的演示）：

在此处输入图像描述

模板

<div #containerDiv class="container">
    <hr>
    <div *ngFor="let pos of [0,0.25,0.5,1]" 
        [ngStyle]="{'left.px': _getStyle(containerDiv,pos)}" 
        class="black-ball-container">
        <div>{{pos}}</div>
        <div class="black-ball">
        </div>
    </div>
</div>

打字稿

_getStyle($div: HTMLDivElement, pos: number) {
  const rect: DOMRect | ClientRect = $div.getBoundingClientRect();

  return `${pos * rect.width}`;
}

scss

$height: 10px;

.container {
  position: relative;
  display: flex;
  align-items: flex-end;

  max-width: 100%;

  hr {
    position: absolute;
    left: 0;
    bottom: $height/4;
    margin: 0;
    margin-bottom: $height/2;
    border: 1px solid;

    width: 100%;
  }

  .black-ball-container {
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .black-ball {
    height: $height;
    width: $height;
    background-color: black;
    border-radius: $height;
    border: 3px solid white;
  }
}

根据评论，Stackblitz 上也有这个改进版本

推荐阅读