change tabs box-model to 'block' & remove 'label-content' property (#2064)

examples/docs/en-US/tabs.md

@@ -22,9 +22,6 @@
       },
       handleClick(tab, event) {
         console.log(tab, event);
-      },
-      renderTab(h, tab) {
-        return <span><i class="el-icon-date"></i> {tab.label}</span>;
       }
     }
   }
@@ -148,25 +145,19 @@ Border card tabs.
 
 ### Custom Tab
 
-You can use `label-content` property to customize the tab
+You can use named slot to customize the tab label content.
 
-:::demo `label-content` is a render function,which return the vnode of the tab.
+:::demo
 ```html
 <el-tabs type="border-card">
-  <el-tab-pane label="Route" :label-content="renderTab">Route</el-tab-pane>
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> Route</span>
+    Route
+  </el-tab-pane>
   <el-tab-pane label="Config">Config</el-tab-pane>
   <el-tab-pane label="Role">Role</el-tab-pane>
   <el-tab-pane label="Task">Task</el-tab-pane>
 </el-tabs>
-<script>
-  export default {
-    methods: {
-      renderTab(h, tab) {
-        return <span><i class="el-icon-date"></i> {tab.label}</span>;
-      }
-    }
-  }
-</script>
 ```
 :::
 
@@ -188,7 +179,6 @@ You can use `label-content` property to customize the tab
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
-| label-content | render function for tab title | Function(h, tab:vueInstance) | - | - |
 | disabled | whether Tab is disabled | boolean | - | false |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
 | closable  | whether Tab is closable | boolean   | — |  false  |

examples/docs/zh-CN/tabs.md

@@ -22,9 +22,6 @@
       },
       handleClick(tab, event) {
         console.log(tab, event);
-      },
-      renderTab(h, tab) {
-        return <span><i class="el-icon-date"></i> {tab.label}</span>;
       }
     }
   }
@@ -145,25 +142,19 @@
 
 ### 自定义标签页
 
-可以通过 `label-content` 属性来实现自定义标签页的内容
+可以通过具名 `slot` 来实现自定义标签页的内容
 
-:::demo `label-content` 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。
+:::demo
 ```html
 <el-tabs type="border-card">
-  <el-tab-pane label="我的行程" :label-content="renderTab">我的行程</el-tab-pane>
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
+    我的行程
+  </el-tab-pane>
   <el-tab-pane label="消息中心">消息中心</el-tab-pane>
   <el-tab-pane label="角色管理">角色管理</el-tab-pane>
   <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
 </el-tabs>
-<script>
-  export default {
-    methods: {
-      renderTab(h, tab) {
-        return <span><i class="el-icon-date"></i> {tab.label}</span>;
-      }
-    }
-  }
-</script>
 ```
 :::
 
@@ -200,7 +191,6 @@
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
-| label-content | 选项卡的标题的渲染 Function | Function(h, tab:vueInstance) | - | - |
 | disabled | 是否禁用 | boolean | - | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |

packages/tabs/src/tabs.vue

@@ -112,9 +112,7 @@
           ? <span class="el-icon-close" on-click={(ev) => { handleTabRemove(tab, ev); }}></span>
           : null;
 
-        const tabLabelContent = tab.labelContent
-          ? tab.labelContent.call(this._renderProxy, h, tab)
-          : tab.label;
+        const tabLabelContent = tab.$slots.label || tab.label;
 
         return (
           <div

packages/theme-default/src/tabs.css

@@ -3,8 +3,6 @@
 
 @component-namespace el {
   @b tabs {
-    display: inline-block;
-
     @e header {
       border-bottom: 1px solid #d3dce6;
       padding: 0;

test/unit/specs/tabs.spec.js

@@ -220,27 +220,6 @@ describe('Tabs', () => {
       });
     });
   });
-  it('tab title render function', done => {
-    vm = createVue({
-      template: `
-        <el-tabs ref="tabs" >
-          <el-tab-pane :label-content="renderTitle">A</el-tab-pane>
-          <el-tab-pane label="配置管理">B</el-tab-pane>
-          <el-tab-pane label="角色管理" ref="pane-click">C</el-tab-pane>
-          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
-        </el-tabs>
-      `,
-      methods: {
-        renderTitle(h) {
-          return <span>用户管理</span>;
-        }
-      }
-    }, true);
-    vm.$nextTick(_ => {
-      expect(vm.$el.querySelector('.el-tabs__item span').innerText).to.equal('用户管理');
-      done();
-    });
-  });
   it('disabled', done => {
     vm = createVue({
       template: `