鴻蒙OS JS API參考 組件text

2020-09-17 16:32 更新

文本，用于呈現(xiàn)一段信息。

說明

文本的展示內(nèi)容需要寫在元素標簽內(nèi)。

支持設備

智慧屏 智能穿戴
支持 支持

權限列表

無

子組件

支持<span>。

屬性

名稱 類型 默認值 必填 描述
id string - 否 組件的唯一標識。
style string - 否 組件的樣式聲明。
class string - 否 組件的樣式類，用于引用樣式表。
ref string - 否 用來指定指向子元素或子組件的引用信息，該引用將注冊到父組件的$refs 屬性對象上。
disabled boolean false 否 當前組件是否被禁用，在禁用場景下，組件將無法響應用戶交互。
focusable boolean false 否 當前組件是否可以獲取焦點。 當focusable設置為true時，組件可以響應焦點事件和按鍵事件。
data string - 否 給當前組件設置data屬性，進行相應的數(shù)據(jù)存儲和讀取。

事件

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

樣式

名稱 類型 默認值 必填 描述
color <color> 智慧屏：#e5ffffff智能穿戴：#ffffffff 否 設置文本的顏色。
font-size <length> 30px 否 設置文本的尺寸。
allow-scale boolean true 否 文本尺寸是否跟隨系統(tǒng)設置字體縮放尺寸進行放大縮小。說明如果需要支持動態(tài)生效，請參看config描述文件中config-changes標簽。
letter-spacing <length> 0px 否 設置文本的字符間距。
font-style string normal 否 設置文本的字體樣式，可選值為：normal：標準的字體樣式；italic：斜體的字體樣式。
font-weight number | string normal 否 設置文本的字體粗細，number類型取值[100, 900]，默認為400，取值越大，字體越粗。說明number取值必須為100的整數(shù)倍。string類型取值支持如下四個值：lighter、normal、bold、bolder。
text-decoration string none 否 設置文本的文本修飾，可選值為：underline：文字下劃線修飾；line-through：穿過文本的修飾線；none：標準文本。
text-align string start 否 設置文本的文本對齊方式，可選值為：left：文本左對齊；center：文本居中對齊；right：文本右對齊；start：根據(jù)文字書寫相同的方向?qū)R；end：根據(jù)文字書寫相反的方向?qū)R。說明如文本寬度未指定大小，文本的寬度和父容器的寬度大小相等的情況下，對齊效果可能會不明顯。
line-height <length> 0px 否 設置文本的文本行高，設置為0px時，不限制文本行高，自適應字體大小。
text-overflow string clip 否 在設置了最大行數(shù)的情況下生效，可選值為：clip：將文本根據(jù)父容器大小進行裁剪顯示；ellipsis：根據(jù)父容器大小顯示，顯示不下的文本用省略號代替。需配合max-lines使用。
font-family string sans-serif 否 設置文本的字體列表，用逗號分隔，每個字體用字體名或者字體族名設置。列表中第一個系統(tǒng)中存在的或者通過自定義字體指定的字體，會被選中作為文本的字體。
max-lines number - 否 設置文本的最大行數(shù)。
min-font-size <length> - 否 文本最小字號，需要和文本最大字號同時設置，支持文本字號動態(tài)變化。設置最大最小字體樣式后，font-size不生效。
max-font-size <length> - 否 文本最大字號，需要和文本最小字號同時設置，支持文本字號動態(tài)變化。設置最大最小字體樣式后，font-size不生效。
font-size-step <length> 1px 否 文本動態(tài)調(diào)整字號時的步長，需要設置最小，最大字號樣式生效。
prefer-font-sizes <array> - 否 預設的字號集合，在動態(tài)尺寸調(diào)整時，優(yōu)先使用預設字號集合中的字號匹配設置的最大行數(shù)，如果預設字號集合未設置，則使用最大最小和步長調(diào)整字號。針對仍然無法滿足最大行數(shù)要求的情況，使用text-overflow設置項進行截斷，設置預設尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。如：prefer-font-sizes: 12px,14px,16px
width <length> | <percentage> - 否 設置組件自身的寬度。缺省時使用元素自身內(nèi)容需要的寬度。
height <length> | <percentage> - 否 設置組件自身的高度。缺省時使用元素自身內(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 否 設置左、上、右、下內(nèi)邊距屬性。
padding-[start|end] <length> 0 否 設置起始和末端內(nèi)邊距屬性。
margin <length> 0 否 使用簡寫屬性設置所有的外邊距屬性，該屬性可以有1到4個值。只有一個值時，這個值會被指定給全部的四個邊。兩個值時，第一個值被匹配給上和下，第二個值被匹配給左和右。三個值時，第一個值被匹配給上, 第二個值被匹配給左和右，第三個值被匹配給下。四個值時，會依次按上、右、下、左的順序匹配 (即順時針順序)。
margin-[left|top|right|bottom] <length> 0 否 設置左、上、右、下外邊距屬性。
margin-[start|end] <length> 0 否 設置起始和末端外邊距屬性。
border - 0 否 使用簡寫屬性設置所有的邊框?qū)傩?，包含邊框的寬度，樣式，顏色屬性，順序設置為border-width、border-style、border-color，不設置時，各屬性值為默認值。
border-style string solid 否 使用簡寫屬性設置所有邊框的樣式，可選值為：dotted：顯示為一系列圓點，圓點半徑為border-width的一半。dashed：顯示為一系列短的方形虛線。solid：顯示為一條實線。
border-[left|top|right|bottom]-style string solid 否 分別設置左、上、右、下四個邊框的樣式，可選值為dotted、dashed、solid。
border-[left|top|right|bottom] - - 否 使用簡寫屬性設置對應位置的邊框?qū)傩?，包含邊框的寬度，樣式，顏色屬性，順序設置為border-width、border-style、border-color，不設置的值為默認值。
border-width <length> 0 否 使用簡寫屬性設置元素的所有邊框?qū)挾?，或者單獨為各邊邊框設置寬度。
border-[left|top|right|bottom]-width <length> 0 否 分別設置左、上、右、下四個邊框的寬度。
border-color <color> black 否 使用簡寫屬性設置元素的所有邊框顏色，或者單獨為各邊邊框設置顏色。
border-[left|top|right|bottom]-color <color> black 否 分別設置左、上、右、下四個邊框的顏色。
border-radius <length> - 否 border-radius屬性是設置元素的外邊框圓角半徑。設置border-radius時不能單獨設置某一個方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要設置color和width，需要將四個方向一起設置（border-width、border-color）。
border-[top|bottom]-[left|right]-radius <length> - 否 分別設置左上，右上，右下和左下四個角的圓角半徑。
background <linear-gradient> - 否 僅支持設置漸變樣式，與background-color、background-image不兼容。
background-color <color> - 否 設置背景顏色。
background-image string - 否 設置背景圖片。與background-color、background不兼容；支持網(wǎng)絡圖片資源和本地圖片資源地址。
background-size string<length> <length><percentage> <percentage> auto 否 設置背景圖片的大小。string可選值：contain：把圖像擴展至最大尺寸，以使其高度和寬度完全適用內(nèi)容區(qū)域。cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域；背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。auto：保持原圖的比例不變。length值參數(shù)方式：設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。百分比參數(shù)方式：以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
background-repeat string repeat 否 針對重復背景圖像樣式進行設置，背景圖像默認在水平和垂直方向上重復。repeat：在水平軸和豎直軸上同時重復繪制圖片。repeat-x：只在水平軸上重復繪制圖片。repeat-y：只在豎直軸上重復繪制圖片。no-repeat：不會重復繪制圖片。
background-position string string<length> <length><percentage> <percentage> 0px 0px 否 關鍵詞方式：如果僅規(guī)定了一個關鍵詞，那么第二個值為"center"。兩個值分別定義水平方向位置和豎直方向位置。left：水平方向上最左側。right：水平方向上最右側。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'屬性設置為'none'來完全去除框），可選值為：visible：元素正常顯示。hidden：隱藏元素，但是其他元素的布局不改變，相當于此元素變成透明。說明visibility和display樣式都設置時，僅display生效
flex number - 否 規(guī)定當前組件如何適應父組件中的可用空間。它作為一個簡寫屬性，用來設置組件的flex-grow。說明僅父容器為<div>、<list-item>、<tabs>時生效。
flex-grow number 0 否 設置組件的拉伸樣式，指定父組件容器主軸方向上剩余空間（容器本身大小減去所有flex子元素占用的大小）的分配權重。0為不伸展。說明僅父容器為<div>、<list-item>、<tabs>時生效。
flex-shrink number 1 否 設置組件的收縮樣式，元素僅在默認寬度之和大于容器的時候才會發(fā)生收縮，0為不收縮。說明僅父容器為<div>、<list-item>、<tabs>時生效。
flex-basis <length> - 否 設置組件在主軸方向上的初始大小。說明僅父容器為<div>、<list-item>、<tabs>時生效。
position string relative 否 設置元素的定位類型，不支持動態(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ī)定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。

說明

  • 字體動態(tài)縮放：預設尺寸集合和最小最大字號調(diào)節(jié)基于是否滿足最大行數(shù)要求，預設尺寸集合會按照從左到右順序查看是否滿足最大行數(shù)要求，最小最大字號調(diào)節(jié)則基于從大到小順序查看是否滿足最大行數(shù)要求。
  • 文本換行：文本可以通過轉(zhuǎn)義字符\r\n進行換行。
  • 文本標簽內(nèi)支持轉(zhuǎn)義字符'\'。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號