Question

我需要通过CSS或Javascript创建以下组件。

我会收到一个像[{'label':'status1'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].

这样的数组

并且它也支持如下所示支持高亮红色。在这种情况下，它将收到类似[{'label':'status1', 'priority': 'high'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].

的数组

它还支持点击和悬停事件，如下所示。

其实我主要不了解如何实现如下小形状的形状。

Answer 1

此处，解决方案仅适用于形状和悬停效果。

Fiddle

<ul class="status">
  <li><a href=""><span>#</span>Status 1</a></li>
  <li><a href=""><span>#</span>Status 2</a></li>
  <li><a href=""><span>#</span>Status 3</a></li>
  <li><a href=""><span>#</span>Status 4</a></li>
  <li><a href=""><span>#</span>Status 5</a></li>
  <li><a href=""><span>#</span>Status 6</a></li>
</ul>

Answer 2

要创建带有arraows的框，有几种解决方案：SVG，CSS3或图像（最差）。请参阅上面有关CC3示例的评论。

使用CSS中的:hover，可以在CSS中更改颜色。

要使其可选，请在每个更改组件状态的框上添加单击事件侦听器。在render中使用该状态来添加或不添加类似.selected的类。然后在CSS中给这个类一些其他颜色

Answer 3

这是使用伪元素，位置和变换的另一种形状解决方案。

.container {
  font-size: 0;
}

.box {
  position: relative;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 75px;
  width: 100px;
  border: 3px solid black;
  background: white;
}

.box:not(:last-of-type) {
  border-right: none;
}

.box:not(:last-of-type):after {
    content: '';
    background: inherit;
    height: 8px;
    width: 8px;
    position: absolute;
    left: 101%;
    top: 50%;
    z-index: 1;
    border-top: 3px solid black;
    border-right: 3px solid black;
    transform: rotateZ(45deg) translate(-50%);
}

<div class="container">
  <div class="box">
    <span>#</span>
    <span>Status 1</span>
  </div>
  <div class="box">
    <span>#</span>
    <span>Status 2</span>
  </div>
  <div class="box">
    <span>#</span>
    <span>Status 3</span>
  </div>
</div>

如何在css中实现像tooltip这样的东西？

3 个答案: