鴻蒙OS JS API參考 組件tab-content

2020-09-17 14:54 更新

<tabs>的子組件，用來展示tab的內(nèi)容區(qū)，高度默認(rèn)充滿tabs剩余空間，子組件排列方式為橫向排列，當(dāng)作為容器組件的子元素時在主軸方向需要設(shè)置tab-content的確定長度，否則無法顯示。

支持設(shè)備

智慧屏 智能穿戴
支持 不支持

權(quán)限列表

無

子組件

支持。

屬性

名稱 類型 默認(rèn)值 必填 描述
scrollable boolean true 否 是否可以通過左右滑動進行頁面切換。默認(rèn)為true，設(shè)置為false后，頁面的切換只能通過tab-bar的點擊實現(xiàn)。
id string - 否 組件的唯一標(biāo)識。
style string - 否 組件的樣式聲明。
class string - 否 組件的樣式類，用于引用樣式表。
ref string - 否 用來指定指向子元素或子組件的引用信息，該引用將注冊到父組件的$refs 屬性對象上。
disabled boolean false 否 當(dāng)前組件是否被禁用，在禁用場景下，組件將無法響應(yīng)用戶交互。
focusable boolean true 否 當(dāng)前組件是否可以獲取焦點。 當(dāng)focusable設(shè)置為true時，可否獲焦依賴于是否擁有可獲焦的子組件；設(shè)置為false時，本身及其子組件都不能獲焦。
data string - 否 給當(dāng)前組件設(shè)置data屬性，進行相應(yīng)的數(shù)據(jù)存儲和讀取。

事件

名稱 參數(shù) 描述
touchstart TouchEvent 手指剛觸摸屏幕時觸發(fā)該事件。
touchmove TouchEvent 手指觸摸屏幕后移動時觸發(fā)該事件。
touchcancel TouchEvent 手指觸摸屏幕中動作被打斷時觸發(fā)該事件。
touchend TouchEvent 手指觸摸結(jié)束離開屏幕時觸發(fā)該事件。
click - 點擊動作觸發(fā)該事件。
longpress - 長按動作觸發(fā)該事件。
focus - 獲得焦點時觸發(fā)該事件，span組件無法獲取焦點。
blur - 失去焦點時觸發(fā)該事件，span組件無法失去焦點。
key KeyEvent 智慧屏特有的按鍵事件，當(dāng)用戶操作遙控器按鍵時觸發(fā)。返回true表示頁面自己處理按鍵事件。返回false表示使用默認(rèn)的按鍵事件邏輯。不返回值作為false處理。

樣式

名稱 類型 默認(rèn)值 必填 描述
width <length> | <percentage> - 否 設(shè)置組件自身的寬度。缺省時使用元素自身內(nèi)容需要的寬度。
height <length> | <percentage> - 否 設(shè)置組件自身的高度。缺省時使用元素自身內(nèi)容需要的高度。
padding <length> 0 否 該屬性可以有1到4個值：指定一個值時，該值指定四個邊的內(nèi)邊距。指定兩個值時，第一個值指定上下兩邊的內(nèi)邊距，第二個指定左右兩邊的內(nèi)邊距。指定三個值時，第一個指定上邊的內(nèi)邊距，第二個指定左右兩邊的內(nèi)邊距，第三個指定下邊的內(nèi)邊距。指定四個值時分別為上、右、下、左邊的內(nèi)邊距（順時針順序）。
padding-[left|top|right|bottom] <length> 0 否 設(shè)置左、上、右、下內(nèi)邊距屬性。
padding-[start|end] <length> 0 否 設(shè)置起始和末端內(nèi)邊距屬性。
margin <length> 0 否 使用簡寫屬性設(shè)置所有的外邊距屬性，該屬性可以有1到4個值。只有一個值時，這個值會被指定給全部的四個邊。兩個值時，第一個值被匹配給上和下，第二個值被匹配給左和右。三個值時，第一個值被匹配給上, 第二個值被匹配給左和右，第三個值被匹配給下。四個值時，會依次按上、右、下、左的順序匹配 (即順時針順序)。
margin-[left|top|right|bottom] <length> 0 否 設(shè)置左、上、右、下外邊距屬性。
margin-[start|end] <length> 0 否 設(shè)置起始和末端外邊距屬性。
border - 0 否 使用簡寫屬性設(shè)置所有的邊框?qū)傩?，包含邊框的寬度，樣式，顏色屬性，順序設(shè)置為border-width、border-style、border-color，不設(shè)置時，各屬性值為默認(rèn)值。
border-style string solid 否 使用簡寫屬性設(shè)置所有邊框的樣式，可選值為：dotted：顯示為一系列圓點，圓點半徑為border-width的一半。dashed：顯示為一系列短的方形虛線。solid：顯示為一條實線。
border-[left|top|right|bottom]-style string solid 否 分別設(shè)置左、上、右、下四個邊框的樣式，可選值為dotted、dashed、solid。
border-[left|top|right|bottom] - - 否 使用簡寫屬性設(shè)置對應(yīng)位置的邊框?qū)傩?，包含邊框的寬度，樣式，顏色屬性，順序設(shè)置為border-width、border-style、border-color，不設(shè)置的值為默認(rèn)值。
border-width <length> 0 否 使用簡寫屬性設(shè)置元素的所有邊框?qū)挾龋蛘邌为殲楦鬟呥吙蛟O(shè)置寬度。
border-[left|top|right|bottom]-width <length> 0 否 分別設(shè)置左、上、右、下四個邊框的寬度。
border-color <color> black 否 使用簡寫屬性設(shè)置元素的所有邊框顏色，或者單獨為各邊邊框設(shè)置顏色。
border-[left|top|right|bottom]-color <color> black 否 分別設(shè)置左、上、右、下四個邊框的顏色。
border-radius <length> - 否 border-radius屬性是設(shè)置元素的外邊框圓角半徑。設(shè)置border-radius時不能單獨設(shè)置某一個方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要設(shè)置color和width，需要將四個方向一起設(shè)置（border-width、border-color）。
border-[top|bottom]-[left|right]-radius <length> - 否 分別設(shè)置左上，右上，右下和左下四個角的圓角半徑。
background <linear-gradient> - 否 僅支持設(shè)置漸變樣式，與background-color、background-image不兼容。
background-color <color> - 否 設(shè)置背景顏色。
background-image string - 否 設(shè)置背景圖片。與background-color、background不兼容；支持網(wǎng)絡(luò)圖片資源和本地圖片資源地址。
background-size string<length> <length><percentage> <percentage> auto 否 設(shè)置背景圖片的大小。string可選值：contain：把圖像擴展至最大尺寸，以使其高度和寬度完全適用內(nèi)容區(qū)域。cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域；背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。auto：保持原圖的比例不變。length值參數(shù)方式：設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。百分比參數(shù)方式：以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。
background-repeat string repeat 否 針對重復(fù)背景圖像樣式進行設(shè)置，背景圖像默認(rèn)在水平和垂直方向上重復(fù)。repeat：在水平軸和豎直軸上同時重復(fù)繪制圖片。repeat-x：只在水平軸上重復(fù)繪制圖片。repeat-y：只在豎直軸上重復(fù)繪制圖片。no-repeat：不會重復(fù)繪制圖片。
background-position string string<length> <length><percentage> <percentage> 0px 0px 否 關(guān)鍵詞方式：如果僅規(guī)定了一個關(guān)鍵詞，那么第二個值為"center"。兩個值分別定義水平方向位置和豎直方向位置。left：水平方向上最左側(cè)。right：水平方向上最右側(cè)。top：豎直方向上最頂部。bottom：豎直方向上最底部。center：水平方向或豎直方向上中間位置。length值參數(shù)方式：第一個值是水平位置，第二個值是垂直位置。 左上角是 0 0。單位是像素 (0px 0px) 。如果僅規(guī)定了一個值，另外一個值將是50%。百分比參數(shù)方式：第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果僅規(guī)定了一個值，另外一個值為50%。可以混合使用<percentage>和<length>
opacity number 1 否 元素的透明度，取值范圍為0到1，1表示為不透明，0表示為完全透明。
display string flex 否 確定一個元素所產(chǎn)生的框的類型，可選值為：flex：彈性布局。none：不渲染此元素。
visibility string visible 否 是否顯示元素所產(chǎn)生的框。不可見的框會占用布局（將'display'屬性設(shè)置為'none'來完全去除框），可選值為：visible：元素正常顯示。hidden：隱藏元素，但是其他元素的布局不改變，相當(dāng)于此元素變成透明。說明visibility和display樣式都設(shè)置時，僅display生效
flex number - 否 規(guī)定當(dāng)前組件如何適應(yīng)父組件中的可用空間。它作為一個簡寫屬性，用來設(shè)置組件的flex-grow。說明僅父容器為<div>、<list-item>、<tabs>時生效。
flex-grow number 0 否 設(shè)置組件的拉伸樣式，指定父組件容器主軸方向上剩余空間（容器本身大小減去所有flex子元素占用的大?。┑姆峙錂?quán)重。0為不伸展。說明僅父容器為<div>、<list-item>、<tabs>時生效。
flex-shrink number 1 否 設(shè)置組件的收縮樣式，元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，0為不收縮。說明僅父容器為<div>、<list-item>、<tabs>時生效。
flex-basis <length> - 否 設(shè)置組件在主軸方向上的初始大小。說明僅父容器為<div>、<list-item>、<tabs>時生效。
position string relative 否 設(shè)置元素的定位類型，不支持動態(tài)變更。fixed：相對與整個界面進行定位。absolute：相對于父元素進行定位。relative：相對于其正常位置進行定位。說明absolute屬性僅在父容器為<div>、<stack>時生效。
[left|top|right|bottom] <length> - 否 left|top|right|bottom需要配合position樣式使用，來確定元素的偏移位置。left屬性規(guī)定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。top屬性規(guī)定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right屬性規(guī)定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom屬性規(guī)定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號