鴻蒙OS JS API參考 組件text

2020-09-17 16:32 更新

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

說明

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

支持設(shè)備

智慧屏 智能穿戴
支持 支持

權(quán)限列表

無

子組件

支持<span>。

屬性

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

事件

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

樣式

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

說明

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號