feat(omiu): support icon and closable in tabs

components/tabs/demos/js-demo/index.html

@@ -18,29 +18,47 @@
 	<script src="../../../icon/accessible-rounded.js"></script>
 
 
-	<o-tabs list="['用户管理','系统设置','权限管理中心']" active-index="0">
+	<o-tabs list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
 	</o-tabs>
 
 
-	<o-tabs type="card" list="['用户管理','系统设置','权限管理中心']" active-index="0">
+
+	<o-tabs type="card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
 	</o-tabs>
 
-	<o-tabs type="border-card" list="['用户管理','系统设置','权限管理中心']" active-index="0">
+	<o-tabs type="border-card" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
 	</o-tabs>
 
 	<br>
-	<o-tabs position="right" list="['用户管理','系统设置','权限管理中心']" active-index="0">
+	<o-tabs position="right" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
 	</o-tabs>
 
 
 	<br>
-	<o-tabs position="left" list="['用户管理','系统设置','权限管理中心']" active-index="0">
+	<o-tabs position="left" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
 	</o-tabs>
 
 	<br>
-	<o-tabs type="border-card" position="bottom" list="['用户管理','系统设置','权限管理中心']" active-index="0">
+	<o-tabs type="border-card" position="bottom" list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
 	</o-tabs>
+
+	<br>
+	<o-tabs
+		list="[{label:'用户管理', icon:'accessible-rounded'},{label:'系统设置', icon:'ac-unit-outlined'},{label:'权限管理中心', icon:'accessible-rounded'}]"
+		active-index="0">
 	</o-tabs>
+
+
+	<br>
+	<o-tabs closable
+		list="[{label:'用户管理', icon:'accessible-rounded'},{label:'系统设置', icon:'ac-unit-outlined'},{label:'权限管理中心', icon:'accessible-rounded'}]"
+		active-index="0">
+	</o-tabs>
+	<br>
+	<o-tabs closable list="[{label:'用户管理'},{label:'系统设置'},{label:'权限管理中心'}]" active-index="0">
+	</o-tabs>
+
+
 </body>
 
 </html>

components/tabs/src/index.d.ts

@@ -5,17 +5,20 @@ interface Props {
     activeIndex: number;
     type?: 'card' | 'border-card';
     position?: 'left' | 'right' | 'top' | 'bottom';
+    closable?: boolean;
 }
 export default class Tabs extends WeElement<Props> {
     static css: any;
     static defaultProps: {
         position: string;
+        closable: boolean;
     };
     static propTypes: {
         list: ArrayConstructor;
         activeIndex: NumberConstructor;
         type: StringConstructor;
         position: StringConstructor;
+        closable: BooleanConstructor;
     };
     _x: any;
     _width: any;
@@ -23,6 +26,7 @@ export default class Tabs extends WeElement<Props> {
     onTabClick: (evt: any, index: any) => void;
     setActiveBar(ele: any, index: any): void;
     installed(): void;
+    _tempTagName: string;
     render(props: any): JSX.Element;
 }
 export {};

components/tabs/src/index.scss

@@ -148,7 +148,12 @@
   border-radius: 3px
 }
 
+.o-tabs__item:hover .o-icon-close {
+  visibility: visible;
+}
+
 .o-tabs__item .o-icon-close {
+	visibility: hidden;
   border-radius: 50%;
   text-align: center;
   -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
@@ -785,3 +790,8 @@
     opacity: 0
   }
 }
+
+.o-icon-close {
+ display: inline-block;
+ vertical-align: -0.125em;
+}

components/tabs/src/index.tsx

@@ -8,6 +8,7 @@ interface Props {
 	activeIndex: number
 	type?: 'card' | 'border-card'
 	position?: 'left' | 'right' | 'top' | 'bottom'
+	closable?: boolean
 }
 
 
@@ -17,14 +18,16 @@ export default class Tabs extends WeElement<Props>{
 	static css = css
 
 	static defaultProps = {
-		position: 'top'
+		position: 'top',
+		closable: false
 	}
 
 	static propTypes = {
 		list: Array,
 		activeIndex: Number,
 		type: String,
-		position: String
+		position: String,
+		closable: Boolean
 	}
 
 	_x
@@ -57,16 +60,16 @@ export default class Tabs extends WeElement<Props>{
 		this.baseRect = this.rootNode.getBoundingClientRect()
 		this.setActiveBar(this['$tab' + this.props.activeIndex], this.props.activeIndex)
 	}
-
+	_tempTagName: string
 	render(props) {
 
-		const activeBarStyle = (props.position === 'left' || props.position === 'right') ?{
+		const activeBarStyle = (props.position === 'left' || props.position === 'right') ? {
 			height: `40px`,
-			transform: `translateY(${props.activeIndex*40}px)`
-		}:{
-			width: `${this._width}px`,
-			transform: `translateX(${this._x}px)`
-		}
+			transform: `translateY(${props.activeIndex * 40}px)`
+		} : {
+				width: `${this._width}px`,
+				transform: `translateX(${this._x}px)`
+			}
 		console.log(activeBarStyle)
 		return (
 			<div {...extractClass(props, 'o-tabs', {
@@ -89,13 +92,14 @@ export default class Tabs extends WeElement<Props>{
 									})} style={activeBarStyle}></div>}
 
 								{props.list.map((tab, index) => {
-
+									this._tempTagName = 'o-icon-' + tab.icon
 									return <div ref={e => { this['$tab' + index] = e }} role="tab" onClick={evt => this.onTabClick(evt, index)} tabindex={props.active === index ? '0' : -1}
 										{...extractClass(props, 'o-tabs__item', {
 											[`is-${props.position}`]: props.position,
-											'is-active': props.activeIndex === index
+											'is-active': props.activeIndex === index,
+											'is-closable': props.closable
 										})}
-									>{tab}</div>
+									>{tab.icon && <this._tempTagName />}{tab.label}{props.closable &&<svg class="o-icon-close" style={props.activeIndex === index&&`visibility: visible;`} fill="currentColor" width="1em" height="1em" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>}</div>
 								})}
 
 							</div>