Question

我正在创建和Angular2组件以实现以下行为：

我在名为＆＃34; stepList ＆＃34;的组件中有一个数组（字符串）。这是我的观点：

<ul class="step">
    <li class="step__item selected" *ngFor="let step of stepList">
        {{step.label}}
    </li>
</ul>

这是我的CSS：

.step{
    display: flex;

    &__item {
       display: block;
       padding-left: 25px;
    }
}

使用当前代码，我会渲染项目（名称），但我不知道如何使用它们下方的圆圈。

提前致谢！

Answer 1

使用border-bottom和伪元素：

.step{
  display: flex;
}

.step__item {
  display: block;
  position: relative;
  padding: 0 12px 25px;
  border-bottom: 1px solid lightgray;
}

.step__item::before {
  display: block;
  position: absolute;
  bottom: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
  content: '';
}

<ul class="step">
    <li class="step__item selected">
        CATEGORIA
    </li>
    
    <li class="step__item selected">
        ATTRIBUTES
    </li>
</ul>

SCSS代码：

.step{
    display: flex;

    &__item {
        display: block;
        position: relative;
        padding: 0 12px 25px;
        border-bottom: 1px solid lightgray;

        &::before {
            display: block;
            position: absolute;
            bottom: -5px;
            left: calc(50% - 5px);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: gray;
            content: '';
        }
    }
}

Answer 2

在带有边框底部的标签上填充以获取该行。创建一个具有设置高度和宽度的div（因此，对于圆形，使用相同的高度和宽度），形成一个正方形。添加50％的边框半径，使其形状为圆形，并将div放在标签内。绝对定位，使其显示在边框底部。

Answer 3

http://jsfiddle.net/exjxw7m6/

ul.progress-bar {
    height: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    &::after {
        content: "";
        position: absolute;
        top:5px;
        left:5px;
        background: #777;
        height: 5px;
        width: 100%;
    }
    li {
        background: #000;
        border-radius: 100px;
        width: 15px;
        height: 15px;
        z-index: 1;
        position: relative;
        &.stop ~ li {
            background: #777;
            &::after {
                height: 0;
            }
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 5px;
            background: #000;
            width: 5px;
            height: 100vh;
        }
    }
}

此处有更多信息:(点数）Progress bar made of solid line, with dots as steps

带SASS的水平progess条（CSS3）

3 个答案: