时间戳

首页 > 解决方案 > 使子选项卡溢出选项卡栏（使用 flexbox）

html - 使子选项卡溢出选项卡栏（使用 flexbox）

问题描述

我正在尝试为某些选项卡添加一点设计风格。

选项卡包含在具有底部边框的选项卡栏内。

当一个选项卡处于活动状态时，我希望它看起来好像位于内容的同一级别，而其他选项卡显示为后置。

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

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

.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>

标签： htmlcss

解决方案

从之前的评论

从非活动选项卡绘制底部边框

最终添加一个伪元素来填充左边的房间。

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>

推荐阅读