Vue EasyUI 選項(xiàng)卡

2020-06-24 11:40 更新

選項(xiàng)卡（ Tabs ）是顯示面板的集合。

屬性列表

名稱(chēng) 數(shù)據(jù)類(lèi)型 作用描述 默認(rèn)值
border boolean 是否顯示邊框。 true
justified boolean 使制表符條與其父容器的寬度相等。 false
narrow boolean 為T(mén)rue時(shí),移除制表符條之間的空格。 false
plain boolean 為T(mén)rue時(shí)，用于在沒(méi)有背景容器圖像的情況下呈現(xiàn)選項(xiàng)卡條帶。 false
scrollable boolean 為T(mén)rue時(shí)，啟用選項(xiàng)卡標(biāo)題上的可滾動(dòng)特性。 false
scrollIncrement number 每次按下制表符滾動(dòng)按鈕時(shí)要滾動(dòng)的像素?cái)?shù)。 100
headerWidth number 頭部寬度。 150
headerHeight number 選項(xiàng)卡標(biāo)題高度。 35
tabWidth number 選項(xiàng)卡寬度。 null
tabHeight number 選項(xiàng)卡高度。 32
tabPosition string 標(biāo)簽的位置?？蛇x值:'top'，'bottom'，'left'，'right'。 top
selectedIndex number 已初始化的選中制表符索引。 0

事件列表

名稱(chēng) 參數(shù) 作用描述
tabSelect panel 選擇選項(xiàng)卡面板時(shí)觸發(fā)。
tabUnselect panel 未選擇選項(xiàng)卡面板時(shí)觸發(fā)。
tabClose panel 關(guān)閉選項(xiàng)卡面板時(shí)觸發(fā)。

方法列表

名稱(chēng) 參數(shù) 返回值 作用描述
select index void 選擇一個(gè)選項(xiàng)卡面板。
unselect index void 取消選擇選項(xiàng)卡面板。
getPanel index TabPanel 獲得一個(gè)選項(xiàng)卡面板。
getPanelIndex tab number 獲取選項(xiàng)卡面板索引。
getSelectedPanel none TabPanel 獲取第一個(gè)選中的選項(xiàng)卡面板。
scrollBy distance void 使用指定的距離滾動(dòng)選項(xiàng)卡標(biāo)題。

注：
- 繼承： None 。

使用方法

通過(guò) HTML 標(biāo)記創(chuàng)建選項(xià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>這是幫助內(nèi)容。</p>
  </TabPanel>
</Tabs>

選項(xiàng)卡面板（ TabsPanel ）

  • 選項(xiàng)卡面板（ TabsPanel ）選項(xiàng)繼承自面板（ Panel ），以下是附加屬性：
名稱(chēng) 數(shù)據(jù)類(lèi)型 作用描述 默認(rèn)值
selected boolean 是否選擇面板。 false
disabled boolean 是否禁用選項(xiàng)卡面板。 false
closable boolean 設(shè)置為true時(shí)，選項(xiàng)卡面板將顯示一個(gè)可關(guān)閉按鈕，可以單擊該按鈕關(guān)閉選項(xiàng)卡面板。 false

  • 方法列表：
名稱(chēng) 參數(shù) 返回值 作用描述
select none void 選擇選項(xiàng)卡面板。
unselect none void 取消選擇選項(xiàng)卡面板。
close none void 關(guān)閉選項(xiàng)卡面板。
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)