有没有像这样设置角度材质选项卡样式的方法？

<div class="tab-container">
  <div class="tab">
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">选项卡1</label>
    <div class="tab-content">
      <!-- 选项卡1的内容 -->
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">选项卡2</label>
    <div class="tab-content">
      <!-- 选项卡2的内容 -->
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tab" id="tab3">
    <label for="tab3">选项卡3</label>
    <div class="tab-content">
      <!-- 选项卡3的内容 -->
    </div>
  </div>
</div>

.tab-container {
  display: flex;
}

.tab {
  flex: 1;
  position: relative;
}

.tab input[type="radio"] {
  display: none;
}

.tab label {
  display: block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tab input[type="radio"]:checked + label {
  background-color: #f00;
  color: #fff;
}

.tab-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.tab input[type="radio"]:checked + label + .tab-content {
  display: block;
}

const tabs = document.querySelectorAll('.tab input[type="radio"]');
tabs.forEach(tab => {
  tab.addEventListener('change', () => {
    const activeTabContent = document.querySelector('.tab-content:not(.hidden)');
    if (activeTabContent) {
      activeTabContent.classList.add('hidden');
    }
    const selectedTabContent = tab.parentNode.querySelector('.tab-content');
    selectedTabContent.classList.remove('hidden');
  });
});