更好的Tabview 1

我和我的小伙伴们都惊呆了！！

此页为于此维基内部使用的组件页。

在未经同意的情况下
请不要动这页里面的东西

---

分页

此为分页（tab view）。

从東弊舍——或者是Tabdecoration那里偷的。

在您的页面开头添加如下代码以应用此组件：

[[include :fendsfox:component:better-tabview-1]]

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

由于一些奇怪的原因，这个空 tab 有一个很长的名字。我想知道为什么？这很奇怪。

空 Tab

源代码

div.yui-navset.yui-navset-top {
  display: flex;
  flex-direction: column;
  clear: both;
}
div.yui-navset.yui-navset-top>ul.yui-nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 0.25em #2E2E2E solid;
  background-color: #F8F8F8;
}
div.yui-navset.yui-navset-top>ul.yui-nav li {
  margin: 0;
  padding: 0;
  flex-grow: 1;
  background-color: #F8F8F8;
  position: relative;
  isolation: isolate;
}
div.yui-navset.yui-navset-top>ul.yui-nav li a {
  display: flex;
  width: 100%;
  height: 100%;
  border: none;
  background: 0 0!important;
  color: #000;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  padding: 0.25em 1em;
  box-sizing: border-box;
  transition: all 0.25s ease-out;
}
div.yui-navset.yui-navset-top>ul.yui-nav li a:is(:hover,:focus),
div.yui-navset.yui-navset-top>ul.yui-nav li.selected a {
  color: #FFF;
}
div.yui-navset.yui-navset-top>ul.yui-nav li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 100%;
  background-color: #324470;
  transition: all 0.25s ease-out;
}
div.yui-navset.yui-navset-top>ul.yui-nav li:is(:hover,:focus-within)::before {
  width: 100%;
}
div.yui-navset.yui-navset-top>ul.yui-nav li.selected {
  z-index: 1;
}
div.yui-navset.yui-navset-top>ul.yui-nav li.selected::before {
  width: 100%;
  background-color: #243151;
}
div.yui-navset.yui-navset-top>ul.yui-nav li a em {
  display: inline;
  border: none;
  padding: 0;
  position: static;
}
div.yui-navset.yui-navset-top>div.yui-content {
  border-color: #2E2E2E;
  border-top: none;
  padding: 0.25em 1em;
  background-color: #FFF;
}