导航标签ui/navTab

实现标签页效果。

基本用法
常用功能: 添加标签页（带图标）; 关闭所有标签页
样式
API: NavTab 类

基本用法

❐import { VNode, render } from "ui/control";
import NavTab from "ui/navTab";

var navTab = render(
    __root__,
    <NavTab hideLastClose></NavTab>
);

render(
    __root__,
    <button onClick={()=>{ navTab.addTab('Tab ' + navTab.tabs.length)} }>添加标签</button>
);

常用功能

添加标签页（带图标）

❐var tab = navTab.addTab("标题");
tab.lastChild.innerHTML = `<i class="x-icon">★</i>` + tab.lastChild.innerHTML;

关闭所有标签页

❐while (navTab.tabs.length) {
    navTab.removeTab(navTab.tabs[0]);
}

样式

❐<nav class="x-navtab x-navtab-overflow">
    <a href="javascript:;" class="x-icon x-navtab-left">⮜</a>
    <a href="javascript:;" class="x-icon x-navtab-right">⮞</a>
    <div class="x-navtab-container">
        <ul class="x-navtab-body" role="tablist">
            <li role="tab"><button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button><a href="javascript:;">标签1</a></li>
            <li role="tab"><button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button><a href="javascript:;">标签2标签2标签2标签2</a></li>
            <li role="tab"><button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button><a href="javascript:;">标签1</a></li>
            <li role="tab"><button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button><a href="javascript:;">标签2</a></li>
            <li role="tab"><button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button><a href="javascript:;">标签1</a></li>
            <li role="tab"><button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button><a href="javascript:;">标签2</a></li>
        </ul>
        <div class="x-navtab-bar" style="left: 0; width: 6rem;"></div>
    </div>
</nav>

API

NavTab 类

继承自：Control

表示一个导航标签。

字段	类型	描述	继承自
⮞ `hideClose` : `boolean` 是否隐藏关闭按钮。	`boolean`	是否隐藏关闭按钮。	—
⮞ `hideLastClose` : `boolean` 是否隐藏最后一个标签页的关闭按钮。	`boolean`	是否隐藏最后一个标签页的关闭按钮。	—
⮞ `scrollDelta` : `number` = `120` 翻页按钮每次滚动距离。	`number`	翻页按钮每次滚动距离。	—
⮞ `autoResize` : `boolean` = `true` 是否在窗口大小改变后自动重新对齐。	`boolean`	是否在窗口大小改变后自动重新对齐。	—
⮞ `onAddTab` : `(tab: HTMLElement, sender: NavTab) => void` 添加标签事件。	`function`	添加标签事件。	—
⮞ `onRemoveTab` : `(tab: HTMLElement, sender: NavTab) => void` 移除标签事件。	`function`	移除标签事件。	—
⮞ `onCloseTab` : `(tab: HTMLElement, e: MouseEvent, sender: NavTab) => boolean \| void` 关闭标签事件。	`function`	关闭标签事件。	—
⮞ `onSelect` : `(tab: HTMLElement, e: MouseEvent, sender: NavTab) => boolean \| void` 选择标签事件。	`function`	选择标签事件。	—
⮞ `onChange` : `(oldTab: HTMLElement, newTab: HTMLElement, e: MouseEvent, sender: NavTab) => void` 选中标签改变事件。	`function`	选中标签改变事件。	—
⮞ `leftButton` : `HTMLElement` 向左滚动按钮。	`HTMLElement`	向左滚动按钮。	—
⮞ `rightButton` : `HTMLElement` 向右滚动按钮。	`HTMLElement`	向右滚动按钮。	—
⮞ `container` : `HTMLElement` 容器。	`HTMLElement`	容器。	—
⮞ `bar` : `HTMLElement` 指示当前激活标签页的条。	`HTMLElement`	指示当前激活标签页的条。	—
⮞ `tabs` : `HTMLElement[]` (只读)获取所有标签页。	`HTMLElement[]`	(只读)获取所有标签页。	—
⮞ `selectedTab` : `HTMLElement` 选中的标签页。	`HTMLElement`	选中的标签页。	—
⮞ `tabHistoryBack` : `HTMLElement[]` = `[]` 标签后退历史。	`HTMLElement[]`	标签后退历史。	—
⮞ `body` : `HTMLElement` (已覆盖)主体。继承自 `Control`	`HTMLElement`	(已覆盖)主体。	`Control`
⮞ `readyState` : `ControlState` 获取当前控件的渲染状态。继承自 `Control`	`ControlState`	获取当前控件的渲染状态。	`Control`
⮞ `elem` : `HTMLElement` 关联的元素。继承自 `Control`	`HTMLElement`	关联的元素。	`Control`
⮞ `vNode` : `VNode` (保护的)获取当前控件关联的虚拟节点。继承自 `Control`	`VNode`	(保护的)获取当前控件关联的虚拟节点。	`Control`
⮞ `sourceVNode` : `VNode` 获取创建该控件使用的源虚拟节点。继承自 `Control`	`VNode`	获取创建该控件使用的源虚拟节点。	`Control`
⮞ `alwaysUpdate` : `boolean` 控件是否使用主动更新模式。继承自 `Control`	`boolean`	控件是否使用主动更新模式。	`Control`
⮞ `duration` : `number` = `200` 渐变的持续毫秒数。如果为 0 则不使用渐变。继承自 `Control`	`number`	渐变的持续毫秒数。如果为 0 则不使用渐变。	`Control`
⮞ `class` : `string` CSS 类名。继承自 `Control`	`string`	CSS 类名。	`Control`
⮞ `hidden` : `boolean` 是否隐藏。继承自 `Control`	`boolean`	是否隐藏。	`Control`
⮞ `style` : `string \| { [key: string]: string \| number; }` 控件样式。继承自 `Control`	`string \| object`	控件样式。	`Control`
⮞ `id` : `string` 控件序号。继承自 `Control`	`string`	控件序号。	`Control`
⮞ `content` : `NodeLike` 控件内容。继承自 `Control`	`NodeLike`	控件内容。	`Control`
⮞ `onSelectStart` : `(e: Event, sender: NavTab) => void` 选择开始事件。参考 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselectstart 继承自 `Control`	`function`	选择开始事件。	`Control`
⮞ `onClick` : `(e: MouseEvent, sender: NavTab) => void` 点击事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onclick 继承自 `Control`	`function`	点击事件。	`Control`
⮞ `onAuxClick` : `(e: MouseEvent, sender: NavTab) => void` 中键点击事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onauxclick 继承自 `Control`	`function`	中键点击事件。	`Control`
⮞ `onDblClick` : `(e: MouseEvent, sender: NavTab) => void` 双击事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ondblclick 继承自 `Control`	`function`	双击事件。	`Control`
⮞ `onContextMenu` : `(e: PointerEvent, sender: NavTab) => void` 右键菜单事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu 继承自 `Control`	`function`	右键菜单事件。	`Control`
⮞ `onMouseDown` : `(e: MouseEvent, sender: NavTab) => void` 鼠标按下事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmousedown 继承自 `Control`	`function`	鼠标按下事件。	`Control`
⮞ `onMouseUp` : `(e: MouseEvent, sender: NavTab) => void` 鼠标按上事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseup 继承自 `Control`	`function`	鼠标按上事件。	`Control`
⮞ `onMouseOver` : `(e: MouseEvent, sender: NavTab) => void` 鼠标移入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseover 继承自 `Control`	`function`	鼠标移入事件。	`Control`
⮞ `onMouseOut` : `(e: MouseEvent, sender: NavTab) => void` 鼠标移开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseout 继承自 `Control`	`function`	鼠标移开事件。	`Control`
⮞ `onMouseEnter` : `(e: MouseEvent, sender: NavTab) => void` 鼠标进入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseenter 继承自 `Control`	`function`	鼠标进入事件。	`Control`
⮞ `onMouseLeave` : `(e: MouseEvent, sender: NavTab) => void` 鼠标离开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseleave 继承自 `Control`	`function`	鼠标离开事件。	`Control`
⮞ `onMouseMove` : `(e: MouseEvent, sender: NavTab) => void` 鼠标移动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmousemove 继承自 `Control`	`function`	鼠标移动事件。	`Control`
⮞ `onWheel` : `(e: WheelEvent, sender: NavTab) => void` 鼠标滚轮事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/Events/wheel 继承自 `Control`	`function`	鼠标滚轮事件。	`Control`
⮞ `onScroll` : `(e: UIEvent, sender: NavTab) => void` 滚动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll 继承自 `Control`	`function`	滚动事件。	`Control`
⮞ `onTouchStart` : `(e: TouchEvent, sender: NavTab) => void` 触摸开始事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchstart 继承自 `Control`	`function`	触摸开始事件。	`Control`
⮞ `onTouchMove` : `(e: TouchEvent, sender: NavTab) => void` 触摸移动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchmove 继承自 `Control`	`function`	触摸移动事件。	`Control`
⮞ `onTouchEnd` : `(e: TouchEvent, sender: NavTab) => void` 触摸结束事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchend 继承自 `Control`	`function`	触摸结束事件。	`Control`
⮞ `onTouchCancel` : `(e: TouchEvent, sender: NavTab) => void` 触摸撤销事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchcancel 继承自 `Control`	`function`	触摸撤销事件。	`Control`
⮞ `onPointerEnter` : `(e: PointerEvent, sender: NavTab) => void` 指针进入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerenter 继承自 `Control`	`function`	指针进入事件。	`Control`
⮞ `onPointerLeave` : `(e: PointerEvent, sender: NavTab) => void` 指针离开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerleave 继承自 `Control`	`function`	指针离开事件。	`Control`
⮞ `onPointerOver` : `(e: PointerEvent, sender: NavTab) => void` 指针移入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerover 继承自 `Control`	`function`	指针移入事件。	`Control`
⮞ `onPointerOut` : `(e: PointerEvent, sender: NavTab) => void` 指针移开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerout 继承自 `Control`	`function`	指针移开事件。	`Control`
⮞ `onPointerDown` : `(e: PointerEvent, sender: NavTab) => void` 指针按下事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerdown 继承自 `Control`	`function`	指针按下事件。	`Control`
⮞ `onPointerMove` : `(e: PointerEvent, sender: NavTab) => void` 指针移动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointermove 继承自 `Control`	`function`	指针移动事件。	`Control`
⮞ `onPointerUp` : `(e: PointerEvent, sender: NavTab) => void` 指针松开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerup 继承自 `Control`	`function`	指针松开事件。	`Control`
⮞ `onPointerCancel` : `(e: PointerEvent, sender: NavTab) => void` 指针取消事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointercancel 继承自 `Control`	`function`	指针取消事件。	`Control`
⮞ `onGotPointerCapture` : `(e: PointerEvent, sender: NavTab) => void` 指针开始捕获事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ongotpointercapture 继承自 `Control`	`function`	指针开始捕获事件。	`Control`
⮞ `onLostPointerCapture` : `(e: PointerEvent, sender: NavTab) => void` 指针停止捕获事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onlostpointercapture 继承自 `Control`	`function`	指针停止捕获事件。	`Control`

方法描述继承自

⮞ handleMouseWheel(e)(e:WheelEvent):void

(保护的)处理滚轮事件。

参数	类型	描述	默认值
`e*`	`WheelEvent`		—

返回值

类型：void

(保护的)处理滚轮事件。

—

⮞ handleScrollLeftPointerDown(e)(e:MouseEvent):void

(保护的)处理左滚按住事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—

返回值

类型：void

(保护的)处理左滚按住事件。

—

⮞ handleScrollRightPointerDown(e)(e:MouseEvent):void

(保护的)处理右滚按住事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—

返回值

类型：void

(保护的)处理右滚按住事件。

—

⮞ handleScroll(e)(e:MouseEvent):void

(保护的)处理滚动事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—

返回值

类型：void

(保护的)处理滚动事件。

—

⮞ handleItemPointerUp(e, tab)(e:MouseEvent, tab:HTMLElement):void

(保护的)处理指针在标签项松开事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—
`tab*`	`HTMLElement`		—

返回值

类型：void

(保护的)处理指针在标签项松开事件。

—

⮞ handleItemClick(e, tab)(e:MouseEvent, tab:HTMLElement):void

(保护的)处理指针点击事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—
`tab*`	`HTMLElement`		—

返回值

类型：void

(保护的)处理指针点击事件。

—

⮞ closeTab(tab, ...)(tab:HTMLElement, e?:MouseEvent):boolean

关闭标签页。

参数	类型	描述	默认值
`tab*`	`HTMLElement`		—
`e`	`MouseEvent`		—

返回值

类型：boolean

如果关闭成功则返回 true，否则返回 false。

关闭标签页。

—

⮞ selectTab(tab, ...)(tab:HTMLElement, e?:MouseEvent, duration?:number):boolean

选择一个标签。

参数	类型	默认值
`tab*`	`HTMLElement`	—
`e`	`MouseEvent`	—
`duration`	`number`	—

返回值

类型：boolean

如果选择成功则返回 true，否则返回 false。

选择一个标签。

—

⮞ addTab(title, ...)(title:string, select?:boolean, duration?:number):HTMLElement

添加一个标签。

参数	类型	默认值
`title*`	`string`	—
`select`	`boolean`	`true`
`duration`	`number`	—

返回值

类型：HTMLElement

返回新建的标签。

添加一个标签。

—

⮞ removeTab(tab, ...)(tab:HTMLElement, duration?:number):void

删除一个标签。

参数	类型	描述	默认值
`tab*`	`HTMLElement`		—
`duration`	`number`		—

返回值

类型：void

删除一个标签。

—

⮞ realign(...)(duration?:number, removing?:HTMLElement):void

根据标签页的数目重新调整标签页大小。

参数	类型	描述	默认值
`duration`	`number`		`this.duration`
`removing`	`HTMLElement`		—

返回值

类型：void

根据标签页的数目重新调整标签页大小。

—

⮞ realignBar(tab, ...)(tab:HTMLElement, duration?:number):void

重新对齐指示条。

参数	类型	描述	默认值
`tab*`	`HTMLElement`		—
`duration`	`number`		—

返回值

类型：void

重新对齐指示条。

—

⮞ render()():VNode

(保护的)

返回值

类型：VNode

继承自

Control

(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。

Control

⮞ init()():void

(保护的)

返回值

类型：void

继承自

Control

(保护的)(已覆盖)当被子类重写时负责在关联元素后初始化当前控件。

Control

⮞ uninit()():void

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

返回值

类型：void

继承自

Control

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

Control

⮞ update()():void

重新渲染当前控件。

返回值

类型：void

继承自

Control

重新渲染当前控件。

Control

⮞ layout(changes)(changes:Changes):void

重新布局当前控件。

参数	类型	描述	默认值
`changes*`	`Changes`		—

返回值

类型：void

继承自

Control

重新布局当前控件。

Control

⮞ invalidate()():void

使当前控件无效并在下一帧重新渲染。

返回值

类型：void

继承自

Control

使当前控件无效并在下一帧重新渲染。

Control

⮞ renderTo(parent, ...)(parent:Control | Node, refChild?:Control | Node):void

将当前控件渲染到指定的父控件或节点。

参数	类型	描述	默认值
`parent*`	`Control \| Node`		—
`refChild`	`Control \| Node`		—

返回值

类型：void

继承自

Control

将当前控件渲染到指定的父控件或节点。

Control

⮞ find(selector)(selector:string):Control | HTMLElement

在当前控件查找指定的子控件或节点。

参数	类型	描述	默认值
`selector*`	`string`		—

返回值

类型：Control | HTMLElement

返回子控件或节点。如果找不到则返回 null。

继承自

Control

在当前控件查找指定的子控件或节点。

Control

⮞ query(selector)(selector:string):(Control | HTMLElement)[]

在当前控件查找匹配的所有子控件或节点。

参数	类型	描述	默认值
`selector*`	`string`		—

返回值

类型：(Control | HTMLElement)[]

返回子控件或节点列表。

继承自

Control

在当前控件查找匹配的所有子控件或节点。

Control

☍导航标签ui/navTab

☍基本用法

☍常用功能

☍添加标签页（带图标）

☍关闭所有标签页

☍样式

☍API

☍⅏NavTab 类

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

返回值

返回值

返回值

返回值

导航标签ui/navTab

基本用法

常用功能

添加标签页（带图标）

关闭所有标签页

样式

API

NavTab 类