如何在像徽章这样的选项卡顶部实现左角图标？

Question

我想在垂直列的顶部实现一个左角图标（如您在屏幕截图中所见）。这将用于最小化选项卡。类似于徽章的东西，但与徽章不同的是，它应该出现在标签上。

垂直列包括：

<div class="minimized" fxLayout="column" (click)="maximizeClick()"> 
 <div class="title-wrapper" fxLayoutAlign="center end"  >
    <h2 class="title">
      {{ title }}
    </h2>
  </div>
</div>

你知道如何实现吗？

Answer 1

我不知道 Angular 但这是我们如何处理 html/css/javascript。我希望你能找到一种方法将它解析为 angular。 =)

function toggleSidebar () {
  const sidebarElement = document.querySelector('.sidebar')
  
  if (sidebarElement.classList.contains('minimized')) {
    sidebarElement.classList.remove('minimized')
  } else {
    sidebarElement.classList.add('minimized')
  }
}

body {
  background-color: lightgray;
}

body, h1 {
  margin: 0;
}


.sidebar {
  position: relative;
  background-color: white;
  width: 250px;
  min-height: 100vh;
  transition: 300ms ease transform;
  transform: translateX(0);
}
.sidebar.minimized {
  transform: translateX(-100%);
}

.sidebar-content {
  padding: 0.5rem;
}

.sidebar-minize-button {
  position: absolute;
  background-color: gray;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  right: 0;
  transform: translateX(50%);
  cursor: pointer;
  top: 10%;
}

<div class="sidebar">
  <div class="sidebar-content">
    <h1>SIDEBAR</h1>
  </div>
  <div class="sidebar-minize-button" onclick="toggleSidebar()"></div>
</div>

如何在像徽章这样的选项卡顶部实现左角图标？

How to implement angle left icon on top of a tab like a badge?

icons

typescript

angular

mat-icon