閱讀(2.1k) 書簽贊(0) 我要糾錯

Vue EasyUI 選項卡

2020-06-24 11:40 更新

選項卡（ Tabs ）是顯示面板的集合。

屬性列表

名稱	數據類型	作用描述	默認值
border	boolean	是否顯示邊框。	true
justified	boolean	使制表符條與其父容器的寬度相等。	false
narrow	boolean	為True時,移除制表符條之間的空格。	false
plain	boolean	為True時，用于在沒有背景容器圖像的情況下呈現選項卡條帶。	false
scrollable	boolean	為True時，啟用選項卡標題上的可滾動特性。	false
scrollIncrement	number	每次按下制表符滾動按鈕時要滾動的像素數。	100
headerWidth	number	頭部寬度。	150
headerHeight	number	選項卡標題高度。	35
tabWidth	number	選項卡寬度。	null
tabHeight	number	選項卡高度。	32
tabPosition	string	標簽的位置。可選值:'top'，'bottom'，'left'，'right'。	top
selectedIndex	number	已初始化的選中制表符索引。	0

事件列表

名稱	參數	作用描述
tabSelect	panel	選擇選項卡面板時觸發(fā)。
tabUnselect	panel	未選擇選項卡面板時觸發(fā)。
tabClose	panel	關閉選項卡面板時觸發(fā)。

方法列表

名稱	參數	返回值	作用描述
select	index	void	選擇一個選項卡面板。
unselect	index	void	取消選擇選項卡面板。
getPanel	index	TabPanel	獲得一個選項卡面板。
getPanelIndex	tab	number	獲取選項卡面板索引。
getSelectedPanel	none	TabPanel	獲取第一個選中的選項卡面板。
scrollBy	distance	void	使用指定的距離滾動選項卡標題。

注：
- 繼承： None 。

使用方法

通過 HTML 標記創(chuàng)建選項卡（ tabs ）。

<Tabs style="height:250px">
  <TabPanel :title="'Tab1'">
    <p>Hello user.</p>
  </TabPanel>
  <TabPanel :title="'Tab2'">
    <p>Welcome to W3Cschool.</p>
  </TabPanel>
  <TabPanel :title="'Tab3'">
    <p>You'll learn something.</p>
  </TabPanel>
  <TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
    <p>這是幫助內容。</p>
  </TabPanel>
</Tabs>

選項卡面板（ TabsPanel ）

選項卡面板（ TabsPanel ）選項繼承自面板（ Panel ），以下是附加屬性：

名稱	數據類型	作用描述	默認值
selected	boolean	是否選擇面板。	false
disabled	boolean	是否禁用選項卡面板。	false
closable	boolean	設置為true時，選項卡面板將顯示一個可關閉按鈕，可以單擊該按鈕關閉選項卡面板。	false