使用合并区域创建选项卡

Question

如何使用 Angular-Material 创建选项卡，如下图所示：（我不知道怎么用英文描述所以我称之为"merges tab"）

Answer 1

这是一个尝试 - CodePen。我觉得还可以改进。

标记

一些描述

选项卡一选项卡二选项卡三选项卡四

CSS

#myTabs {
  margin-top: -40px;
  z-index: 0;
}

#myTabs md-tab-item {
  border: 1px solid black;
}

#myTabs md-tabs-canvas, 
#myTabs md-pagination-wrapper {
  height: 100px
}

#myTabs .md-tab {
  line-height: 80px
}

#tabsDescription {
  height: 40px;
  z-index: 1;
  text-align: center;
}

#tabsDescription {
  margin-left: -20px;
  background: white;
  height: 40px;
  width: 4px;
  text-align: center;
}

#tabsDescription p {
  margin: 5px -60px;
  white-space: nowrap;
}

使用合并区域创建选项卡

Create tabs with merge area

angularjs

cordova

angular-material