feat(tabs): type prop add 'segment' option, closes #1133

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@
 - `n-tree-select` add `indeterminate-keys` prop.
 - `n-tree` add `on-update:indeterminate-keys` prop.
 - `n-tree-select` add `on-update:indeterminate-keys` prop.
+- `n-tabs` `type` prop add `'segment'` option, closes [#1133](https://github.com/TuSimple/naive-ui/issues/1133).
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@
 - `n-tree-select` 新增 `indeterminate-keys` 属性
 - `n-tree` 新增 `on-update:indeterminate-keys` 属性
 - `n-tree-select` 新增 `on-update:indeterminate-keys` 属性
+- `n-tabs` `type` 属性新增 `'segment'` 选项，关闭 [#1133](https://github.com/TuSimple/naive-ui/issues/1133)
 
 ### Fixes
 

src/_styles/common/light.ts

@@ -171,7 +171,7 @@ const derived = {
 
   inputColor: neutral(base.alphaInput),
   codeColor: 'rgb(244, 244, 248)',
-  tabColor: 'rgb(250, 250, 252)',
+  tabColor: 'rgb(247, 247, 250)',
   actionColor: 'rgb(250, 250, 252)',
   tableHeaderColor: 'rgb(250, 250, 252)',
 

src/tabs/demos/enUS/index.demo-entry.md

@@ -6,6 +6,7 @@ Switch contents in same area.
 
 ```demo
 basic
+segment
 flex-label
 card
 size
@@ -29,7 +30,7 @@ line-debug
 | pane-style | `string \| object` | `undefined` | Style of the pane. |
 | tab-style | `string \| object` | `undefined` | Style of the tab. |
 | tabs-padding | `number` | `0` | Left & right `padding` of the group of tabs. |
-| type | `'bar' \| 'line' \| 'card'` | `'bar'` | Tabs type. |
+| type | `'bar' \| 'line' \| 'card' \| 'segment'` | `'bar'` | Tabs type. |
 | value | `string \| number` | `undefined` | Value in controlled mode. |
 | on-add | `() => void` | `undefined` | Callback function triggered when add tag. |
 | on-close | `(name: string \| number) => void` | `undefined` | Callback function triggered when close tag. |

src/tabs/demos/enUS/segment.demo.md

@@ -0,0 +1,11 @@
+# Segment
+
+Tabs of segment type.
+
+```html
+<n-tabs type="segment">
+  <n-tab-pane name="oasis" tab="Oasis">Wonderwall</n-tab-pane>
+  <n-tab-pane name="the beatles" tab="the Beatles">Hey Jude</n-tab-pane>
+  <n-tab-pane name="jay chou" tab="Jay Chou">Qilixiang</n-tab-pane>
+</n-tabs>
+```

src/tabs/demos/zhCN/index.demo-entry.md

@@ -6,6 +6,7 @@
 
 ```demo
 basic
+segment
 flex-label
 card
 size
@@ -30,7 +31,7 @@ style-inherit-debug
 | pane-style | `string \| object` | `undefined` | 面板的样式 |
 | tab-style | `string \| object` | `undefined` | 标签的样式 |
 | tabs-padding | `number` | `0` | 全部标签最左和最右的 `padding` |
-| type | `'bar' \| 'line' \| 'card'` | `'bar'` | 标签类型 |
+| type | `'bar' \| 'line' \| 'card' \| 'segment'` | `'bar'` | 标签类型 |
 | value | `string \| number` | `undefined` | 受控模式下的值 |
 | on-add | `() => void` | `undefined` | 添加标签的回调函数 |
 | on-close | `(name: string \| number) => void` | `undefined` | 关闭标签的回调函数 |

src/tabs/demos/zhCN/segment.demo.md

@@ -0,0 +1,32 @@
+# 分段
+
+分段类型的标签页。
+
+```html
+<n-divider />
+<n-h3 style="text-align: center;">五美金的礼品卡</n-h3>
+<n-tabs type="segment">
+  <n-tab-pane name="chap1" tab="第一章">
+    当我是 Amazon 的软件工程师的时候，发生过一件最疯狂的事，故事是这样的：<br /><br />
+    那时我正在家里远程工作，我和女朋友住在一起。忽然我的同事给我发来了紧急消息：”我们的服务出现了
+    SEV 2 级别的故障！我们需要所有的人马上协助！“我们组的应用都挂掉了。<br /><br />
+    当我还在费力的寻找修复方法的时候，我忽然闻到隔壁房间的的焦味，防火报警器开始鸣叫。
+  </n-tab-pane>
+  <n-tab-pane name="chap2" tab="第二章">
+    “威尔！着火了！快来帮忙！”我听到女朋友大喊。我现在遇到了一个难题，是恢复一个重要的
+    Amazon 服务，还是救公寓的火。<br /><br />
+    那时我忽然记起了亚马逊著名的领导力准则”客户至上“，有很多的客户还依赖我们的服务，我不能让他们失望！所以着火也不管了，女朋友喊我也无所谓，我开始
+    debug 这个线上问题。
+  </n-tab-pane>
+  <n-tab-pane name="chap3" tab="第三章">
+    但是忽然，公寓的烟味消失，火警也停了。我的女朋友走进了我的房间，让我震惊的是，她摘下了自己的假发，她是
+    Jeff Bezos（Amazon CEO）假扮的！<br /><br />
+    “我对你坚持顾客至上感到十分骄傲”，他说，然后递给我一张 5
+    美金的亚马逊礼品卡，从我家窗户翻了出去，跳上了一辆 Amazon
+    会员服务的小货车，一溜烟的离开了。<br /><br />虽然现在我已经不在 Amazon
+    了，我还是非常感激我在哪里学的到的经验，这些经验我终身难忘。你也是这么想的么？
+  </n-tab-pane>
+</n-tabs>
+```
+
+<!-- https://www.teamblind.com/post/Amazon-Customer-Obsession-Story-cRec2KVi -->

src/tabs/src/Tab.tsx

@@ -77,12 +77,10 @@ export default defineComponent({
           data-disabled={disabled ? true : undefined}
           class={[
             `${clsPrefix}-tabs-tab`,
-            {
-              [`${clsPrefix}-tabs-tab--active`]: value === name,
-              [`${clsPrefix}-tabs-tab--disabled`]: disabled,
-              [`${clsPrefix}-tabs-tab--closable`]: mergedClosable,
-              [`${clsPrefix}-tabs-tab--addable`]: addable
-            }
+            value === name && `${clsPrefix}-tabs-tab--active`,
+            disabled && `${clsPrefix}-tabs-tab--disabled`,
+            mergedClosable && `${clsPrefix}-tabs-tab--closable`,
+            addable && `${clsPrefix}-tabs-tab--addable`
           ]}
           onClick={this.handleClick}
           style={addable ? undefined : style}