Question

我正在尝试在某些标签上添加一些新颖的设计。

选项卡包含在带有底部边框的选项卡栏中。

当一个标签处于活动状态时，我希望它看起来像在内容的同一级别上，而其他标签又变回原位。

为此，我需要使活动标签下方的边框部分消失-我的第一个想法是将标签背景设置为白色并与父标签重叠-但这不起作用。

有人对如何获得我想要的效果有任何想法吗？

.container {
  padding: 30px;
}

.tab-bar {
    display: flex;
    background-color: #fff;
    border-bottom: solid 1px rgba(0,0,0, .12);
    height: 48px;
    overflow: hidden;
}
.tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    max-width: 200px;
    min-width: 100px;
    padding: 0 16px;
}

.tab[data-state="active"] {
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 1px 0 rgba(0,0,0,0.12);
  color: red;
}

<div class="container">
  <div class="tab-bar">
    <div class="tab" data-state="active">Active</div>
    <div class="tab">Not Active</div>
  </div>
</div>

链接到JsFiddle

Answer 1

您应该overflow: hidden中的.tab-bar。

但是将其删除之后。似乎不符合您的要求（“内容的相同级别”）。

因此，我编辑了活动标签中的box-shadow。使其没有来自按钮的box-shadow。

border-bottom: 1px solid white负责覆盖tab-bar边框

在此处查看完整示例：

.container {
  padding: 30px;
}

.tab-bar {
    display: flex;
    background-color: #fff;
    border-bottom: solid 1px rgba(0,0,0, .12);
    height: 48px;
}
.tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    max-width: 200px;
    min-width: 100px;
    padding: 0 16px;
}

.tab[data-state="active"] {
  box-shadow: -4px -2px 4px -1px rgba(0,0,0,0.1), 4px -2px 4px -1px rgba(0,0,0,0.1);
  color: red;
  border-bottom: 1px solid white;
}

<div class="container">
  <div class="tab-bar">
    <div class="tab" data-state="active">Active</div>
    <div class="tab">Not Active</div>
  </div>
</div>

Answer 2

来自先前的评论

从非活动标签中绘制底部边框

最终添加一个伪元素来填充剩余的空间。
     父级上的
overflow:hidden隐藏阴影，也不允许孩子站在边框上方以隐藏边框

您可以做什么：

.container {
  padding: 30px;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  height: 48px;
}

.tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  min-width: 100px;
  padding: 0 16px;
  border-bottom: solid 1px rgba(0, 0, 0, .12);
}

.tab-bar::after {
  content: '';
  flex: 1;
  border-bottom: solid 1px rgba(0, 0, 0, .12);
}

.tab[data-state="active"] {
  box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
  color: red;
  border-bottom: none;
}

<div class="container">
  <div class="tab-bar">
    <div class="tab" data-state="active">Active</div>
    <div class="tab">Not Active</div>
  </div>
</div>

将子标签设为溢出标签栏（使用flexbox）

2 个答案: