<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p12753143712225"><aname="p12753143712225"></a><aname="p12753143712225"></a>Chart type. Dynamic modification is not supported. Available values include:</p>
<aname="ul2754143714229"></a><aname="ul2754143714229"></a><ulid="ul2754143714229"><li><strongid="b380817522531"><aname="b380817522531"></a><aname="b380817522531"></a>bar</strong>: bar chart</li><li><strongid="b47791053195316"><aname="b47791053195316"></a><aname="b47791053195316"></a>line</strong>: line chart</li><li><strongid="b10329326115314"><aname="b10329326115314"></a><aname="b10329326115314"></a>gauge</strong>: gauge chart</li><li><strongid="b118466531142"><aname="b118466531142"></a><aname="b118466531142"></a>progress</strong><supid="sup116561549162915"><aname="sup116561549162915"></a><aname="sup116561549162915"></a>5+</sup>: circle chart of progresses</li><li><strongid="b91066210159"><aname="b91066210159"></a><aname="b91066210159"></a>loading</strong><supid="sup1246145116541"><aname="sup1246145116541"></a><aname="sup1246145116541"></a>5+</sup>: circle chart of loading processes</li><li><strongid="b187912701513"><aname="b187912701513"></a><aname="b187912701513"></a>rainbow</strong><supid="sup13727185218542"><aname="sup13727185218542"></a><aname="sup13727185218542"></a>5+</sup>: circle chart of proportions</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p19754143732218"><aname="p19754143732218"></a><aname="p19754143732218"></a>Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p775483772214"><aname="p775483772214"></a><aname="p775483772214"></a>Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1455632813277"><aname="p1455632813277"></a><aname="p1455632813277"></a>Data structures used by <strongid="b1997913981710"><aname="b1997913981710"></a><aname="b1997913981710"></a>progress</strong>, <strongid="b991191118176"><aname="b991191118176"></a><aname="b991191118176"></a>loading</strong>, and <strongid="b962820295179"><aname="b962820295179"></a><aname="b962820295179"></a>rainbow</strong> charts.</p>
<pid="p19327195813510"><aname="p19327195813510"></a><aname="p19327195813510"></a><strongid="b196601530164710"><aname="b196601530164710"></a><aname="b196601530164710"></a>DataSegment</strong> is available for <strongid="b1066083012472"><aname="b1066083012472"></a><aname="b1066083012472"></a>progress</strong> and <strongid="b16660143054719"><aname="b16660143054719"></a><aname="b16660143054719"></a>loading</strong> charts.</p>
<pid="p14326258457"><aname="p14326258457"></a><aname="p14326258457"></a><strongid="b1044023344716"><aname="b1044023344716"></a><aname="b1044023344716"></a>Array<<ahref="#table2596183616210">DataSegment</a>></strong> is available for <strongid="b194405335477"><aname="b194405335477"></a><aname="b194405335477"></a>rainbow</strong> charts. A maximum of nine <strongid="b15441133114716"><aname="b15441133114716"></a><aname="b15441133114716"></a>DataSegment</strong> are supported in the array.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p92085712225"><aname="p92085712225"></a><aname="p92085712225"></a>Whether to enable the effects for <strongid="b7262163754711"><aname="b7262163754711"></a><aname="b7262163754711"></a>progress</strong> and <strongid="b12263437134715"><aname="b12263437134715"></a><aname="b12263437134715"></a>rainbow</strong> charts.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p181331564408"><aname="p181331564408"></a><aname="p181331564408"></a>Animation duration for expanding a <strongid="b538918433184"><aname="b538918433184"></a><aname="b538918433184"></a>rainbow</strong> chart, in milliseconds.</p>
<tdclass="cellrowborder"valign="top"width="38%"headers="mcps1.2.6.1.5 "><pid="p1795144819490"><aname="p1795144819490"></a><aname="p1795144819490"></a>X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis.</p>
<tdclass="cellrowborder"valign="top"width="38%"headers="mcps1.2.6.1.5 "><pid="p14661554125010"><aname="p14661554125010"></a><aname="p14661554125010"></a>Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis.</p>
<aname="ul4402155710308"></a><aname="ul4402155710308"></a><ulid="ul4402155710308"><li>Line style, such as the line width and whether the line is smooth.</li><li>Style and size of the white point at the start of the line.</li></ul>
<divclass="note"id="note163611718126"><aname="note163611718126"></a><aname="note163611718126"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p15361117191211"><aname="p15361117191211"></a><aname="p15361117191211"></a>Only line charts support this attribute.</p>
<divclass="note"id="note149682371351"><aname="note149682371351"></a><aname="note149682371351"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p189688371757"><aname="p189688371757"></a><aname="p189688371757"></a>Only line charts support this attribute.</p>
<tdclass="cellrowborder"valign="top"width="44.29%"headers="mcps1.2.6.1.5 "><pid="p975563915619"><aname="p975563915619"></a><aname="p975563915619"></a>Fill color. For line charts, the value indicates the gradient color to fill.</p>
<tdclass="cellrowborder"valign="top"width="44.29%"headers="mcps1.2.6.1.5 "><pid="p113975114159"><aname="p113975114159"></a><aname="p113975114159"></a>Data of the drawn line or bar.</p>
<tdclass="cellrowborder"valign="top"width="44.29%"headers="mcps1.2.6.1.5 "><pid="p198414916522"><aname="p198414916522"></a><aname="p198414916522"></a>Whether to display the gradient color.</p>
<divclass="note"id="note55873241061"><aname="note55873241061"></a><aname="note55873241061"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1558712410616"><aname="p1558712410616"></a><aname="p1558712410616"></a>Only line charts support this attribute.</p>
<tdclass="cellrowborder"valign="top"width="44.64%"headers="mcps1.2.6.1.5 "><pid="p15313529165215"><aname="p15313529165215"></a><aname="p15313529165215"></a>Minimum value of the axis.</p>
<divclass="note"id="note947711273197"><aname="note947711273197"></a><aname="note947711273197"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p5477102781911"><aname="p5477102781911"></a><aname="p5477102781911"></a>Only line charts support negative numbers.</p>
<tdclass="cellrowborder"valign="top"width="44.64%"headers="mcps1.2.6.1.5 "><pid="p111771705519"><aname="p111771705519"></a><aname="p111771705519"></a>Maximum value of the axis.</p>
<divclass="note"id="note1287217389195"><aname="note1287217389195"></a><aname="note1287217389195"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p17872153817197"><aname="p17872153817197"></a><aname="p17872153817197"></a>Only line charts support negative numbers.</p>
<tdclass="cellrowborder"valign="top"width="44.64%"headers="mcps1.2.6.1.5 "><pid="p1144027105511"><aname="p1144027105511"></a><aname="p1144027105511"></a>Number of scales displayed on the axis.</p>
<divclass="note"id="note18942121511202"><aname="note18942121511202"></a><aname="note18942121511202"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p4709421681"><aname="p4709421681"></a><aname="p4709421681"></a>The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(<strongid="b17205813354"><aname="b17205813354"></a><aname="b17205813354"></a>max</strong>-<strongid="b182718418359"><aname="b182718418359"></a><aname="b182718418359"></a>min</strong>).</p>
<pid="p234142016205"><aname="p234142016205"></a><aname="p234142016205"></a>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.</p>
<tdclass="cellrowborder"valign="top"width="44.64%"headers="mcps1.2.6.1.5 "><pid="p1655910815551"><aname="p1655910815551"></a><aname="p1655910815551"></a>Whether to display the axis.</p>
<tdclass="cellrowborder"valign="top"width="43.68%"headers="mcps1.2.6.1.5 "><pid="p929652045614"><aname="p929652045614"></a><aname="p929652045614"></a>Line style, such as the line width and whether the line is smooth.</p>
<tdclass="cellrowborder"valign="top"width="43.68%"headers="mcps1.2.6.1.5 "><pid="p14296132015616"><aname="p14296132015616"></a><aname="p14296132015616"></a>Style and size of the white point at the start of the line.</p>
<tdclass="cellrowborder"valign="top"width="43.68%"headers="mcps1.2.6.1.5 "><pid="p98810719197"><aname="p98810719197"></a><aname="p98810719197"></a>Style and size of the top point.</p>
<tdclass="cellrowborder"valign="top"width="43.68%"headers="mcps1.2.6.1.5 "><pid="p10719357111610"><aname="p10719357111610"></a><aname="p10719357111610"></a>Style and size of the bottom point.</p>
<tdclass="cellrowborder"valign="top"width="43.68%"headers="mcps1.2.6.1.5 "><pid="p19656131113517"><aname="p19656131113517"></a><aname="p19656131113517"></a>Whether to start drawing again when the screen is looped.</p>
<tdclass="cellrowborder"valign="top"width="43.07%"headers="mcps1.2.6.1.5 "><pid="p1879113353920"><aname="p1879113353920"></a><aname="p1879113353920"></a>Whether the line is smooth.</p>
<tdclass="cellrowborder"valign="top"width="42.63%"headers="mcps1.2.6.1.5 "><pid="p113581206134"><aname="p113581206134"></a><aname="p113581206134"></a>Shape of the highlight point. Available values are as follows:</p>
<tdclass="cellrowborder"valign="top"width="42.63%"headers="mcps1.2.6.1.5 "><pid="p2358502135"><aname="p2358502135"></a><aname="p2358502135"></a>Size of the highlight point.</p>
<tdclass="cellrowborder"valign="top"width="42.03%"headers="mcps1.2.6.1.5 "><pid="p798434723720"><aname="p798434723720"></a><aname="p798434723720"></a>Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use <strongid="b16357142745814"><aname="b16357142745814"></a><aname="b16357142745814"></a>margin</strong> together with <strongid="b188717325586"><aname="b188717325586"></a><aname="b188717325586"></a>topPoint</strong>, <strongid="b32281537165815"><aname="b32281537165815"></a><aname="b32281537165815"></a>bottomPoint</strong>, or <strongid="b2578114315585"><aname="b2578114315585"></a><aname="b2578114315585"></a>headPoint</strong> for lite devices. If you do so, there is a possibility that the point is in the erase area and invisible.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p188430361213"><aname="p188430361213"></a><aname="p188430361213"></a>Y coordinate of the point to draw.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p12708203712010"><aname="p12708203712010"></a><aname="p12708203712010"></a>Style of the point.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p11313171716246"><aname="p11313171716246"></a><aname="p11313171716246"></a>Description text of the point.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p6108637185"><aname="p6108637185"></a><aname="p6108637185"></a>Description text position relative to the point. Available values are as follows: </p>
<pid="p15749138180"><aname="p15749138180"></a><aname="p15749138180"></a><strongid="b117496386820"><aname="b117496386820"></a><aname="b117496386820"></a>top</strong>: above the point </p>
<pid="p65480401482"><aname="p65480401482"></a><aname="p65480401482"></a><strongid="b105484402815"><aname="b105484402815"></a><aname="b105484402815"></a>bottom</strong>: below the point </p>
<pid="p20314141922517"><aname="p20314141922517"></a><aname="p20314141922517"></a><strongid="b171799461313"><aname="b171799461313"></a><aname="b171799461313"></a>none</strong>: not displayed</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p13868150162611"><aname="p13868150162611"></a><aname="p13868150162611"></a>Color of the description text.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p570304202712"><aname="p570304202712"></a><aname="p570304202712"></a>Dashed line pattern. You can set the dash length and space length between the dashes. For example, <strongid="b7111914270"><aname="b7111914270"></a><aname="b7111914270"></a>"dashed, 5, 5"</strong> indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value <strongid="b08251016203215"><aname="b08251016203215"></a><aname="b08251016203215"></a>"solid"</strong> indicates a solid line.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="a83b9b1430350465dbd6a99d5a0338e2c"><aname="a83b9b1430350465dbd6a99d5a0338e2c"></a><aname="a83b9b1430350465dbd6a99d5a0338e2c"></a>Line color. If this attribute is not set, the <strongid="b17128123414344"><aname="b17128123414344"></a><aname="b17128123414344"></a>strokeColor</strong> is used by default.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p5652139121119"><aname="p5652139121119"></a><aname="p5652139121119"></a>Color of the start position. If this attribute is set, <strongid="b14583141810491"><aname="b14583141810491"></a><aname="b14583141810491"></a>endColor</strong> must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p11652139131117"><aname="p11652139131117"></a><aname="p11652139131117"></a>Color of the end position. If this attribute is set, <strongid="b12654176135111"><aname="b12654176135111"></a><aname="b12654176135111"></a>startColor</strong> must be set.</p>
<pid="p10128174015175"><aname="p10128174015175"></a><aname="p10128174015175"></a>If this attribute is not set, the default color array preset in the system is used.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p106521339131120"><aname="p106521339131120"></a><aname="p106521339131120"></a>Percentage for the current data segment. The maximum value is <strongid="b9780144416522"><aname="b9780144416522"></a><aname="b9780144416522"></a>100</strong>.</p>
<tdclass="cellrowborder"valign="top"width="57.25%"headers="mcps1.2.6.1.5 "><pid="p11653339151117"><aname="p11653339151117"></a><aname="p11653339151117"></a>Name of this data segment.</p>
<tdclass="cellrowborder"valign="top"width="45%"headers="mcps1.1.6.1.5 "><pid="p39134178350"><aname="p39134178350"></a><aname="p39134178350"></a>Percentage of the current value to the total value. The value ranges from 0 to 100.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p21684012495"><aname="p21684012495"></a><aname="p21684012495"></a>Width of the scale bar for <strongid="b87491134152415"><aname="b87491134152415"></a><aname="b87491134152415"></a>gauge</strong><spanid="ph616840154918"><aname="ph616840154918"></a><aname="ph616840154918"></a>and <strongid="b125075528532"><aname="b125075528532"></a><aname="b125075528532"></a>rainbow</strong></span> charts.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p7169800499"><aname="p7169800499"></a><aname="p7169800499"></a>Start angle of the scale bar for <strongid="b1609185210263"><aname="b1609185210263"></a><aname="b1609185210263"></a>gauge</strong><spanid="ph41696012491"><aname="ph41696012491"></a><aname="ph41696012491"></a> and <strongid="b28951759171916"><aname="b28951759171916"></a><aname="b28951759171916"></a>rainbow</strong></span> charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p31692011497"><aname="p31692011497"></a><aname="p31692011497"></a>Total length of the scale bar for <strongid="b4142940182820"><aname="b4142940182820"></a><aname="b4142940182820"></a>gauge</strong><spanid="ph1016980124914"><aname="ph1016980124914"></a><aname="ph1016980124914"></a> and <strongid="b1867663912208"><aname="b1867663912208"></a><aname="b1867663912208"></a>rainbow</strong></span> charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1416960174911"><aname="p1416960174911"></a><aname="p1416960174911"></a>Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the <strongid="b1116220342476"><aname="b1116220342476"></a><aname="b1116220342476"></a>position</strong> style in the common styles, and must be used together with <strongid="b382682912114"><aname="b382682912114"></a><aname="b382682912114"></a>center-y</strong> and <strongid="b1482811294120"><aname="b1482811294120"></a><aname="b1482811294120"></a>radius</strong>. This style is supported by the gauge chart only.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p18170170194913"><aname="p18170170194913"></a><aname="p18170170194913"></a>Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the <strongid="b1629744408"><aname="b1629744408"></a><aname="b1629744408"></a>position</strong> style in the common styles, and must be used together with <strongid="b02839331014"><aname="b02839331014"></a><aname="b02839331014"></a>center-x</strong> and <strongid="b1928518331711"><aname="b1928518331711"></a><aname="b1928518331711"></a>radius</strong>. This style is supported by the gauge chart only.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p7170507496"><aname="p7170507496"></a><aname="p7170507496"></a>Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the <strongid="b91381042517"><aname="b91381042517"></a><aname="b91381042517"></a>width</strong> and <strongid="b10941110165113"><aname="b10941110165113"></a><aname="b10941110165113"></a>height</strong> in the common styles, and must be used together with <strongid="b569715431526"><aname="b569715431526"></a><aname="b569715431526"></a>center-x</strong> and <strongid="b1370511431924"><aname="b1370511431924"></a><aname="b1370511431924"></a>center-y</strong>. This style is supported by the gauge chart only.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1817012014490"><aname="p1817012014490"></a><aname="p1817012014490"></a>Color of each section for the scale bar of the gauge component.</p>
<pid="p1617017094918"><aname="p1617017094918"></a><aname="p1617017094918"></a>For example,<strongid="b1786062281317"><aname="b1786062281317"></a><aname="b1786062281317"></a> colors: #ff0000, #00ff00</strong>. This style is supported by the gauge chart only.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p3171160114915"><aname="p3171160114915"></a><aname="p3171160114915"></a>Weight of each section for the scale bar of the gauge component.</p>
<pid="p2171140124910"><aname="p2171140124910"></a><aname="p2171140124910"></a>For example, weights: 2, 2. This style is supported by the gauge chart only.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1417110074919"><aname="p1417110074919"></a><aname="p1417110074919"></a>Font style of the description text. You can use <ahref="js-components-common-customizing-font.md">Custom Font Styles</a>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1517210104914"><aname="p1517210104914"></a><aname="p1517210104914"></a>Font size of the description text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section749131815264"></a>
Events in [Universal Events](js-components-common-events.md) are supported.
## Methods<a name="section4480852195018"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
<pid="p1348165210500"><aname="p1348165210500"></a><aname="p1348165210500"></a>serial: number, // Set the data subscript of the line chart to be updated.</p>
<pid="p15481175285010"><aname="p15481175285010"></a><aname="p15481175285010"></a>data: Array<number>, // Set the new data.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.1.4.1.3 "><pid="p7481952105010"><aname="p7481952105010"></a><aname="p7481952105010"></a>Data is dynamically added to an existing data sequence. The target sequence is specified based on <strongid="b181361720173312"><aname="b181361720173312"></a><aname="b181361720173312"></a>serial</strong>, which is the subscript of the datasets array and starts from 0. <strongid="b2513193515314"><aname="b2513193515314"></a><aname="b2513193515314"></a>datasets[index].data</strong> is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the <strongid="b16836711978"><aname="b16836711978"></a><aname="b16836711978"></a>xAxis min/max</strong> setting.</p>
| type | string | line | No | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart.<br>- **line**: line chart.<br>- **gauge**: gauge chart.<br>- **progress**<sup>5+</sup>: circle chart of progresses.<br>- **loading**<sup>5+</sup>: circle chart of loading processes.<br>- **rainbow**<sup>5+</sup>: circle chart of proportions.|
</div>
| options | ChartOptions | - | No | Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.|
```
| datasets | Array<ChartDataset> | - | No | Data sets. You must set data sets for bar charts and line charts. Data sets for a gauge chart do not take effect. You can set multiple datasets and their background colors.|
| segments<sup>5+</sup> | DataSegment \| Array<DataSegment> | - | No | Data structures used by **progress**, **loading**, and **rainbow** charts.<br>**DataSegment** is available for **progress** and **loading** charts.<br>**Array<DataSegment>** is available for **rainbow** charts. A maximum of nine **DataSegment**s are supported in the array.|
| effects<sup>5+</sup> | boolean | true | No | Whether to enable the effects for **progress** and **rainbow** charts. |
| animationduration<sup>6+</sup> | number | 3000 | No | Animation duration for expanding a **rainbow** chart, in milliseconds. |
**Table 1** ChartOptions
| Name | Type | Default Value | Mandatory | Description |
| xAxis | ChartAxis | - | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. |
| yAxis | ChartAxis | - | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. |
| series | ChartSeries | - | No | Data sequence parameters. Only line charts support this attribute.<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.|
```
**Table 2** ChartDataset
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.data-region {
height: 400px;
width: 700px;
}
.data-background {
object-fit: fill;
}
.data-bar {
width: 700px;
height: 400px;
}
```
```
| Name | Type | Default Value | Mandatory | Description |
| min | number | 0 | No | Minimum value of the axis. Only line charts support negative numbers. |
},
| max | number | 100 | No | Maximum value of the axis. Only line charts support negative numbers. |
{
| axisTick | number | 10 | No | Number of scales displayed on the axis. The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max** – **min**).<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.|
fillColor: '#ff88bb',
| display | boolean | false | No | Whether to display the axis. |
| margin | <length> | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.|
| gradient | boolean | false | No | Whether to perform gradient erase. |
**Table 8** Point<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
| value | number | 0 | Yes | Y coordinate of the point to draw. |
| pointStyle | PointStyle | - | No | Style of the point. |
| description | string | - | No | Description text of the point. |
| textLocation | string | - | No | Position of the description text relative to the point. Available values are as follows: **top**: above the point<br>**bottom**: below the point<br>**none**: not displayed|
| textColor | <color> | \#000000 | No | Color of the description text. |
| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. For example, **"dashed, 5, 5"** indicates a dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line.|
| lineColor | <color> | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. |
**Table 9** DataSegment<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
| startColor | Color | - | No | Color of the start position. If this attribute is set, **endColor** must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.|
| endColor | Color | - | No | Color of the end position. If this attribute is set, **startColor** must be set.<br>If this attribute is not set, the default color array preset in the system is used.|
| value | number | 0 | Yes | Percentage for the data segment. The maximum value is **100**. |
| name | string | - | No | Name of the data segment. |
| stroke-width | <length> | 32px (**gauge** charts)<br>24px (**rainbow** charts)| No | Width of the scale bar for **gauge** and **rainbow** charts. |
| start-angle | <deg> | 240 (**gauge** charts)<br>0 (**rainbow** charts) | No | Start angle of the scale bar for **gauge** and **rainbow** charts, which starts from zero o'clock. The value ranges from 0 to 360. |
| total-angle | <deg> | 240 (**gauge** charts)<br>360 (**rainbow** charts) | No | Total length of the scale bar for **gauge** and **rainbow** charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.|
| center-x | <length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-y** and **radius**. This style is supported by the gauge chart only.|
| center-y | <length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-x** and **radius**. This style is supported by the gauge chart only.|
| radius | <length> | - | No | Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **width** and **height** in the common styles, and must be used together with **center-x** and **center-y**. This style is supported by the gauge chart only.|
| colors | Array | - | No | Color of each section for the scale bar of the gauge component.<br>For example, **colors: \#ff0000, #00ff00**. This style is supported by the gauge chart only.|
| weights | Array | - | No | Weight of each section for the scale bar of the gauge component.<br>For example, **weights: 2, 2**. This style is supported by the gauge chart only.|
| font-family<sup>5+</sup> | Array | - | No | Font style of the description text. You can use a [custom font](../arkui-js/js-components-common-customizing-font.md).|
| font-size<sup>5+</sup> | <length> | - | No | Font size of the description text. |
## Events
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array<number>, // Set the new data.<br>} | Data is dynamically added to an existing data sequence. The target sequence is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.|
| vertical | boolean | false | No | Whether to use the vertical divider. The default value is **false**, indicating that the horizontal divider is used.|
| margin | <length> | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values: |
| margin-[left\|top\|right\|bottom] | <length> | 0 | No | Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is **0**.|
</td>
| color | <color> | \#08000000 | No | Color of the divider. |
| stroke-width | <length> | 1 | No | Width of the divider. |
</td>
| display | string | flex | No | Type of the bounding box generated by the divider. The value can be **flex** or **none**. The default value is **flex**. |
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1769433401719"><aname="p1769433401719"></a><aname="p1769433401719"></a>Whether to use the vertical divider. The default value is <strongid="b8204122145214"><aname="b8204122145214"></a><aname="b8204122145214"></a>false</strong>, indicating that the horizontal divider is used.</p>
| visibility | string | visible | No | Whether to display the divider. Invisible dividers also occupy space. **visible** indicates that the divider is displayed, and **hidden** indicates that the divider is not displayed.|
</td>
| line-cap | string | butt | No | Cap style of the divider. The default value is **butt**. Available values are as follows:<br>- **butt**: The ends of the divider are squared off.<br>- **round**: A rounded cap is added to each end of the divider. The divider length will increase by the stroke width.<br>- **square**: A square cap is added to each end of the divider. The divider length will increase by the stroke width.|
</tr>
| flex | number | - | No | How to divide available space of the parent component for each child component. This is a shorthand attribute to set the **flex-grow** attribute.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
</tbody>
| flex-grow | number | 0 | No | How much a child component will grow. The value specifies allocation of the available space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
</table>
| flex-shrink | number | 1 | No | How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
| flex-basis | <length> | - | No | Initial length of a child component on the main axis.<br>This attribute takes effect only when the parent component is **\<div>**, **\<list-item>**, or **\<tabs>**.|
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p8667191824717"><aname="p8667191824717"></a><aname="p8667191824717"></a>Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p696123114464"><aname="p696123114464"></a><aname="p696123114464"></a>Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is <strongid="b115244118529"><aname="b115244118529"></a><aname="b115244118529"></a>0</strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p116711013301"><aname="p116711013301"></a><aname="p116711013301"></a>Color of the divider.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p13167101016307"><aname="p13167101016307"></a><aname="p13167101016307"></a>Width of the divider.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p1416912102303"><aname="p1416912102303"></a><aname="p1416912102303"></a>Type of the bounding box generated by the divider. The value can be <strongid="b54008818310"><aname="b54008818310"></a><aname="b54008818310"></a>flex</strong> or <strongid="b12400188103111"><aname="b12400188103111"></a><aname="b12400188103111"></a>none</strong>. The default value is <strongid="b134003817319"><aname="b134003817319"></a><aname="b134003817319"></a>flex</strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p13169101011309"><aname="p13169101011309"></a><aname="p13169101011309"></a>Whether to display the divider. Invisible dividers also occupy space. <strongid="b9290124115011"><aname="b9290124115011"></a><aname="b9290124115011"></a>visible</strong> indicates that the divider is displayed, and <strongid="b571315351925"><aname="b571315351925"></a><aname="b571315351925"></a>hidden</strong> indicates that the divider is not displayed.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p1826374117137"><aname="p1826374117137"></a><aname="p1826374117137"></a>Cap style of the divider. The default value is <strongid="b11938171773415"><aname="b11938171773415"></a><aname="b11938171773415"></a>butt</strong>. Available values are as follows:</p>
<aname="ul169886211615"></a><aname="ul169886211615"></a><ulid="ul169886211615"><li><strongid="b097794943310"><aname="b097794943310"></a><aname="b097794943310"></a>butt</strong>: The ends of the divider are squared off.</li><li><strongid="b579115410335"><aname="b579115410335"></a><aname="b579115410335"></a>round</strong>: A rounded cap is added to each end of the divider.</li><li><strongid="b196977590336"><aname="b196977590336"></a><aname="b196977590336"></a>square</strong>: A square cap is added to each end of the divider.</li></ul>
<divclass="note"id="note46927357715"><aname="note46927357715"></a><aname="note46927357715"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p126922351571"><aname="p126922351571"></a><aname="p126922351571"></a>If the value is <strongid="b11815103163413"><aname="b11815103163413"></a><aname="b11815103163413"></a>round</strong> or <strongid="b31272793415"><aname="b31272793415"></a><aname="b31272793415"></a>square</strong>, the line length increases by the line width.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p368291715615"><aname="p368291715615"></a><aname="p368291715615"></a>How to divide available space of the parent component for each child component. This is a shorthand attribute to set the <strongid="b065931874612"><aname="b065931874612"></a><aname="b065931874612"></a>flex-grow</strong> attribute.</p>
<divclass="note"id="note1368217171461"><aname="note1368217171461"></a><aname="note1368217171461"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p76821817460"><aname="p76821817460"></a><aname="p76821817460"></a>This attribute takes effect only when the parent component is <strongid="b11480192416462"><aname="b11480192416462"></a><aname="b11480192416462"></a><div></strong>, <strongid="b4481624124614"><aname="b4481624124614"></a><aname="b4481624124614"></a><list-item></strong>, or <strongid="b448116241468"><aname="b448116241468"></a><aname="b448116241468"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p13246193876"><aname="p13246193876"></a><aname="p13246193876"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strongid="b13294279468"><aname="b13294279468"></a><aname="b13294279468"></a>0</strong> indicates that the child component does not grow.</p>
<divclass="note"id="note62462313719"><aname="note62462313719"></a><aname="note62462313719"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1324610312715"><aname="p1324610312715"></a><aname="p1324610312715"></a>This attribute takes effect only when the parent component is <strongid="b1949597674"><aname="b1949597674"></a><aname="b1949597674"></a><div></strong>, <strongid="b1228816217"><aname="b1228816217"></a><aname="b1228816217"></a><list-item></strong>, or <strongid="b184212334"><aname="b184212334"></a><aname="b184212334"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p13640114214710"><aname="p13640114214710"></a><aname="p13640114214710"></a>How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value <strongid="b618802815466"><aname="b618802815466"></a><aname="b618802815466"></a>0</strong> indicates that the child component does not shrink.</p>
<divclass="note"id="note364074212713"><aname="note364074212713"></a><aname="note364074212713"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p186406427711"><aname="p186406427711"></a><aname="p186406427711"></a>This attribute takes effect only when the parent component is <strongid="b97929801"><aname="b97929801"></a><aname="b97929801"></a><div></strong>, <strongid="b1772326374"><aname="b1772326374"></a><aname="b1772326374"></a><list-item></strong>, or <strongid="b397489204"><aname="b397489204"></a><aname="b397489204"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.77199693955624%"headers="mcps1.1.6.1.5 "><pid="p192811541574"><aname="p192811541574"></a><aname="p192811541574"></a>Initial length of a child component on the main axis</p>
<divclass="note"id="note162817541279"><aname="note162817541279"></a><aname="note162817541279"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1928115418713"><aname="p1928115418713"></a><aname="p1928115418713"></a>This attribute takes effect only when the parent component is <strongid="b103138373466"><aname="b103138373466"></a><aname="b103138373466"></a><div></strong>, <strongid="b831417371468"><aname="b831417371468"></a><aname="b831417371468"></a><list-item></strong>, or <strongid="b13314153715462"><aname="b13314153715462"></a><aname="b13314153715462"></a><tabs></strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1225732612491"><aname="p1225732612491"></a><aname="p1225732612491"></a>Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about <strongid="b1451343442511"><aname="b1451343442511"></a><aname="b1451343442511"></a>ImageFrame</strong>, see <ahref="#table67453165913">Table 1</a>.</p>
<divclass="note"id="note1925732612497"><aname="note1925732612497"></a><aname="note1925732612497"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p3257226184915"><aname="p3257226184915"></a><aname="p3257226184915"></a>Set this attribute using data binding, for example, <strongid="b3644923191911"><aname="b3644923191911"></a><aname="b3644923191911"></a>images = {{images}}</strong>. Declare the corresponding variable <strongid="b3583125942516"><aname="b3583125942516"></a><aname="b3583125942516"></a>images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]</strong> in the JavaScript.</p>
<pid="p205711340134919"><aname="p205711340134919"></a><aname="p205711340134919"></a>Declare the variable <strongid="b152638162228"><aname="b152638162228"></a><aname="b152638162228"></a>images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]</strong> in the JavaScript. You can set the duration (in milliseconds) of each image frame. <supid="sup1083881410267"><aname="sup1083881410267"></a><aname="sup1083881410267"></a>6+</sup></p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p792704825216"><aname="p792704825216"></a><aname="p792704825216"></a>Whether to enable pre-decoding. The default value is 0, indicating that pre-decoding is disabled. If this parameter is set to 2, the last two images are loaded to the cache in advance to improve the performance when the current page is played.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p22571326114916"><aname="p22571326114916"></a><aname="p22571326114916"></a>Number of times that the frame animation is played. <strongid="b20158158192210"><aname="b20158158192210"></a><aname="b20158158192210"></a>number</strong> indicates a fixed number of playback operations, and <strongid="b1272110157230"><aname="b1272110157230"></a><aname="b1272110157230"></a>infinite</strong> indicates an unlimited number of playback operations.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p925816262499"><aname="p925816262499"></a><aname="p925816262499"></a>Playback sequence. The value <strongid="b67459152416"><aname="b67459152416"></a><aname="b67459152416"></a>false</strong> indicates that images are played from the first one to the last one, and <strongid="b175171216307"><aname="b175171216307"></a><aname="b175171216307"></a>true</strong> indicates that images are played from the last one to the first one.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p7258626174910"><aname="p7258626174910"></a><aname="p7258626174910"></a>Whether the image size is fixed to the widget size. <strongid="b919917296321"><aname="b919917296321"></a><aname="b919917296321"></a>true</strong>: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. <strongid="b89251240113218"><aname="b89251240113218"></a><aname="b89251240113218"></a>false</strong>: The width, height, top, and left attributes of each image must be set separately.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p9258102684910"><aname="p9258102684910"></a><aname="p9258102684910"></a>Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is <strongid="b165541819123316"><aname="b165541819123316"></a><aname="b165541819123316"></a>0</strong>, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p48661353174"><aname="p48661353174"></a><aname="p48661353174"></a>Status of the frame animation after its playback is complete. Available values are as follows:</p>
<aname="ul183656592213"></a><aname="ul183656592213"></a><ulid="ul183656592213"><li><strongid="b4108122744120"><aname="b4108122744120"></a><aname="b4108122744120"></a>none</strong>: Restores to the initial status.</li><li><strongid="b8540732144117"><aname="b8540732144117"></a><aname="b8540732144117"></a>forwards</strong>: Retains the ending status defined for the last key frame.</li></ul>
</td>
</tr>
</tbody>
</table>
**Table 1** ImageFrame description
| Name | Type | Default Value | Mandatory | Description |
| images | Array<ImageFrame> | - | Yes | Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG and JPG. <br>Set this attribute using data binding.<br>- Reference image resources in the HML file: **images = {{images}}**.<br>- Declare the corresponding variables in the JS file:<br>**images: [{src: "/common/heart-rate01.png",duration:"100"}]** Since API version 6,the duration (in milliseconds) per image frame can be set.|
| predecode<sup>6+</sup> | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.|
| iteration | number \| string | infinite | No | Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.|
| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.|
| fixedsize | boolean | true | No | Whether the image size is the same as the component size.<br>**true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid. **false**: The width, height, top, and left attributes of each image must be set separately.|
| duration | string | - | Yes | Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect. |
| fillmode<sup>5+</sup> | string | forwards | No | Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: Restores to the initial status.<br>- **forwards**: Retains the ending status defined for the last key frame.|
<tdclass="cellrowborder"valign="top"width="58.00000000000001%"headers="mcps1.2.6.1.5 "><pid="p87460161592"><aname="p87460161592"></a><aname="p87460161592"></a>Image path.<spanid="ph5230045184011"><aname="ph5230045184011"></a><aname="ph5230045184011"></a> The image format can be SVG, PNG, or JPG.</span></p>
<tdclass="cellrowborder"valign="top"width="58.00000000000001%"headers="mcps1.2.6.1.5 "><pid="p11863511151119"><aname="p11863511151119"></a><aname="p11863511151119"></a>Vertical coordinate of the image relative to the upper left corner of the widget</p>
<tdclass="cellrowborder"valign="top"width="58.00000000000001%"headers="mcps1.2.6.1.5 "><pid="p191151321151111"><aname="p191151321151111"></a><aname="p191151321151111"></a>Horizontal coordinate of the image relative to the upper left corner of the widget</p>
<tdclass="cellrowborder"valign="top"width="58.00000000000001%"headers="mcps1.2.6.1.5 "><pid="p743613347596"><aname="p743613347596"></a><aname="p743613347596"></a>Playback duration of each image frame, in milliseconds.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section1774719169253"></a>
| Name | Type | Default Value | Mandatory | Description |
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p146021079518"><aname="p146021079518"></a><aname="p146021079518"></a>Triggered when the frame animation starts</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p26027715112"><aname="p26027715112"></a><aname="p26027715112"></a>Triggered when the frame animation pauses</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p760216735110"><aname="p760216735110"></a><aname="p760216735110"></a>Triggered when the frame animation stops</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p160267105114"><aname="p160267105114"></a><aname="p160267105114"></a>Triggered when the frame animation resumes</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section1428810433566"></a>
## Events
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="78.21000000000001%"headers="mcps1.1.4.1.3 "><pid="a8ab976e5b8344f9b9849843a5b30128a"><aname="a8ab976e5b8344f9b9849843a5b30128a"></a><aname="a8ab976e5b8344f9b9849843a5b30128a"></a>Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.</p>
<tdclass="cellrowborder"valign="top"width="78.21000000000001%"headers="mcps1.1.4.1.3 "><pid="a4ea339c3428f474696fe3491579ac922"><aname="a4ea339c3428f474696fe3491579ac922"></a><aname="a4ea339c3428f474696fe3491579ac922"></a>Pauses the frame animation playback of an image.</p>
<tdclass="cellrowborder"valign="top"width="78.21000000000001%"headers="mcps1.1.4.1.3 "><pid="p18390136184810"><aname="p18390136184810"></a><aname="p18390136184810"></a>Stops the frame animation playback of an image.</p>
<tdclass="cellrowborder"valign="top"width="78.21000000000001%"headers="mcps1.1.4.1.3 "><pid="p18515847164812"><aname="p18515847164812"></a><aname="p18515847164812"></a>Resumes the frame animation playback of an image.</p>
<tdclass="cellrowborder"valign="top"width="78.21000000000001%"headers="mcps1.1.4.1.3 "><pid="p5357183632618"><aname="p5357183632618"></a><aname="p5357183632618"></a>Obtains the playback state. Available values are as follows:</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p4386542163913"><aname="p4386542163913"></a><aname="p4386542163913"></a><spanid="ph1386114233917"><aname="ph1386114233917"></a><aname="ph1386114233917"></a>Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.</span></p>
<pid="p2020265093811"><aname="p2020265093811"></a><aname="p2020265093811"></a>Base64 string<supid="sup792414482411"><aname="sup792414482411"></a><aname="sup792414482411"></a>6+</sup> is supported. The format is data:image/[png | jpeg | bmp | webp];base64, [base64 data],, where [base64 data] is a Base64 string.</p>
<pid="p158689315419"><aname="p158689315419"></a><aname="p158689315419"></a>The path prefix of <strongid="b48648261193"><aname="b48648261193"></a><aname="b48648261193"></a>dataability://</strong> is supported, which allows access to the image path provided by the Data ability.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p186361237165612"><aname="p186361237165612"></a><aname="p186361237165612"></a>Image scale type. For details about available values, see <ahref="#table175851535113711">Types of the object-fit style</a>. The SVG format is not supported.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p176361037175612"><aname="p176361037175612"></a><aname="p176361037175612"></a>Whether image orientation changes with the text direction. The SVG format is not supported.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p166364377563"><aname="p166364377563"></a><aname="p166364377563"></a>Whether the <strongid="b130129182317"><aname="b130129182317"></a><aname="b130129182317"></a><image></strong> component adapts to the image source size when the width and height are not set. If this attribute is set to <strongid="b93812952317"><aname="b93812952317"></a><aname="b93812952317"></a>true</strong>, the <strongid="b14391910238"><aname="b14391910238"></a><aname="b14391910238"></a>object-fit</strong> attribute does not take effect. SVG images do not support this attribute.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1582420513383"><aname="p1582420513383"></a><aname="p1582420513383"></a>Position of an image in the component.</p>
<pid="p8751515174019"><aname="p8751515174019"></a><aname="p8751515174019"></a>There are two setting types:</p>
<pid="p19751111518408"><aname="p19751111518408"></a><aname="p19751111518408"></a>1. Pixels. For example, <strongid="b556573313565"><aname="b556573313565"></a><aname="b556573313565"></a>15px 15px</strong> indicates the moving position along the x-axis or y-axis.</p>
<pid="p119413158218"><aname="p119413158218"></a><aname="p119413158218"></a>2. Characters. Optional values are as follows:</p>
<aname="ul1815918338215"></a><aname="ul1815918338215"></a><ulid="ul1815918338215"><li><strongid="b3821337205612"><aname="b3821337205612"></a><aname="b3821337205612"></a>left</strong>: The image is displayed on the left of the component.</li><li><strongid="b15293940115610"><aname="b15293940115610"></a><aname="b15293940115610"></a>top</strong> The image is displayed on the top of the component.</li><li><strongid="b7691642165610"><aname="b7691642165610"></a><aname="b7691642165610"></a>right</strong> The image is displayed on the right of the component.</li><li><strongid="b1347220437562"><aname="b1347220437562"></a><aname="b1347220437562"></a>bottom</strong> The image is displayed at the bottom of the component.</li></ul>
<tdclass="cellrowborder"valign="top"width="84.98%"headers="mcps1.2.3.1.2 "><pid="p4585103573718"><aname="p4585103573718"></a><aname="p4585103573718"></a>The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.</p>
<tdclass="cellrowborder"valign="top"width="84.98%"headers="mcps1.2.3.1.2 "><pid="p5585153523711"><aname="p5585153523711"></a><aname="p5585153523711"></a>The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle.</p>
<tdclass="cellrowborder"valign="top"width="84.98%"headers="mcps1.2.3.1.2 "><pid="p958611356373"><aname="p958611356373"></a><aname="p958611356373"></a>The image is resized to fill the display area and its aspect ratio is not retained.</p>
<tdclass="cellrowborder"valign="top"width="84.98%"headers="mcps1.2.3.1.2 "><pid="p2586735113716"><aname="p2586735113716"></a><aname="p2586735113716"></a>The image is displayed in the middle with its aspect ratio and size retained.</p>
<tdclass="cellrowborder"valign="top"width="84.98%"headers="mcps1.2.3.1.2 "><pid="p5586835173713"><aname="p5586835173713"></a><aname="p5586835173713"></a>The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size.</p>
>- The SVG image will not be drawn if the length or width of the **<image\>** component is infinity.
>- If the image length and width are not specified in the SVG description, the SVG fills the **<image\>** component area.
>- If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect:
>1. If the **<image\>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component.
>2. If the **<image\>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component.
## Events<a name="section3892191911214"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1577514934614"><aname="p1577514934614"></a><aname="p1577514934614"></a>Triggered when an image is successfully loaded. The loaded image is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p277510954617"><aname="p277510954617"></a><aname="p277510954617"></a>Triggered when an exception occurs during image loading. In this case, the width and height are <strongid="b3579103124317"><aname="b3579103124317"></a><aname="b3579103124317"></a>0</strong>.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example Code<a name="section321147145519"></a>
```
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.<br>- The Base64 string<sup>6+</sup> is supported in the following format: data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], where **[base64 data]** is a Base64 string.<br>- The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability.<sup>6+</sup>|
| alt | string | - | No | Alternative information for the image, which is displayed during image loading. |
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| object-fit | string | cover | No | Image scale type. This style is not supported for SVG images. For details about available values, see **object-fit**.|
| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. This style is not supported for SVG images. |
| fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when its width and height are not set. If this style is set to **true**, **object-fit** will not take effect. This style is not supported for SVG images.|
| object-position<sup>7+</sup> | string | 0px 0px | No | Position of an image in the component.<br>The options are as follows:<br>1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.<br>2. Characters. Optional values are as follows:<br>- **left**: The image is displayed on the left of the component.<br>- **top** The image is displayed on the top of the component.<br>- **right** The image is displayed on the right of the component.<br>- **bottom** The image is displayed at the bottom of the component.|
| cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.|
| contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. |
| fill | The image is scaled to fill the display area, and its aspect ratio is not retained. |
| none | The image is displayed in the middle with its aspect ratio and size retained. |
| scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. |
> **NOTE**
>
> When using an SVG image, note that:
>
> - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity.
>
> - If the image length and width are not specified in the SVG description, the SVG image fills the **\<image>** component area.
>
> - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect:
>
> 1. If the **\<image>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component.
>
> 2. If the **\<image>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| complete(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.|
| error(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. |
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
The **<label\>** component defines labels for the **<input\>**, **<button\>**, and **<textarea\>** components. When a label is clicked, the click effect of the component associated with the label will be triggered.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<label>** component defines labels for the **\<input>**, **\<button>**, and **\<textarea>** components. When a label is clicked, the click effect of the component associated with the label will be triggered.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p140018514433"><aname="p140018514433"></a><aname="p140018514433"></a>Attribute ID of the target component.</p>
| color | <color> | #e5000000 | No | Font color. |
| font-size | <length> | 30px | No | Font size. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| letter-spacing | <length> | 0px | No | Character spacing (px). |
| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| text-align | string | start<br>| No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
| line-height | <length> | 0px | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. |
| text-overflow | string | clip | No | Takes effect when the maximum number of lines is specified. Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| max-lines | number | - | No | Maximum number of lines in the text. |
| min-font-size | <length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| max-font-size | <length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| font-size-step | <length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example values: **12px,14px,16px**|
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p566517271977"><aname="p566517271977"></a><aname="p566517271977"></a>Whether the text size changes with the system's font size settings.</p>
<divclass="note"id="note166651727377"><aname="note166651727377"></a><aname="note166651727377"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p96651327075"><aname="p96651327075"></a><aname="p96651327075"></a>For details about how to make the configuration take effect dynamically, see the <strongid="b140963492841533"><aname="b140963492841533"></a><aname="b140963492841533"></a>config-changes</strong> attribute in the <strongid="b40058943041533"><aname="b40058943041533"></a><aname="b40058943041533"></a>config.json</strong> file.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p156661927476"><aname="p156661927476"></a><aname="p156661927476"></a>Font style. Available values are as follows:</p>
<aname="ul16666271173"></a><aname="ul16666271173"></a><ulid="ul16666271173"><li><strongid="b83400171541533"><aname="b83400171541533"></a><aname="b83400171541533"></a>normal</strong>: standard font style</li><li><strongid="b38004254941533"><aname="b38004254941533"></a><aname="b38004254941533"></a>italic</strong>: italic font style</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1966612271713"><aname="p1966612271713"></a><aname="p1966612271713"></a>Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.</p>
<divclass="note"id="note36663271078"><aname="note36663271078"></a><aname="note36663271078"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p20666132718711"><aname="p20666132718711"></a><aname="p20666132718711"></a>The value must be an integer multiple of 100.</p>
</div></div>
<pid="p5666182717710"><aname="p5666182717710"></a><aname="p5666182717710"></a>The value of the string type can be <strongid="b132902811341533"><aname="b132902811341533"></a><aname="b132902811341533"></a>lighter</strong>, <strongid="b70405315341533"><aname="b70405315341533"></a><aname="b70405315341533"></a>normal</strong>, <strongid="b21613477941533"><aname="b21613477941533"></a><aname="b21613477941533"></a>bold</strong>, or <strongid="b161719670941533"><aname="b161719670941533"></a><aname="b161719670941533"></a>bolder</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p166715271479"><aname="p166715271479"></a><aname="p166715271479"></a>Text decoration. Available values are as follows:</p>
<aname="ul2667127575"></a><aname="ul2667127575"></a><ulid="ul2667127575"><li><strongid="b81406780441533"><aname="b81406780441533"></a><aname="b81406780441533"></a>underline</strong>: An underline is used.</li><li><strongid="b83360459041533"><aname="b83360459041533"></a><aname="b83360459041533"></a>line-through</strong>: A strikethrough is used.</li><li><strongid="b155693540941533"><aname="b155693540941533"></a><aname="b155693540941533"></a>none</strong>: The standard text is used.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p106677271479"><aname="p106677271479"></a><aname="p106677271479"></a>Text alignment mode. Available values are as follows:</p>
<aname="ul1466712710712"></a><aname="ul1466712710712"></a><ulid="ul1466712710712"><li><strongid="b68270085441533"><aname="b68270085441533"></a><aname="b68270085441533"></a>left</strong>: The text is left-aligned.</li><li><strongid="b159806762441533"><aname="b159806762441533"></a><aname="b159806762441533"></a>center</strong>: The text is center-aligned.</li><li><strongid="b169036087341533"><aname="b169036087341533"></a><aname="b169036087341533"></a>right</strong>: The text is right-aligned.</li><li><strongid="b195938376541533"><aname="b195938376541533"></a><aname="b195938376541533"></a>start</strong>: The text is aligned with the direction in which the text is written.</li><li><strongid="b73543552641533"><aname="b73543552641533"></a><aname="b73543552641533"></a>end</strong>: The text is aligned with the opposite direction in which the text is written. </li></ul>
<divclass="note"id="note3668172719712"><aname="note3668172719712"></a><aname="note3668172719712"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p366818278713"><aname="p366818278713"></a><aname="p366818278713"></a>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container. </p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p126682027579"><aname="p126682027579"></a><aname="p126682027579"></a>Text line height. When this parameter is set to <strongid="b90821727741533"><aname="b90821727741533"></a><aname="b90821727741533"></a>0px</strong>, the text line height is not limited and the font size is adaptive.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p116681327179"><aname="p116681327179"></a><aname="p116681327179"></a><spanid="p5a4b24dbf2784092965d788cce471596"><aname="p5a4b24dbf2784092965d788cce471596"></a><aname="p5a4b24dbf2784092965d788cce471596"></a>Takes effect when the maximum number of lines is specified. </span>Available values are as follows:</p>
<aname="ul1668162716714"></a><aname="ul1668162716714"></a><ulid="ul1668162716714"><li><strongid="b8200292041533"><aname="b8200292041533"></a><aname="b8200292041533"></a>clip</strong>: The text is clipped and displayed based on the size of the parent container.</li><li><strongid="b159529937541533"><aname="b159529937541533"></a><aname="b159529937541533"></a>ellipsis</strong>: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with <strongid="b212203499741533"><aname="b212203499741533"></a><aname="b212203499741533"></a>max-lines</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p56695278715"><aname="p56695278715"></a><aname="p56695278715"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text. </p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p567016271173"><aname="p567016271173"></a><aname="p567016271173"></a>Maximum number of lines in the text.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p467152714715"><aname="p467152714715"></a><aname="p467152714715"></a>Minimum font size in the text. This style must be used together with <strongid="b107353746741533"><aname="b107353746741533"></a><aname="b107353746741533"></a>max-font-size</strong>. The font size can be changed dynamically. After the maximum and minimum font sizes are set, <strongid="b116057394841533"><aname="b116057394841533"></a><aname="b116057394841533"></a>font-size</strong> does not take effect.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p56711927074"><aname="p56711927074"></a><aname="p56711927074"></a>Maximum font size in the text. This style must be used together with <strongid="b141713431641533"><aname="b141713431641533"></a><aname="b141713431641533"></a>min-font-size</strong>. The font size can be changed dynamically. After the maximum and minimum font sizes are set, <strongid="b130346143141533"><aname="b130346143141533"></a><aname="b130346143141533"></a>font-size</strong> does not take effect.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1767210271875"><aname="p1767210271875"></a><aname="p1767210271875"></a>Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1167292716713"><aname="p1167292716713"></a><aname="p1167292716713"></a>Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, <strongid="b191381972441533"><aname="b191381972441533"></a><aname="b191381972441533"></a>text-overflow</strong> is used to truncate the text. If this parameter is set, <strongid="b198803051641533"><aname="b198803051641533"></a><aname="b198803051641533"></a>font-size</strong>, <strongid="b39764528141533"><aname="b39764528141533"></a><aname="b39764528141533"></a>max-font-size</strong>, <strongid="b87795574141533"><aname="b87795574141533"></a><aname="b87795574141533"></a>min-font-size</strong>, and <strongid="b138745821741533"><aname="b138745821741533"></a><aname="b138745821741533"></a>font-size-step</strong> do not take effect.</p>
| target | string | - | No | Target element to which the menu is attached. When the target element is clicked, the menu is automatically displayed. The menu is preferentially displayed in the lower right corner of the target element. If the visible space on the right is insufficient, the menu is moved leftward. If the visible space in the lower part is insufficient, the menu is moved upward.|
| type | string | click | No | Mode in which the target element triggers the pop-up menu. Available values are as follows:<br>- **click**: The pop-up menu is triggered by clicking the target element.<br>- **longpress**: The pop-up menu is triggered by long pressing the target element.|
| title | string | - | No | Title of the menu. |
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
> **NOTE**
>
> The **focusable** and **disabled** attributes are not supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p168053400214"><aname="p168053400214"></a><aname="p168053400214"></a>Target element selector. After the target element selector is used, a menu is automatically displayed when you click the target element. The pop-up menu is preferentially displayed in the lower right corner of the target element. When the visible space on the right is insufficient, the menu is moved leftward. When the visible space in the lower part is insufficient, the menu is moved upward.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p11805124032118"><aname="p11805124032118"></a><aname="p11805124032118"></a>Mode in which the target element triggers the pop-up window. Available values are as follows:</p>
<aname="ul168051640152119"></a><aname="ul168051640152119"></a><ulid="ul168051640152119"><li><strongid="b363812611517"><aname="b363812611517"></a><aname="b363812611517"></a>click</strong>: Click the element to trigger the pop-up window.</li><li><strongid="b193081910125114"><aname="b193081910125114"></a><aname="b193081910125114"></a>longpress</strong>: Press and hold the element to trigger the pop-up window.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p780544014218"><aname="p780544014218"></a><aname="p780544014218"></a>Title of the pop-up window.</p>
| text-color | <color> | - | No | Font color of the menu. |
| font-size | <length> | 30px | No | Font size of the menu. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| letter-spacing | <length> | 0 | No | Character spacing of the menu. |
| font-style | string | normal | No | Font style of the menu. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component. |
| font-weight | number \| string | normal | No | Font weight of the menu. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component. |
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p1283152651317"><aname="p1283152651317"></a><aname="p1283152651317"></a>Font color of the menu.</p>
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p138462651315"><aname="p138462651315"></a><aname="p138462651315"></a>Font size of the menu.</p>
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p6849264138"><aname="p6849264138"></a><aname="p6849264138"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note984226191312"><aname="note984226191312"></a><aname="note984226191312"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p58442621310"><aname="p58442621310"></a><aname="p58442621310"></a>If the <strongid="b3847171311256"><aname="b3847171311256"></a><aname="b3847171311256"></a>config-changes</strong> tag of <strongid="b38541913152512"><aname="b38541913152512"></a><aname="b38541913152512"></a>fontSize</strong> is configured for abilities in the <strongid="b15854713182513"><aname="b15854713182513"></a><aname="b15854713182513"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p1585102611312"><aname="p1585102611312"></a><aname="p1585102611312"></a>Character spacing of the menu.</p>
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p1985126101319"><aname="p1985126101319"></a><aname="p1985126101319"></a>Font style of the menu. For details, see <ahref="js-components-basic-text.md#section5775351116">font-style</a> of the <strongid="b15474121215508"><aname="b15474121215508"></a><aname="b15474121215508"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p138542681312"><aname="p138542681312"></a><aname="p138542681312"></a>Font weight of the menu. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b254187164920"><aname="b254187164920"></a><aname="b254187164920"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="36.72632736726327%"headers="mcps1.1.6.1.5 "><pid="p178632614139"><aname="p178632614139"></a><aname="p178632614139"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text.</p>
| selected | { value:value } | Triggered when a value in the menu is selected. The return value is the **value** attribute of the **\<option>** component.|
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p963205112214"><aname="p963205112214"></a><aname="p963205112214"></a>Triggered when a value in the menu is selected. The returned value is the <strongid="b8348518817"><aname="b8348518817"></a><aname="b8348518817"></a>value</strong> attribute of the <strongid="b46757201362"><aname="b46757201362"></a><aname="b46757201362"></a><option></strong> component.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p6639512225"><aname="p6639512225"></a><aname="p6639512225"></a>Triggered when an operation is canceled by the user</p>
| show | { x:x, y:y } | Displays the menu. **x** and **y** specify the position of the displayed menu. **x** indicates the x coordinate from the left edge of the visible area, and does not include any scrolling offset. **y** indicates the y coordinate from the upper edge of the visible area, and does not include any scrolling offset or a status bar. The menu is preferentially displayed in the lower right corner of the target element. If the visible space on the right is insufficient, the menu is moved leftward. If the visible space in the lower part is insufficient, the menu is moved upward.|
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p11528112816422"><aname="p11528112816422"></a><aname="p11528112816422"></a>Displays the menu. <emid="i41846563220"><aname="i41846563220"></a><aname="i41846563220"></a>x</em> and <emid="i9806858529"><aname="i9806858529"></a><aname="i9806858529"></a>y</em> specify the position of the displayed menu. <emid="i1683071319418"><aname="i1683071319418"></a><aname="i1683071319418"></a>x</em> indicates the X-axis coordinate from the left edge of the visible area, and does not include any scrolling offset. <emid="i1864241546"><aname="i1864241546"></a><aname="i1864241546"></a>y</em> indicates the Y-axis coordinate from the upper edge of the visible area, and does not include any scrolling offset or a status bar. The menu is preferentially displayed in the lower right corner. When the visible space on the right is insufficient, the menu is moved leftward. When the visible space in the lower part is insufficient, the menu is moved upward.</p>
When used as a child component of **<[select](js-components-basic-select.md)\>**, the **<option\>** component is used to display items in the drop-down list.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
When used as a child component of **<[menu](js-components-basic-menu.md)\>**, the **<option\>** component is used to display items in the displayed menu.
When used as a child component of **[\<select>](../arkui-js/js-components-basic-select.md)**, the **\<option>** component is used to display items in the drop-down list.
When used as a child component of **[\<menu>](../arkui-js/js-components-basic-menu.md)**, the **\<option>** component is used to display items in the displayed menu.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="a17bb7bb8f011471f9527ca6bfb6ab15d"><aname="a17bb7bb8f011471f9527ca6bfb6ab15d"></a><aname="a17bb7bb8f011471f9527ca6bfb6ab15d"></a>Whether an option is the default option in the drop-down list. This attribute is available only when the parent component is <strongid="b114851051123511"><aname="b114851051123511"></a><aname="b114851051123511"></a><select></strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1145911181476"><aname="p1145911181476"></a><aname="p1145911181476"></a>Value of an option, which is used as the return value of the selected event of the <strongid="b984993812421"><aname="b984993812421"></a><aname="b984993812421"></a><select></strong>or <strongid="b136061622193920"><aname="b136061622193920"></a><aname="b136061622193920"></a><menu></strong> parent component.</p>
<divclass="note"id="note174591818114715"><aname="note174591818114715"></a><aname="note174591818114715"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p9459218134716"><aname="p9459218134716"></a><aname="p9459218134716"></a>The option value to be displayed on the UI must be put between the start and end tags, for example, <strongid="b1333453312333"><aname="b1333453312333"></a><aname="b1333453312333"></a><option value="10">October</option></strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p164596188472"><aname="p164596188472"></a><aname="p164596188472"></a>Icon resource path. This icon is displayed before the option text. The supported icon formats are JPG, PNG, and SVG.</p>
<tdclass="cellrowborder"valign="top"width="30.693069306930692%"headers="mcps1.1.6.1.5 "><pid="a64508ed81c5b4b3ca9def0fefae31f36"><aname="a64508ed81c5b4b3ca9def0fefae31f36"></a><aname="a64508ed81c5b4b3ca9def0fefae31f36"></a>Text color of the options.</p>
<tdclass="cellrowborder"valign="top"width="30.693069306930692%"headers="mcps1.1.6.1.5 "><pid="a0d0c0048474b4540bc4bc2dd11775ac6"><aname="a0d0c0048474b4540bc4bc2dd11775ac6"></a><aname="a0d0c0048474b4540bc4bc2dd11775ac6"></a>Font size of the options.</p>
<tdclass="cellrowborder"valign="top"width="30.693069306930692%"headers="mcps1.1.6.1.5 "><pid="p1023513229570"><aname="p1023513229570"></a><aname="p1023513229570"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note1467145631615"><aname="note1467145631615"></a><aname="note1467145631615"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p126785616164"><aname="p126785616164"></a><aname="p126785616164"></a>If the <strongid="b524714361237"><aname="b524714361237"></a><aname="b524714361237"></a>config-changes</strong> tag of <strongid="b19256136236"><aname="b19256136236"></a><aname="b19256136236"></a>fontSize</strong> is configured for abilities in the <strongid="b32576360318"><aname="b32576360318"></a><aname="b32576360318"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="30.693069306930692%"headers="mcps1.1.6.1.5 "><pid="aaba88a62d1484a5a884cfc516e68f949"><aname="aaba88a62d1484a5a884cfc516e68f949"></a><aname="aaba88a62d1484a5a884cfc516e68f949"></a>Font weight. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b9496182195214"><aname="b9496182195214"></a><aname="b9496182195214"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="30.693069306930692%"headers="mcps1.1.6.1.5 "><pid="aad7a14f50e664992800a990ae4261aa0"><aname="aad7a14f50e664992800a990ae4261aa0"></a><aname="aad7a14f50e664992800a990ae4261aa0"></a>Text decoration. For details, see <ahref="js-components-basic-text.md#section5775351116">text-decoration</a> of the <strongid="b1935201619527"><aname="b1935201619527"></a><aname="b1935201619527"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="30.693069306930692%"headers="mcps1.1.6.1.5 "><pid="a0b6365c7b9874a8796099aa02f73cde2"><aname="a0b6365c7b9874a8796099aa02f73cde2"></a><aname="a0b6365c7b9874a8796099aa02f73cde2"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1013173520328"></a>
None
## Child Components
## Methods<a name="section45101363326"></a>
Not supported
None
## Example Code<a name="section7566164416325"></a>
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| selected | boolean | - | No | Whether the option is the default option in the drop-down list. This attribute is available only when the parent component is **\<select>**. |
| value | string | - | Yes | Value of the option, which is used as the return value of the **selected** event of the **\<select>** or **\<menu>** parent component.<br>The value to be displayed on the UI must be put between the start and end tags, for example,<br>**\<option value="10">October\</option>**. |
| icon | string | - | No | Icon resource path. This icon is displayed before the option text. The supported icon formats are JPG, PNG, and SVG. |
## Styles
The following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#e6000000 | No | Font color of the option. |
| font-size | <length> | 16px | No | Font size of the option. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-weight | number \| string | normal | No | Font weight of the option. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component. |
| text-decoration | string | none | No | Text modification of an option. For details, see **text-decoration** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component. |
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events
Not supported
## Methods
Not supported
For details, see the [menu example code](js-components-basic-menu.md#section54636714136).
## Example
For details, see [Example in menu](../arkui-js/js-components-basic-menu.md#example).
<tdclass="cellrowborder"valign="top"width="58.2058205820582%"headers="mcps1.1.6.1.5 "><pid="p1975944244011"><aname="p1975944244011"></a><aname="p1975944244011"></a>Text content of the operational piece.</p>
<tdclass="cellrowborder"valign="top"width="58.2058205820582%"headers="mcps1.1.6.1.5 "><pid="p19402201416398"><aname="p19402201416398"></a><aname="p19402201416398"></a>Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.</p>
<tdclass="cellrowborder"valign="top"width="58.2058205820582%"headers="mcps1.1.6.1.5 "><pid="p230211914342"><aname="p230211914342"></a><aname="p230211914342"></a>URL of the delete icon for the operational piece. The value can be a local path.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section17756476592"></a>
Styles in [Universal Styles](js-components-common-styles.md) are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1891114933015"><aname="p1891114933015"></a><aname="p1891114933015"></a>Triggered when users click the delete icon of the operational piece. You can delete this component by using the <strongid="b1276472010487"><aname="b1276472010487"></a><aname="b1276472010487"></a>if</strong> directive.</p>
</td>
</tr>
</tbody>
</table>
## Method<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section118886119320"></a>
```
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<piece>** component provides an entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
## Child Components
Not supported
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| content | string | Yes | Text content of the operational piece. |
| closable | boolean | No | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.<br>Default value: **false**|
| icon | string | No | URL of the delete icon for the operational piece. The value can be a local path. |
## Styles
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
> **NOTE**
>
> By default, text and images are placed in the middle of the **\<piece>** component.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| type | string | horizontal | No | Type of the progress bar, which cannot be changed dynamically. Available values are as follows:<br>- **horizontal**: linear progress bar.<br>- **circular**: loading progress bar.<br>- **ring**: ring progress bar.<br>- **scale-ring**: ring progress bar with a scale.<br>- **arc**: arc progress bar.<br>- **eclipse**<sup>5+</sup>: eclipse progress bar.|
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1510182522"><aname="p1510182522"></a><aname="p1510182522"></a>Type of the progress bar, which cannot be changed dynamically. Available values are as follows:</p>
<aname="ul11541820527"></a><aname="ul11541820527"></a><ulid="ul11541820527"><li><strongid="b18309101417563"><aname="b18309101417563"></a><aname="b18309101417563"></a>horizontal</strong>: linear progress bar</li><li><strongid="b196571440135618"><aname="b196571440135618"></a><aname="b196571440135618"></a>circular</strong>: loading progress bar</li><li><strongid="b16931854165616"><aname="b16931854165616"></a><aname="b16931854165616"></a>ring</strong>: ring progress bar</li><li><strongid="b146913331714"><aname="b146913331714"></a><aname="b146913331714"></a>scale-ring</strong>: ring progress bar with a scale</li><li><strongid="b12958985218"><aname="b12958985218"></a><aname="b12958985218"></a>arc</strong>: arc progress bar</li><li><strongid="b3326182912218"><aname="b3326182912218"></a><aname="b3326182912218"></a>eclipse</strong><supid="sup790255053720"><aname="sup790255053720"></a><aname="sup790255053720"></a>5+</sup>: eclipse progress bar</li></ul>
</td>
</tr>
</tbody>
</table>
Different types of progress bars support different attributes.
Different types of progress bars support different attributes.
- When the type is **horizontal**, **ring**, or **scale-ring**, the following attributes are supported.
- When the type is **horizontal**, **ring**, or **scale-ring**, the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
<td class="cellrowborder" valign="top" width="45%" headers="mcps1.1.6.1.5 "><p id="p5743704359"><a name="p5743704359"></a><a name="p5743704359"></a>Current progress. The value ranges from 0 to 100.</p>
<td class="cellrowborder" valign="top" width="45%" headers="mcps1.1.6.1.5 "><p id="p1974310173512"><a name="p1974310173512"></a><a name="p1974310173512"></a>Secondary progress. The value ranges from 0 to 100.</p>
</td>
</tr>
</tbody>
</table>
- When the type is **ring** or **scale-ring**, the following attributes are supported.
<td class="cellrowborder" valign="top" width="45%" headers="mcps1.1.6.1.5 "><p id="p12312175919356"><a name="p12312175919356"></a><a name="p12312175919356"></a>Whether the ring progress bar uses clockwise.</p>
</td>
</tr>
</tbody>
</table>
- When the type is **arc** or **eclipse**<sup>5+</sup>, the following attribute is supported.
<td class="cellrowborder" valign="top" width="45%" headers="mcps1.1.6.1.5 "><p id="p14732318113613"><a name="p14732318113613"></a><a name="p14732318113613"></a>Current progress. The value ranges from 0 to 100.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
Horizontal progress bar, of which **type** is **horizontal**
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="a5e442a4aedc84f0c95aa140a6ec8713c"><aname="a5e442a4aedc84f0c95aa140a6ec8713c"></a><aname="a5e442a4aedc84f0c95aa140a6ec8713c"></a>Color of the progress bar</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="acd7ffaee82cb4bfcb75c4b4c87dc512b"><aname="acd7ffaee82cb4bfcb75c4b4c87dc512b"></a><aname="acd7ffaee82cb4bfcb75c4b4c87dc512b"></a>Width of the progress bar</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p106571314275"><aname="p106571314275"></a><aname="p106571314275"></a>Background color of the progress bar</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p2174122512271"><aname="p2174122512271"></a><aname="p2174122512271"></a>Color of the secondary progress bar</p>
</td>
</tr>
</tbody>
</table>
Circular progress bar \(**type** is **circular**\)
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p1955818992820"><aname="p1955818992820"></a><aname="p1955818992820"></a>Color of the dot on the loading progress bar</p>
</td>
</tr>
</tbody>
</table>
Ring or scale-ring progress bar \(**type** is **ring** or **scale-ring**\)
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p151721122192918"><aname="p151721122192918"></a><aname="p151721122192918"></a>Color of the ring progress bar. The <strongid="b724283216309"><aname="b724283216309"></a><aname="b724283216309"></a>ring</strong> type supports the linear gradient color.</p>
<divclass="note"id="note11079430164"><aname="note11079430164"></a><aname="note11079430164"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1010744361610"><aname="p1010744361610"></a><aname="p1010744361610"></a>The linear gradient color supports only two color attribute formats, for example, <strongid="b1625485113015"><aname="b1625485113015"></a><aname="b1625485113015"></a>color = linear-gradient(#ff0000, #00ff00)</strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p1585014540215"><aname="p1585014540215"></a><aname="p1585014540215"></a>Background color of the ring progress bar.</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p16850115482113"><aname="p16850115482113"></a><aname="p16850115482113"></a>Color of the secondary ring progress bar.</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p113951633172217"><aname="p113951633172217"></a><aname="p113951633172217"></a>Width of the ring progress bar.</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p5875211113612"><aname="p5875211113612"></a><aname="p5875211113612"></a>Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is <strongid="b1286494621612"><aname="b1286494621612"></a><aname="b1286494621612"></a>scale-ring</strong>.</p>
<tdclass="cellrowborder"valign="top"width="38.613861386138616%"headers="mcps1.1.6.1.5 "><pid="p1687671117364"><aname="p1687671117364"></a><aname="p1687671117364"></a>Number of scales of the ring progress bar with a scale. This style takes effect only when the type is <strongid="b155185320162"><aname="b155185320162"></a><aname="b155185320162"></a>scale-ring</strong>.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p2322051193614"><aname="p2322051193614"></a><aname="p2322051193614"></a>Color of the arc progress bar.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p6233511381"><aname="p6233511381"></a><aname="p6233511381"></a>Background color of the arc progress bar.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p188730421175"><aname="p188730421175"></a><aname="p188730421175"></a>Width of the arc progress bar.</p>
<divclass="note"id="note1436241013318"><aname="note1436241013318"></a><aname="note1436241013318"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p43626101533"><aname="p43626101533"></a><aname="p43626101533"></a>The wider the progress bar is, the closer the progress bar is to the center of the circle. The progress bar is always within the radius.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p112012582717"><aname="p112012582717"></a><aname="p112012582717"></a>Start angle of the arc progress bar, which starts from zero o'clock clockwise. The value ranges from 0 to 360 degrees.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p745211583716"><aname="p745211583716"></a><aname="p745211583716"></a>Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.</p>
<tdclass="cellrowborder"valign="top"width="13.851385138513853%"headers="mcps1.1.6.1.3 "><pid="p548911574817"><aname="p548911574817"></a><aname="p548911574817"></a>Half of the width of the arc progress bar</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p154894570813"><aname="p154894570813"></a><aname="p154894570813"></a>Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with <strongid="b10862143410196"><aname="b10862143410196"></a><aname="b10862143410196"></a>center-y</strong> and <strongid="b3868934121914"><aname="b3868934121914"></a><aname="b3868934121914"></a>radius</strong>.</p>
<tdclass="cellrowborder"valign="top"width="13.851385138513853%"headers="mcps1.1.6.1.3 "><pid="p4982557182"><aname="p4982557182"></a><aname="p4982557182"></a>Half of the height of the arc progress bar</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p09827579819"><aname="p09827579819"></a><aname="p09827579819"></a>Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with <strongid="b13704558131918"><aname="b13704558131918"></a><aname="b13704558131918"></a>center-x</strong> and <strongid="b1070995818199"><aname="b1070995818199"></a><aname="b1070995818199"></a>radius</strong>.</p>
<tdclass="cellrowborder"valign="top"width="13.851385138513853%"headers="mcps1.1.6.1.3 "><pid="p127321959086"><aname="p127321959086"></a><aname="p127321959086"></a>Half of the minimum width and height of the arc progress bar</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p2732759982"><aname="p2732759982"></a><aname="p2732759982"></a>Radius of the arc progress bar. This style must be used together with <strongid="b14309114232012"><aname="b14309114232012"></a><aname="b14309114232012"></a>center-x</strong> and <strongid="b14474174412014"><aname="b14474174412014"></a><aname="b14474174412014"></a>center-y</strong>.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p1019225811258"><aname="p1019225811258"></a><aname="p1019225811258"></a>Color of the eclipse progress bar.</p>
<tdclass="cellrowborder"valign="top"width="42.004200420042004%"headers="mcps1.1.6.1.5 "><pid="p1319395813257"><aname="p1319395813257"></a><aname="p1319395813257"></a>Background color of the eclipse progress bar.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section16580153964314"></a>
Events in [Universal Events](js-components-common-events.md) are supported.
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section493033510346"></a>
```
- When the type is **ring** or **scale-ring**, the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color>\|<linear-gradient> | - | No | Color of the ring progress bar. The **ring** type supports the linear gradient color.<br>The linear gradient color supports only two color attribute formats, for example, **color = linear-gradient(\#ff0000, \#00ff00)**.|
| background-color | <color> | - | No | Background color of the ring progress bar. |
| secondary-color | <color> | - | No | Color of the secondary ring progress bar. |
| stroke-width | <length> | 10px | No | Width of the ring progress bar. |
| scale-width | <length> | - | No | Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is **scale-ring**. |
| scale-number | number | 120 | No | Number of scales of the ring progress bar with a scale. This style takes effect only when the type is **scale-ring**. |
Arc progress bar, of which **type** is **arc**
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | - | No | Color of the arc progress bar. |
| background-color | <color> | - | No | Background color of the arc progress bar. |
| stroke-width | <length> | 4px | No | Width of the arc progress bar, which is always within the radius area.<br>The wider the progress bar is, the closer the progress bar is to the center of the circle. The progress bar is always within the radius.|
| start-angle | <deg> | 240 | No | Start angle of the arc progress bar, which starts from zero o'clock clockwise. The value ranges from 0 to 360 degrees. |
| total-angle | <deg> | 240 | No | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise. |
| center-x | <length> | Half of the width of the arc progress bar | No | Center of the arc progress bar (with the upper left corner of the component as the coordinate origin). This style must be used together with **center-y** and **radius**.|
| center-y | <length> | Half of the height of the arc progress bar | No | Center of the arc progress bar (with the upper left corner of the component as the coordinate origin). This style must be used together with **center-x** and **radius**.|
| radius | <length> | Half of the minimum width and height of the arc progress bar| No | Radius of the arc progress bar. This style must be used together with **center-x** and **center-y**. |
Eclipse progress bar, of which **type** is **eclipse**<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p173811138611"><aname="p173811138611"></a><aname="p173811138611"></a>Maximum number of rating stars.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p27381813364"><aname="p27381813364"></a><aname="p27381813364"></a>Step to increment the rating value.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p87391131166"><aname="p87391131166"></a><aname="p87391131166"></a>Whether to make the rating icons as an indicator (not-editable by users).</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p79091050184910"><aname="p79091050184910"></a><aname="p79091050184910"></a>Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1091015502499"><aname="p1091015502499"></a><aname="p1091015502499"></a>Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p391095015494"><aname="p391095015494"></a><aname="p391095015494"></a>Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1591035014911"><aname="p1591035014911"></a><aname="p1591035014911"></a>Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1491065074910"><aname="p1491065074910"></a><aname="p1491065074910"></a>Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p391011508492"><aname="p391011508492"></a><aname="p391011508492"></a>Whether the image source is automatically flipped in the RTL text direction.</p>
>You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly.
## Events<a name="section124498406719"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p255820281687"><aname="p255820281687"></a><aname="p255820281687"></a>{ rating: number }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p10558228886"><aname="p10558228886"></a><aname="p10558228886"></a>Triggered when the rating value changes.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section1715414253487"></a>
```
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| star-background | string | - | No| Background image when a rating star is unselected. Only PNG and JPG images in a local path are supported.|
| star-foreground | string | - | No| Foreground image when a rating star is selected. Only PNG and JPG images in a local path are supported.|
| star-secondary | string | - | No| Secondary background image when a rating star is partially selected. This image will cover the background image and can only be a PNG or JPG image from a local path.|
| width | <length>\|<percentage> | 120px<br>60 px (cannot be edited)| No| Image width. The default value is the width of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.|
| height | <length>\|<percentage> | 24px<br>12px (cannot be edited)| No| Image height. The default value is the height of the default image for five-star ratings. If you do not set the maximum rating value and background images of the rating stars, the default value will be used.|
| rtl-flip | boolean | true | No| Whether the image source is automatically flipped in the RTL text direction.|
> **NOTE**
>
> You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the rating star is gray, indicating that the image is set incorrectly.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| change | { rating: number } | Triggered when the rating value changes.|
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1269067752"><aname="p1269067752"></a><aname="p1269067752"></a>Triggered when the loading starts.</p>
> - When a page containing **\<richtext>** is returned, the page's transition effect does not apply to the area where the rich text is displayed.
</td>
>
</tr>
> - Make sure the rich text does not go beyond the height of the screen. Otherwise, the excess content will not be displayed.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p13878335145119"><aname="p13878335145119"></a><aname="p13878335145119"></a>Triggered when the loading is complete.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p082364616188"><aname="p082364616188"></a><aname="p082364616188"></a>Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p208241446121810"><aname="p208241446121810"></a><aname="p208241446121810"></a>Text in the search box.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p4356131312222"><aname="p4356131312222"></a><aname="p4356131312222"></a>Text on the search button at the end of the search box.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p207221573417"><aname="p207221573417"></a><aname="p207221573417"></a>Menu options displayed after users click the <strongid="b21781315182119"><aname="b21781315182119"></a><aname="b21781315182119"></a>More</strong> button in the pop menu.</p>
</td>
</tr>
</tbody>
</table>
**Table 1** MenuOption<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p73631954762"><aname="p73631954762"></a><aname="p73631954762"></a>Path of the icon for a menu option.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p1036311548616"><aname="p1036311548616"></a><aname="p1036311548616"></a>Text content in a menu option.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
| Name | Type | Description |
| ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option.|
| content | string | Text content of a menu option.|
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p17588923718"><aname="p17588923718"></a><aname="p17588923718"></a>Font color of the search box.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p175891621973"><aname="p175891621973"></a><aname="p175891621973"></a>Font size of the search box.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p55894219719"><aname="p55894219719"></a><aname="p55894219719"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note13589162372"><aname="note13589162372"></a><aname="note13589162372"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p12589021175"><aname="p12589021175"></a><aname="p12589021175"></a>If the <strongid="b740874017101"><aname="b740874017101"></a><aname="b740874017101"></a>config-changes</strong> tag of <strongid="b12415940161018"><aname="b12415940161018"></a><aname="b12415940161018"></a>fontSize</strong> is configured for abilities in the <strongid="b1415740131016"><aname="b1415740131016"></a><aname="b1415740131016"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p25896215710"><aname="p25896215710"></a><aname="p25896215710"></a>Color of the hint text.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p2058912778"><aname="p2058912778"></a><aname="p2058912778"></a>Font weight. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b126119204152"><aname="b126119204152"></a><aname="b126119204152"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p17590721579"><aname="p17590721579"></a><aname="p17590721579"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text. </p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p1935320474379"><aname="p1935320474379"></a><aname="p1935320474379"></a>Color of the input cursor.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section17878123517511"></a>
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#e6000000 | No | Font color of the search box. |
| font-size | <length> | 16px | No | Font size of the search box. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | <color> | \#99000000<br>| No | Color of the hint text. |
| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| caret-color<sup>6+</sup> | <color> | - | No | Color of the caret. |
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p19878133518518"><aname="p19878133518518"></a><aname="p19878133518518"></a>Triggered when the content entered in the text box changes.</p>
<divclass="note"id="note887893525112"><aname="note887893525112"></a><aname="note887893525112"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p19878435115119"><aname="p19878435115119"></a><aname="p19878435115119"></a>If you change the <strongid="b1292019401570"><aname="b1292019401570"></a><aname="b1292019401570"></a>value</strong> attribute directly, this event will not be triggered.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p13878335145119"><aname="p13878335145119"></a><aname="p13878335145119"></a>Triggered when users click the search icon or the search button<supid="sup790816581014"><aname="sup790816581014"></a><aname="sup790816581014"></a>5+</sup>, or tap the search button on a soft keyboard.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p08797356513"><aname="p08797356513"></a><aname="p08797356513"></a>Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p15879183520514"><aname="p15879183520514"></a><aname="p15879183520514"></a>Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p38791935135119"><aname="p38791935135119"></a><aname="p38791935135119"></a>Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1087917353518"><aname="p1087917353518"></a><aname="p1087917353518"></a>Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the <strongid="b192388148166"><aname="b192388148166"></a><aname="b192388148166"></a>menuoptions</strong> attribute is set. The option index and selected text content are returned.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
## Events
Methods in [Universal Methods](js-components-common-methods.md) are supported.
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| change | { text:newText } | Triggered when the content entered in the text box changes.<br>If you change the **value** attribute directly, this event will not be triggered. |
| submit | { text:submitText } | Triggered when users click the search icon or the search button<sup>5+</sup>, or tap the search button on a soft keyboard. |
| translate<sup>5+</sup> | { value: selectedText } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | { value: selectedText } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | { value: selectedText } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
```
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p14241451144812"><aname="p14241451144812"></a><aname="p14241451144812"></a>Minimum value of the slider.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1842435134811"><aname="p1842435134811"></a><aname="p1842435134811"></a>Maximum value of the slider.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p134251351194814"><aname="p134251351194814"></a><aname="p134251351194814"></a>Step of each slide.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p442565119483"><aname="p442565119483"></a><aname="p442565119483"></a>Initial value of the slider.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p83958323527"><aname="p83958323527"></a><aname="p83958323527"></a>Slider style. Available values are as follows:</p>
<aname="ul742810911538"></a><aname="ul742810911538"></a><ulid="ul742810911538"><li><strongid="b6310165918435"><aname="b6310165918435"></a><aname="b6310165918435"></a>outset</strong>: The slider is on the sliding bar.</li><li><strongid="b144297112440"><aname="b144297112440"></a><aname="b144297112440"></a>inset</strong>: The slider is inside the sliding bar.<divclass="note"id="note10509152215419"><aname="note10509152215419"></a><aname="note10509152215419"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p14509172218549"><aname="p14509172218549"></a><aname="p14509172218549"></a></p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p16396133212520"><aname="p16396133212520"></a><aname="p16396133212520"></a>Whether a pop-up is displayed to show the percentage value on the slider.</p>
| min | number | 0 | No| Minimum value of the slider.|
| max | number | 100 | No| Maximum value of the slider.|
| step | number | 1 | No| Step of each slide.|
| value | number | 0 | No| Initial value of the slider.|
| mode<sup>5+</sup> | string | outset | No| Slider style. Available values are as follows:<br>- **outset**: The slider is on the sliding bar.<br>- **inset**: The slider is inside the sliding bar.|
<tdclass="cellrowborder"valign="top"width="31.95680431956805%"headers="mcps1.1.6.1.5 "><pid="p696910177571"><aname="p696910177571"></a><aname="p696910177571"></a>Background color of the slider.</p>
<tdclass="cellrowborder"valign="top"width="31.95680431956805%"headers="mcps1.1.6.1.5 "><pid="p1097011173571"><aname="p1097011173571"></a><aname="p1097011173571"></a>Selected color of the slider.</p>
<tdclass="cellrowborder"valign="top"width="45.69456945694569%"headers="mcps1.1.4.1.3 "><pid="p078614157518"><aname="p078614157518"></a><aname="p078614157518"></a>Triggered when the value changes.</p>
</td>
</tr>
</tbody>
</table>
**Table 1** ChangeEvent
## Events
<aname="table12318174214516"></a>
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="aa3d09d0a55704a6097fb39739436c5db"><aname="aa3d09d0a55704a6097fb39739436c5db"></a><aname="aa3d09d0a55704a6097fb39739436c5db"></a>Current value of the slider.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p129511219115620"><aname="p129511219115620"></a><aname="p129511219115620"></a>Whether the dragging operation ends. Available values are as follows:</p>
<aname="ul1332217234581"></a><aname="ul1332217234581"></a><ulid="ul1332217234581"><li><strongid="b184858101968"><aname="b184858101968"></a><aname="b184858101968"></a>true</strong>: The dragging ends.</li><li><strongid="b1099042014618"><aname="b1099042014618"></a><aname="b1099042014618"></a>false</strong>: The dragging is in progress.</li></ul>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="a85eddf1d320641a8b344aaadffe6d49e"><aname="a85eddf1d320641a8b344aaadffe6d49e"></a><aname="a85eddf1d320641a8b344aaadffe6d49e"></a>Current value of the slider.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p933335415453"><aname="p933335415453"></a><aname="p933335415453"></a>Type of the change event. Available values are as follows:</p>
<aname="ul1998831814525"></a><aname="ul1998831814525"></a><ulid="ul1998831814525"><li><strongid="b163190216816"><aname="b163190216816"></a><aname="b163190216816"></a>start</strong>: The <strongid="b69665997"><aname="b69665997"></a><aname="b69665997"></a>value</strong> starts to change.</li><li><strongid="b1732713276817"><aname="b1732713276817"></a><aname="b1732713276817"></a>move</strong>: The <strongid="b12607157190"><aname="b12607157190"></a><aname="b12607157190"></a>value</strong> is changing with users' dragging.</li><li><strongid="b8771301819"><aname="b8771301819"></a><aname="b8771301819"></a>end</strong>: The <strongid="b670519441891"><aname="b670519441891"></a><aname="b670519441891"></a>value</strong> stops changing.</li></ul>
</td>
</tr>
</tbody>
</table>
## Example<a name="section166243517816"></a>
| Name| Parameter| Description|
| -------- | -------- | -------- |
| change | ChangeEvent | Triggered when the value changes.|
```
**Table 1** ChangeEvent
| Attribute| Type| Description|
| -------- | -------- | -------- |
| value<sup>5+</sup> | number | Current value of the slider.|
| mode<sup>5+</sup> | string | Type of the change event. Available values are as follows:<br>- **start**: The **value** starts to change.<br>- **move**: The **value** is changing with users' dragging.<br>- **end**: The **value** stops changing.|
## Example
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<text>slider start value is {{startValue}}</text>
<text>slider start value is {{startValue}}</text>
...
@@ -244,18 +66,17 @@ In addition to the events in [Universal Events](js-components-common-events.md)
...
@@ -244,18 +66,17 @@ In addition to the events in [Universal Events](js-components-common-events.md)
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a745abab21c7c47afbb4343f611f13f0e"><aname="a745abab21c7c47afbb4343f611f13f0e"></a><aname="a745abab21c7c47afbb4343f611f13f0e"></a>Font color of the modified text.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a86d755d025194433a3d824ac6308dc19"><aname="a86d755d025194433a3d824ac6308dc19"></a><aname="a86d755d025194433a3d824ac6308dc19"></a>Font size of the modified text.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="p1023513229570"><aname="p1023513229570"></a><aname="p1023513229570"></a>Whether the font size of the modified text changes with the system's font size settings.</p>
<divclass="note"id="note5531128463"><aname="note5531128463"></a><aname="note5531128463"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p11531172814611"><aname="p11531172814611"></a><aname="p11531172814611"></a>If the <strongid="b9631151853613"><aname="b9631151853613"></a><aname="b9631151853613"></a>config-changes</strong> tag of <strongid="b15641171817360"><aname="b15641171817360"></a><aname="b15641171817360"></a>fontSize</strong> is configured for abilities in the <strongid="b20644418103618"><aname="b20644418103618"></a><aname="b20644418103618"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a04816275b7d249079b4a1e80f69ea86e"><aname="a04816275b7d249079b4a1e80f69ea86e"></a><aname="a04816275b7d249079b4a1e80f69ea86e"></a>Font style of the modified text. For details, see <ahref="js-components-basic-text.md#section5775351116">font-style</a> of the <strongid="b18795152647"><aname="b18795152647"></a><aname="b18795152647"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="aa1d0d3abf811468e8c3f707e1a7e5b8c"><aname="aa1d0d3abf811468e8c3f707e1a7e5b8c"></a><aname="aa1d0d3abf811468e8c3f707e1a7e5b8c"></a>Font weight of the modified text. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b1695595210517"><aname="b1695595210517"></a><aname="b1695595210517"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="aa83ac8481649423b80b326de4eb5fefb"><aname="aa83ac8481649423b80b326de4eb5fefb"></a><aname="aa83ac8481649423b80b326de4eb5fefb"></a>Text decoration of the modified text. For details, see <ahref="js-components-basic-text.md#section5775351116">text-decoration</a> of the <strongid="b1528363213719"><aname="b1528363213719"></a><aname="b1528363213719"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="39.35393539353936%"headers="mcps1.1.6.1.5 "><pid="a52f159b549364d40b7c92d51aba7c1a9"><aname="a52f159b549364d40b7c92d51aba7c1a9"></a><aname="a52f159b549364d40b7c92d51aba7c1a9"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1319514265813"></a>
Only the click event in [Universal Events](js-components-common-events.md) is supported.
## Method<a name="section2291124515582"></a>
Not supported
Not supported
## Example Code<a name="section1841815550582"></a>
```
## Attributes
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
> **NOTE**
>
> The **focusable** and **disabled** attributes are not supported.
## Styles
Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | - | No | Font color of the modified text. |
| font-size | <length> | 30px | No | Font size of the modified text. |
| allow-scale | boolean | true | No | Whether the font size of the modified text changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the modified text. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-weight | number \| string | normal | No | Font weight of the modified text. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| text-decoration | string | none | No | Text decoration of the modified text. For details, see **text-decoration** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events
Only the click event in [Universal Events](../arkui-js/js-components-common-events.md) is supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p526295335811"><aname="p526295335811"></a><aname="p526295335811"></a>Whether the component is checked or not.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p3263753175817"><aname="p3263753175817"></a><aname="p3263753175817"></a>Text displayed when the component is checked.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p19263185312583"><aname="p19263185312583"></a><aname="p19263185312583"></a>Text displayed when the component is not checked.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p17142194118113"><aname="p17142194118113"></a><aname="p17142194118113"></a>Text color displayed when the component is checked.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p7142041512"><aname="p7142041512"></a><aname="p7142041512"></a>Text color displayed when the component is not checked.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p714374115110"><aname="p714374115110"></a><aname="p714374115110"></a>Distance between the two sides of the longest text in <strongid="b143766341196"><aname="b143766341196"></a><aname="b143766341196"></a>texton</strong> and <strongid="b1838317345192"><aname="b1838317345192"></a><aname="b1838317345192"></a>textoff</strong> and the border of the slider.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p19143184110114"><aname="p19143184110114"></a><aname="p19143184110114"></a>Font size. This attribute is available only when <strongid="b2605184019198"><aname="b2605184019198"></a><aname="b2605184019198"></a>texton</strong> and <strongid="b18612114016193"><aname="b18612114016193"></a><aname="b18612114016193"></a>textoff</strong> are set.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p71435417112"><aname="p71435417112"></a><aname="p71435417112"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note214334112118"><aname="note214334112118"></a><aname="note214334112118"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p3143174118114"><aname="p3143174118114"></a><aname="p3143174118114"></a>If the <strongid="b524714361237"><aname="b524714361237"></a><aname="b524714361237"></a>config-changes</strong> tag of <strongid="b19256136236"><aname="b19256136236"></a><aname="b19256136236"></a>fontSize</strong> is configured for abilities in the <strongid="b32576360318"><aname="b32576360318"></a><aname="b32576360318"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p61446412015"><aname="p61446412015"></a><aname="p61446412015"></a>Font style. This attribute is available only when <strongid="b19186714194419"><aname="b19186714194419"></a><aname="b19186714194419"></a>texton</strong> and <strongid="b480316171449"><aname="b480316171449"></a><aname="b480316171449"></a>textoff</strong> are set. For details, see <ahref="js-components-basic-text.md#section5775351116">font-style</a> of the <strongid="b12931164418193"><aname="b12931164418193"></a><aname="b12931164418193"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1714484118114"><aname="p1714484118114"></a><aname="p1714484118114"></a>Font weight. This attribute is available only when <strongid="b419312514441"><aname="b419312514441"></a><aname="b419312514441"></a>texton</strong> and <strongid="b8521102704413"><aname="b8521102704413"></a><aname="b8521102704413"></a>textoff</strong> are set. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b15764157161917"><aname="b15764157161917"></a><aname="b15764157161917"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p614414411115"><aname="p614414411115"></a><aname="p614414411115"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text. This attribute is available only when <strongid="b77641525192017"><aname="b77641525192017"></a><aname="b77641525192017"></a>texton</strong> and <strongid="b1477292511201"><aname="b1477292511201"></a><aname="b1477292511201"></a>textoff</strong> are set.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1042893411015"></a>
## Styles
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
<aname="table4429183420016"></a>
| Name | Type | Default Value | Mandatory | Description |
| textoff-color(Rich) | <color> | \#000000 | No | Text color displayed when the component is not checked. |
</th>
| text-padding(Rich) | number | 0px | No | Distance between the two sides of the longest text in **texton** and **textoff** and the border of the slider. |
| font-size(Rich) | <length> | - | No | Font size. This attribute is available only when **texton** and **textoff** are set. |
</th>
| allow-scale(Rich) | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
</tr>
| font-style(Rich) | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
</thead>
| font-weight(Rich) | number \| string | normal | No | Font weight. This attribute is available only when **texton** and **textoff** are set. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family(Rich) | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. This attribute is available only when **texton** and **textoff** are set.|
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p24295341304"><aname="p24295341304"></a><aname="p24295341304"></a>Triggered when the <strongid="b611663315206"><aname="b611663315206"></a><aname="b611663315206"></a>checked</strong> state changes.</p>
</td>
</tr>
</tbody>
</table>
## Method<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Events
## Example Code<a name="section1149419101412"></a>
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p1951012205310"><aname="p1951012205310"></a><aname="p1951012205310"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note12510112010317"><aname="note12510112010317"></a><aname="note12510112010317"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p10510720332"><aname="p10510720332"></a><aname="p10510720332"></a>For details about how to make the configuration take effect dynamically, see the <strongid="b65592247511"><aname="b65592247511"></a><aname="b65592247511"></a>config-changes</strong> attribute in the <strongid="b1576712361551"><aname="b1576712361551"></a><aname="b1576712361551"></a>config.json</strong> file.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p3467173291810"><aname="p3467173291810"></a><aname="p3467173291810"></a>Spacing between texts. The options are as follows:</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p95101120238"><aname="p95101120238"></a><aname="p95101120238"></a>Font style. Available values are as follows:</p>
<aname="ul85109201131"></a><aname="ul85109201131"></a><ulid="ul85109201131"><li><strongid="b111931527399"><aname="b111931527399"></a><aname="b111931527399"></a>normal</strong>: standard font style</li><li><strongid="b641135983918"><aname="b641135983918"></a><aname="b641135983918"></a>italic</strong>: italic font style</li></ul>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p135113209314"><aname="p135113209314"></a><aname="p135113209314"></a>Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.</p>
<divclass="note"id="note851111201435"><aname="note851111201435"></a><aname="note851111201435"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p15111020534"><aname="p15111020534"></a><aname="p15111020534"></a>The value must be an integer multiple of 100.</p>
</div></div>
<pid="p451182013310"><aname="p451182013310"></a><aname="p451182013310"></a>The value of the string type can be <strongid="b09316811414"><aname="b09316811414"></a><aname="b09316811414"></a>lighter</strong>, <strongid="b1952261211416"><aname="b1952261211416"></a><aname="b1952261211416"></a>normal</strong>, <strongid="b414611515413"><aname="b414611515413"></a><aname="b414611515413"></a>bold</strong>, or <strongid="b871421813416"><aname="b871421813416"></a><aname="b871421813416"></a>bolder</strong>.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p1751117201737"><aname="p1751117201737"></a><aname="p1751117201737"></a>Text decoration. Available values are as follows:</p>
<aname="ul9511720637"></a><aname="ul9511720637"></a><ulid="ul9511720637"><li><strongid="b164849427323"><aname="b164849427323"></a><aname="b164849427323"></a>underline</strong>: An underline is used.</li><li><strongid="b1562604511325"><aname="b1562604511325"></a><aname="b1562604511325"></a>line-through</strong>: A strikethrough is used.</li><li><strongid="b13748195193210"><aname="b13748195193210"></a><aname="b13748195193210"></a>none</strong>: The standard text is used.</li></ul>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p2437104151319"><aname="p2437104151319"></a><aname="p2437104151319"></a>Color of the text decoration.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p651214206312"><aname="p651214206312"></a><aname="p651214206312"></a>Text alignment mode. Available values are as follows:</p>
<aname="ul11512120336"></a><aname="ul11512120336"></a><ulid="ul11512120336"><li><strongid="b1068915261435"><aname="b1068915261435"></a><aname="b1068915261435"></a>left</strong>: The text is left-aligned.</li><li><strongid="b7194633134312"><aname="b7194633134312"></a><aname="b7194633134312"></a>center</strong>: The text is center-aligned.</li><li><strongid="b12787113444310"><aname="b12787113444310"></a><aname="b12787113444310"></a>right</strong>: The text is right-aligned.</li><li><strongid="b5698814174419"><aname="b5698814174419"></a><aname="b5698814174419"></a>start</strong>: The text is aligned with the direction in which the text is written.</li><li><strongid="b941011915456"><aname="b941011915456"></a><aname="b941011915456"></a>end</strong>: The text is aligned with the opposite direction in which the text is written. </li></ul>
<divclass="note"id="note14512192013312"><aname="note14512192013312"></a><aname="note14512192013312"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p16513320938"><aname="p16513320938"></a><aname="p16513320938"></a>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container. </p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p1513520336"><aname="p1513520336"></a><aname="p1513520336"></a>Text line height. When this parameter is set to <strongid="b49513892117"><aname="b49513892117"></a><aname="b49513892117"></a>0px</strong>, the text line height is not limited and the font size is adaptive. The <strongid="b96908348288"><aname="b96908348288"></a><aname="b96908348288"></a>string</strong> values are as follows:</p>
<pid="p203731252121210"><aname="p203731252121210"></a><aname="p203731252121210"></a><strongid="b0710151102820"><aname="b0710151102820"></a><aname="b0710151102820"></a>normal</strong><supid="sup1522861917228"><aname="sup1522861917228"></a><aname="sup1522861917228"></a>7+</sup>: default line height</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p65130201310"><aname="p65130201310"></a><aname="p65130201310"></a><spanid="ph13751113121520"><aname="ph13751113121520"></a><aname="ph13751113121520"></a>Takes effect when the maximum number of lines is specified. </span>Available values are as follows:</p>
<aname="ul2513142018312"></a><aname="ul2513142018312"></a><ulid="ul2513142018312"><li><strongid="b165145674710"><aname="b165145674710"></a><aname="b165145674710"></a>clip</strong>: The text is clipped and displayed based on the size of the parent container.</li><li><strongid="b1331610118486"><aname="b1331610118486"></a><aname="b1331610118486"></a>ellipsis</strong>: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with <strongid="b774215496487"><aname="b774215496487"></a><aname="b774215496487"></a>max-lines</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p75148201333"><aname="p75148201333"></a><aname="p75148201333"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text. </p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p934052515223"><aname="p934052515223"></a><aname="p934052515223"></a>Maximum number of text lines. The <strongid="b10373134345315"><aname="b10373134345315"></a><aname="b10373134345315"></a>string</strong> values are as follows:</p>
<aname="ul6458027152218"></a><aname="ul6458027152218"></a><ulid="ul6458027152218"><li><strongid="b1132417423294"><aname="b1132417423294"></a><aname="b1132417423294"></a>auto</strong><supid="sup15460165433814"><aname="sup15460165433814"></a><aname="sup15460165433814"></a>7+</sup>: The number of text lines adapts to the container height.</li></ul>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p125151201636"><aname="p125151201636"></a><aname="p125151201636"></a>Minimum font size in the text. This style must be used together with <strongid="b73481621155012"><aname="b73481621155012"></a><aname="b73481621155012"></a>max-font-size</strong>. The font size can be changed dynamically. After the maximum and minimum font sizes are set, <strongid="b483334111512"><aname="b483334111512"></a><aname="b483334111512"></a>font-size</strong> does not take effect.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p11515520038"><aname="p11515520038"></a><aname="p11515520038"></a>Maximum font size in the text. This style must be used together with <strongid="b22010161547"><aname="b22010161547"></a><aname="b22010161547"></a>min-font-size</strong>. The font size can be changed dynamically. After the maximum and minimum font sizes are set, <strongid="b302292867"><aname="b302292867"></a><aname="b302292867"></a>font-size</strong> does not take effect.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p1151519205317"><aname="p1151519205317"></a><aname="p1151519205317"></a>Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p851513201317"><aname="p851513201317"></a><aname="p851513201317"></a>Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, <strongid="b1420501110354"><aname="b1420501110354"></a><aname="b1420501110354"></a>text-overflow</strong> is used to truncate the text. If this parameter is set, <strongid="b153751052193511"><aname="b153751052193511"></a><aname="b153751052193511"></a>font-size</strong>, <strongid="b6195125503512"><aname="b6195125503512"></a><aname="b6195125503512"></a>max-font-size</strong>, <strongid="b561587352"><aname="b561587352"></a><aname="b561587352"></a>min-font-size</strong>, and <strongid="b41946114369"><aname="b41946114369"></a><aname="b41946114369"></a>font-size-step</strong> do not take effect.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p329813311491"><aname="p329813311491"></a><aname="p329813311491"></a>Text line breaking mode. The options are as follows:</p>
<aname="ul3839682122"></a><aname="ul3839682122"></a><ulid="ul3839682122"><li><strongid="b329519515225"><aname="b329519515225"></a><aname="b329519515225"></a>normal</strong>: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.</li><li><strongid="b118015913305"><aname="b118015913305"></a><aname="b118015913305"></a>break-all</strong>: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.</li><li><strongid="b1217910513399"><aname="b1217910513399"></a><aname="b1217910513399"></a>break-word</strong>: Has the same effect as <strongid="b187324215494"><aname="b187324215494"></a><aname="b187324215494"></a>break-all</strong>, except that it does not break unbreakable words.</li></ul>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p273314531310"><aname="p273314531310"></a><aname="p273314531310"></a>Indentation of the first line.</p>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p9839417181617"><aname="p9839417181617"></a><aname="p9839417181617"></a>Mode for processing blanks in the component. The options are as follows:</p>
<aname="ul9139155131615"></a><aname="ul9139155131615"></a><ulid="ul9139155131615"><li><strongid="b491965183217"><aname="b491965183217"></a><aname="b491965183217"></a>normal</strong>: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.</li><li><strongid="b6272101473212"><aname="b6272101473212"></a><aname="b6272101473212"></a>nowrap</strong>: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.</li><li><strongid="b1853091145817"><aname="b1853091145817"></a><aname="b1853091145817"></a>pre</strong>: All contents are output as-is.</li><li><strongid="b16557113373214"><aname="b16557113373214"></a><aname="b16557113373214"></a>pre-wrap</strong>: All contents are output as-is with line breaks.</li><li><strongid="b16445113143320"><aname="b16445113143320"></a><aname="b16445113143320"></a>pre-line</strong>: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.</li></ul>
<tdclass="cellrowborder"valign="top"width="44.16558344165583%"headers="mcps1.1.6.1.5 "><pid="p2099116133418"><aname="p2099116133418"></a><aname="p2099116133418"></a>Whether the text size adapts to the container height.</p>
<divclass="note"id="note1725773504115"><aname="note1725773504115"></a><aname="note1725773504115"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p02571035164111"><aname="p02571035164111"></a><aname="p02571035164111"></a>The settings take effect after font size auto-adaptation is configured.</p>
>- In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement.
>- Use the escape character **\\r\\n** for newline.
>- The following escape characters are supported: **\\a**, **\\b**, **\\f**, **\\n**, **\\r**, **\\t**, **\\v**, **\\'**, **\\"**, and **\\0**.
>- When you use **<span\>** as a child component to form a text paragraph, note that if a **<span\>** style is abnormal, the text paragraph cannot be displayed.
>- The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **<text\>** component and its child components \(**<span\>**\).
>- The **<text\>** component does not support the coexistence of the text content and **<span\>** subcomponents. \(If both of them exist, only the content in **<span\>** is displayed.\)
## Events<a name="section1948820711216"></a>
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
Events in [Universal Events](js-components-common-events.md) are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | #e5000000 | No | Font color. |
| font-size | <length> | 30px | No | Font size. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| letter-spacing | <length> | 0px | No | Character spacing (px). |
| word-spacing<sup>7+</sup> | <length>\|<percentage>\| string | normal | No | Spacing between texts. If the input is a string, the options are as follows:<br>**normal**: default spacing.|
| font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **italic**: italic font style|
| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
| text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| text-decoration-color<sup>7+</sup> | <color> | - | No | Color of the text decoration. |
| text-align | string | start<br> | No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
| line-height | <length>\|<percentage><sup>7+</sup>\| string<sup>7+</sup> | 0px<sup>1-6</sup><br>normal<sup>7+</sup> | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. The value of the string type is as follows:<br>**normal**<sup>7+</sup>: default line height |
| text-overflow | string | clip | No | Display mode when the text is too long. This style takes effect when the maximum number of lines is specified. Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| max-lines | number \| string<sup>7+</sup> | - | No | Maximum number of text lines. The value of the string type is as follows:<br>- **auto**<sup>7+</sup>: The number of text lines adapts to the container height. |
| min-font-size | <length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| max-font-size | <length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
| font-size-step | <length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example values: **12px,14px,16px**|
| word-break<sup>6+</sup> | string | normal | No | Text line breaking mode. The options are as follows:<br>- **normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.<br>- **break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.<br>- **break-word**: Works in the same way as **break-all**, except that it does not break unbreakable words.|
| text-indent<sup>7+</sup> | <length> | - | No | Indentation of the first line. |
| white-space<sup>7+</sup> | string | pre | No | Mode for processing blanks in the component. The options are as follows:<br>- **normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.<br>- **nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.<br>- **pre**: All contents are output as-is.<br>- **pre-wrap**: All contents are output as-is with line breaks.<br>- **pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.|
| adapt-height<sup>7+</sup> | boolean | false | No | Whether the text size adapts to the container height.<br>The settings take effect after font size auto-adaptation is configured. |
## Method<a name="section2279124532420"></a>
> **NOTE**
> - In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement.
>
> - Use the escape character **\r\n** for newline.
>
> - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**.
>
> - When you use **\<span>** as a child component to form a text paragraph, note that if a **\<span>** style is abnormal, the text paragraph cannot be displayed.
>
> - The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **\<text>** component and its child components (**\<span>**).
>
> - The **\<text>** component cannot contain both the text and the child component **\<span>**. If both of them exist, only the content in **\<span>** is displayed.
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example Code<a name="section13294026042"></a>
## Events
```
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<divclass="content">
<divclass="content">
...
@@ -328,7 +88,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
...
@@ -328,7 +88,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
</div>
</div>
```
```
```
```css
/* xxx.css */
/* xxx.css */
.container{
.container{
display:flex;
display:flex;
...
@@ -348,7 +108,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
...
@@ -348,7 +108,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1372114227414"><aname="p1372114227414"></a><aname="p1372114227414"></a>Content of the hint text.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1872218223415"><aname="p1872218223415"></a><aname="p1872218223415"></a>Maximum number of characters that can be entered in the multi-line text box.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p172213223414"><aname="p172213223414"></a><aname="p172213223414"></a>Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1872232213411"><aname="p1872232213411"></a><aname="p1872232213411"></a>Whether a text box can be extended. If the value of this attribute is set to <strongid="b073910572418"><aname="b073910572418"></a><aname="b073910572418"></a>true</strong>, the height of the text box can adapt to the text.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p20731162310415"><aname="p20731162310415"></a><aname="p20731162310415"></a>Content in a multi-line text box.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p72081718281"><aname="p72081718281"></a><aname="p72081718281"></a>Whether to display the character counter for the text box. This attribute takes effect only when <strongid="b764616114321"><aname="b764616114321"></a><aname="b764616114321"></a>maxlength</strong> is set.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p207221573417"><aname="p207221573417"></a><aname="p207221573417"></a>Menu options displayed after users click the <strongid="b21781315182119"><aname="b21781315182119"></a><aname="b21781315182119"></a>More</strong> button in the pop menu.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p135551628184820"><aname="p135551628184820"></a><aname="p135551628184820"></a>Whether to automatically obtain the focus.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p9619113118488"><aname="p9619113118488"></a><aname="p9619113118488"></a>Start position for text selection.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p2023014344489"><aname="p2023014344489"></a><aname="p2023014344489"></a>End position for text selection.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1642873734813"><aname="p1642873734813"></a><aname="p1642873734813"></a>Whether to display the soft keyboard during editing.</p>
</td>
</tr>
</tbody>
</table>
**Table 1** MenuOption<sup>5+</sup>
| Name | Type | Default Value | Mandatory | Description |
| placeholder | string | - | No | Content of the hint text. |
| maxlength | number | - | No | Maximum number of characters that can be entered in the multi-line text box. |
| headericon | string | - | No | Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG.|
| extend | boolean | false | No | Whether a text box can be extended. If the value of this attribute is set to **true**, the height of the text box can adapt to the text. |
| value<sup>5+</sup> | string | - | No | Content in a multi-line text box. |
| showcounter<sup>5+</sup> | boolean | false | No | Whether to display the character counter for the text box. This attribute takes effect only when **maxlength** is set. |
| menuoptions<sup>5+</sup> | Array<MenuOption> | - | No | Menu options displayed after users click the **More** button. |
| autofocus<sup>6+</sup> | boolean | false | No | Whether to automatically obtain focus. |
| selectedstart<sup>6+</sup> | number | -1 | No | Start position for text selection. |
| selectedend<sup>6+</sup> | number | -1 | No | End position for text selection. |
| softkeyboardenabled<sup>6+</sup> | boolean | true | No | Whether to display the soft keyboard during editing. |
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p73631954762"><aname="p73631954762"></a><aname="p73631954762"></a>Path of the icon for a menu option.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p1036311548616"><aname="p1036311548616"></a><aname="p1036311548616"></a>Text content in a menu option.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section182794053"></a>
| Name | Type | Description |
| ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option.|
| content | string | Text content of a menu option.|
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p17588923718"><aname="p17588923718"></a><aname="p17588923718"></a>Text color of the multi-line text box.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p175891621973"><aname="p175891621973"></a><aname="p175891621973"></a>Font size of the multi-line text box. </p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p55894219719"><aname="p55894219719"></a><aname="p55894219719"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note13589162372"><aname="note13589162372"></a><aname="note13589162372"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p12589021175"><aname="p12589021175"></a><aname="p12589021175"></a>If the <strongid="b114871535165219"><aname="b114871535165219"></a><aname="b114871535165219"></a>config-changes</strong> tag of <strongid="b749317356521"><aname="b749317356521"></a><aname="b749317356521"></a>fontSize</strong> is configured for abilities in the <strongid="b3494193515215"><aname="b3494193515215"></a><aname="b3494193515215"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p25896215710"><aname="p25896215710"></a><aname="p25896215710"></a>Color of the hint text in the multi-line text box. This attribute is available when the component type is set to <strongid="b1880264510313"><aname="b1880264510313"></a><aname="b1880264510313"></a>text</strong>, <strongid="b1980916451312"><aname="b1980916451312"></a><aname="b1980916451312"></a>email</strong>, <strongid="b7809144513311"><aname="b7809144513311"></a><aname="b7809144513311"></a>date</strong>, <strongid="b158107452319"><aname="b158107452319"></a><aname="b158107452319"></a>time</strong>, <strongid="b10811104511318"><aname="b10811104511318"></a><aname="b10811104511318"></a>number</strong>, or <strongid="b15811545130"><aname="b15811545130"></a><aname="b15811545130"></a>password</strong>.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p2058912778"><aname="p2058912778"></a><aname="p2058912778"></a>Font weight. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b780883514536"><aname="b780883514536"></a><aname="b780883514536"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p17590721579"><aname="p17590721579"></a><aname="p17590721579"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text. </p>
<tdclass="cellrowborder"valign="top"width="37.1962803719628%"headers="mcps1.1.6.1.5 "><pid="p18674134153015"><aname="p18674134153015"></a><aname="p18674134153015"></a>Color of the input cursor.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section3892191911214"></a>
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#e6000000 | No | Text color of the multi-line text box. |
| font-size | <length> | 16px | No | Font size of the multi-line text box. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the multi-line text box. This attribute is available when the component type is set to one of the following: text\|email\|date\|time\|number\|password. |
| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| caret-color<sup>6+</sup> | <color> | - | No | Color of the caret. |
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p56883296617"><aname="p56883296617"></a><aname="p56883296617"></a>Triggered when the input content changes. The input content, number of rows, and row height are obtained through the parameters.</p>
<divclass="note"id="note42491433440"><aname="note42491433440"></a><aname="note42491433440"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1524933204418"><aname="p1524933204418"></a><aname="p1524933204418"></a>If you change the <strongid="b1292019401570"><aname="b1292019401570"></a><aname="b1292019401570"></a>value</strong> attribute directly, this event will not be triggered. <supid="sup1674874183511"><aname="sup1674874183511"></a><aname="sup1674874183511"></a>5+</sup></p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p132842551198"><aname="p132842551198"></a><aname="p132842551198"></a>Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1967743413507"><aname="p1967743413507"></a><aname="p1967743413507"></a>Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1026053614504"><aname="p1026053614504"></a><aname="p1026053614504"></a>Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1671157105114"><aname="p1671157105114"></a><aname="p1671157105114"></a>Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the <strongid="b9972192992713"><aname="b9972192992713"></a><aname="b9972192992713"></a>menuoptions</strong> attribute is set. The option index and selected text content are returned.</p>
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p13803157185013"><aname="p13803157185013"></a><aname="p13803157185013"></a>{ start: number, end: number }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p4803155719505"><aname="p4803155719505"></a><aname="p4803155719505"></a>Triggered when the text selection changes.</p>
</td>
</tr>
</tbody>
</table>
## Method<a name="section47669296127"></a>
## Events
Methods in [Universal Methods](js-components-common-methods.md) are supported.
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
## Example Code<a name="section1224516501541"></a>
| change | { text: newText, lines: textLines, height: textHeight } | Triggered when the input content changes. The input content, number of rows, and row height are obtained through the parameters.<br>Since API version 5, if you change the value attribute directly, this event will not be triggered.|
| translate<sup>5+</sup> | { value: selectedText } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share<sup>5+</sup> | { value: selectedText } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search<sup>5+</sup> | { value: selectedText } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
| selectchange<sup>6+</sup> | { start: number, end: number }| Triggered when the text selection changes. |
```
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
The **<toggle\>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<toggle>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1981514819118"><aname="p1981514819118"></a><aname="p1981514819118"></a>Text value of the toggle.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p184114763819"><aname="p184114763819"></a><aname="p184114763819"></a>Whether the toggle is selected.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section3655917541"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="39.58604139586041%"headers="mcps1.1.6.1.5 "><pid="p2363151712139"><aname="p2363151712139"></a><aname="p2363151712139"></a>Text color of the toggle.</p>
<tdclass="cellrowborder"valign="top"width="39.58604139586041%"headers="mcps1.1.6.1.5 "><pid="p2364201716136"><aname="p2364201716136"></a><aname="p2364201716136"></a>Font size of the toggle.</p>
<tdclass="cellrowborder"valign="top"width="39.58604139586041%"headers="mcps1.1.6.1.5 "><pid="p536491719137"><aname="p536491719137"></a><aname="p536491719137"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note236431714138"><aname="note236431714138"></a><aname="note236431714138"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p6364161721312"><aname="p6364161721312"></a><aname="p6364161721312"></a>If the <strongid="b9631151853613"><aname="b9631151853613"></a><aname="b9631151853613"></a>config-changes</strong> tag of <strongid="b15641171817360"><aname="b15641171817360"></a><aname="b15641171817360"></a>fontSize</strong> is configured for abilities in the <strongid="b20644418103618"><aname="b20644418103618"></a><aname="b20644418103618"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="39.58604139586041%"headers="mcps1.1.6.1.5 "><pid="p7364131711318"><aname="p7364131711318"></a><aname="p7364131711318"></a>Font style of the toggle.</p>
<tdclass="cellrowborder"valign="top"width="39.58604139586041%"headers="mcps1.1.6.1.5 "><pid="p1736431716139"><aname="p1736431716139"></a><aname="p1736431716139"></a>Font weight of the toggle. For details, see <strongid="b738112421315"><aname="b738112421315"></a><aname="b738112421315"></a>font-weight</strong> of the <ahref="js-components-basic-text.md#section5775351116">text</a> component.</p>
<tdclass="cellrowborder"valign="top"width="39.58604139586041%"headers="mcps1.1.6.1.5 "><pid="p133656177131"><aname="p133656177131"></a><aname="p133656177131"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section3892191911214"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1889002418312"><aname="p1889002418312"></a><aname="p1889002418312"></a>Triggered when the toggle is selected or unselected.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section520313404174"></a>
```
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| ------- | ------- | ----- | ---- | ---------- |
| value | string | - | Yes | Text value of the toggle. |
| checked | boolean | false | No | Whether the toggle is selected.|
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| text-color | <color> | \#E5000000 | No | Text color of the toggle. |
| font-size | <length> | 16px | No | Font size of the toggle. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-style | string | normal | No | Font style of the toggle. |
| font-weight | number \| string | normal | No | Font weight of the toggle. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
| font-family | <string> | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| value | string | - | Yes | Text content of the operation option. |
| icon | string | - | Yes | Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.|
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p18883831183010"><aname="p18883831183010"></a><aname="p18883831183010"></a>Text content of the operation option.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p837212344498"><aname="p837212344498"></a><aname="p837212344498"></a>Icon image path, which is displayed on the option text. The value is a local path. Supported image formats are PNG, JPG, and SVG.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section184493015533"></a>
## Styles
Only the following style attributes are supported.
Only the following styles are supported.
<aname="table1744514388541"></a>
| Name | Type | Default Value | Mandatory | Description |
| font-style | string | normal | No | Font style. Available values are as follows:<br> - **normal**: standard font style<br>- **italic**: italic font style|
</th>
| font-weight | number\|string | normal | No | Font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is **400**. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**.|
| text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
</th>
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| background | <linear-gradient> | - | No | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| background-image | string | - | No | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported.|
</thead>
| background-size | - string<br>- <length><length><br>- <percentage><percentage> | auto | No | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **length** values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **\<percentage>** values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
| background-repeat | string | repeat | No | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
</td>
| background-position | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | No | Position of the background image.<br>- Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **\<percentage>** and **\<length>**.|
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
</td>
| display | string | flex | No | Type of the box containing an element. Available values are as follows:<br>- **flex**: Flexible layout.<br>- **none**: The box is disabled.|
| visibility | string | visible | No | Whether to display the box containing an element. A hidden box still occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="p1937615404253"><aname="p1937615404253"></a><aname="p1937615404253"></a>Whether the text size changes with the system's font size settings.</p>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="p197817427251"><aname="p197817427251"></a><aname="p197817427251"></a>Text font style. Available values are as follows:</p>
<aname="ol3712173853714"></a><aname="ol3712173853714"></a><olid="ol3712173853714"><li><strongid="b533925573911"><aname="b533925573911"></a><aname="b533925573911"></a>normal</strong>: standard font style</li><li><strongid="b12117205710391"><aname="b12117205710391"></a><aname="b12117205710391"></a>italic</strong>: italic font style</li></ol>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="p17641452258"><aname="p17641452258"></a><aname="p17641452258"></a>Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are <strongid="b1695811444515"><aname="b1695811444515"></a><aname="b1695811444515"></a>lighter</strong>, <strongid="b59669416457"><aname="b59669416457"></a><aname="b59669416457"></a>normal</strong>, <strongid="b896724144518"><aname="b896724144518"></a><aname="b896724144518"></a>bold</strong>, or <strongid="b196910415458"><aname="b196910415458"></a><aname="b196910415458"></a>bolder</strong>.</p>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="p18934647142514"><aname="p18934647142514"></a><aname="p18934647142514"></a>Text decoration. Available values are as follows:</p>
<aname="ol280935211386"></a><aname="ol280935211386"></a><olid="ol280935211386"><li><strongid="b113241833938"><aname="b113241833938"></a><aname="b113241833938"></a>underline</strong>: An underline is used.</li><li><strongid="b1838734735"><aname="b1838734735"></a><aname="b1838734735"></a>line-through</strong>: A strikethrough is used.</li><li><strongid="b1177036435"><aname="b1177036435"></a><aname="b1177036435"></a>none</strong>: The standard text is used.</li></ol>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="p134322050162510"><aname="p134322050162510"></a><aname="p134322050162510"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="ad385002530a346f09c23e6745ca0e916"><aname="ad385002530a346f09c23e6745ca0e916"></a><aname="ad385002530a346f09c23e6745ca0e916"></a>This attribute supports <ahref="js-components-common-gradient.md">Gradient Styles</a> only but is not compatible with <strongid="b0391974618"><aname="b0391974618"></a><aname="b0391974618"></a>background-color</strong> or <strongid="b740177766"><aname="b740177766"></a><aname="b740177766"></a>background-image</strong>.</p>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="aa236de4e56e349ff8c753d294e98abab"><aname="aa236de4e56e349ff8c753d294e98abab"></a><aname="aa236de4e56e349ff8c753d294e98abab"></a>Background image. Currently, this attribute is not compatible with <strongid="b13129246941242"><aname="b13129246941242"></a><aname="b13129246941242"></a>background-color</strong> or <strongid="b18855542241242"><aname="b18855542241242"></a><aname="b18855542241242"></a>background</strong>. Both online and local image resources are supported.</p>
<aname="ub2423a2f8d96432f8c58c629288432c5"></a><aname="ub2423a2f8d96432f8c58c629288432c5"></a><ulid="ub2423a2f8d96432f8c58c629288432c5"><li>The <strongid="b1240813501139"><aname="b1240813501139"></a><aname="b1240813501139"></a>string</strong> values are as follows:<aname="uee8f5c89381a4ce682a5d557f8e558ee"></a><aname="uee8f5c89381a4ce682a5d557f8e558ee"></a><ulid="uee8f5c89381a4ce682a5d557f8e558ee"><li><strongid="b18294195114318"><aname="b18294195114318"></a><aname="b18294195114318"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strongid="b10184452334"><aname="b10184452334"></a><aname="b10184452334"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strongid="b14980752831"><aname="b14980752831"></a><aname="b14980752831"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
</li><li>The two <strongid="b57176531536"><aname="b57176531536"></a><aname="b57176531536"></a><length></strong> values are as follows:<pid="a5b969a49f8074aae96a12e4232e47c5d"><aname="a5b969a49f8074aae96a12e4232e47c5d"></a><aname="a5b969a49f8074aae96a12e4232e47c5d"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b14228456634"><aname="b14228456634"></a><aname="b14228456634"></a>auto</strong> by default.</p>
</li><li>The two <strongid="b4995195613312"><aname="b4995195613312"></a><aname="b4995195613312"></a><percentage></strong> values are as follows:<pid="a19ef0a7986ce47f2b7fe614975e23cd9"><aname="a19ef0a7986ce47f2b7fe614975e23cd9"></a><aname="a19ef0a7986ce47f2b7fe614975e23cd9"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b1633231830"><aname="b1633231830"></a><aname="b1633231830"></a>auto</strong> by default.</p>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="a64efc26d6e2c48a3a4032c71b8511085"><aname="a64efc26d6e2c48a3a4032c71b8511085"></a><aname="a64efc26d6e2c48a3a4032c71b8511085"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p>
<aname="uee59e640d2304d56a0a5b396795a8cc5"></a><aname="uee59e640d2304d56a0a5b396795a8cc5"></a><ulid="uee59e640d2304d56a0a5b396795a8cc5"><li><strongid="b11277195719522"><aname="b11277195719522"></a><aname="b11277195719522"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strongid="b55279597525"><aname="b55279597525"></a><aname="b55279597525"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strongid="b48462126535"><aname="b48462126535"></a><aname="b48462126535"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strongid="b26935493141242"><aname="b26935493141242"></a><aname="b26935493141242"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><aname="ub1e24d41a33d4560a6637f7a16ee5140"></a><aname="ub1e24d41a33d4560a6637f7a16ee5140"></a><ulid="ub1e24d41a33d4560a6637f7a16ee5140"><li>Using keywords: If only one keyword is specified, the other value is <strongid="b5511326814"><aname="b5511326814"></a><aname="b5511326814"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<aname="uac6e07c1eb0244d79eeed180658cb6c6"></a><aname="uac6e07c1eb0244d79eeed180658cb6c6"></a><ulid="uac6e07c1eb0244d79eeed180658cb6c6"><li><strongid="b1554311179414"><aname="b1554311179414"></a><aname="b1554311179414"></a>left</strong>: leftmost in the horizontal direction</li><li><strongid="b737612182417"><aname="b737612182417"></a><aname="b737612182417"></a>right</strong>: rightmost in the horizontal direction</li><li><strongid="b1720014193413"><aname="b1720014193413"></a><aname="b1720014193413"></a>top</strong>: top in the vertical direction</li><li><strongid="b18452201349"><aname="b18452201349"></a><aname="b18452201349"></a>bottom</strong>: bottom in the vertical direction</li><li><strongid="b3875520242"><aname="b3875520242"></a><aname="b3875520242"></a>center</strong>: center position</li></ul>
</li></ul>
<aname="ua495746d9777430c973a5ec607309ac4"></a><aname="ua495746d9777430c973a5ec607309ac4"></a><ulid="ua495746d9777430c973a5ec607309ac4"><li>Using <strongid="b269119211746"><aname="b269119211746"></a><aname="b269119211746"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b25271122446"><aname="b25271122446"></a><aname="b25271122446"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strongid="b132172242416"><aname="b132172242416"></a><aname="b132172242416"></a>50%</strong>.</li><li>Using <strongid="b111066252046"><aname="b111066252046"></a><aname="b111066252046"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b48948251842"><aname="b48948251842"></a><aname="b48948251842"></a>0% 0%</strong> indicates the upper left corner. <strongid="b2756102611419"><aname="b2756102611419"></a><aname="b2756102611419"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strongid="b5578927747"><aname="b5578927747"></a><aname="b5578927747"></a>50%</strong>.</li><li>Using both <strongid="b154178914941242"><aname="b154178914941242"></a><aname="b154178914941242"></a><percentage></strong> and <strongid="b16022437541242"><aname="b16022437541242"></a><aname="b16022437541242"></a><length></strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="a2e8d180f3c914356af72e679446f4ab5"><aname="a2e8d180f3c914356af72e679446f4ab5"></a><aname="a2e8d180f3c914356af72e679446f4ab5"></a>Opacity of an element. The value ranges from <strongid="b202809908441242"><aname="b202809908441242"></a><aname="b202809908441242"></a>0</strong> to <strongid="b99312114841242"><aname="b99312114841242"></a><aname="b99312114841242"></a>1</strong>. The value <strongid="b27854883241242"><aname="b27854883241242"></a><aname="b27854883241242"></a>1</strong> means opaque, and <strongid="b52017499041242"><aname="b52017499041242"></a><aname="b52017499041242"></a>0</strong> means completely transparent.</p>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="a677d3f5076894546a1fc1404af757f26"><aname="a677d3f5076894546a1fc1404af757f26"></a><aname="a677d3f5076894546a1fc1404af757f26"></a>Type of the box containing an element. Available values are as follows:</p>
<aname="u20b5cc7616974e9d804498df629c48f1"></a><aname="u20b5cc7616974e9d804498df629c48f1"></a><ulid="u20b5cc7616974e9d804498df629c48f1"><li><strongid="b45227321849"><aname="b45227321849"></a><aname="b45227321849"></a>flex</strong>: flexible layout</li><li><strongid="b53233482941242"><aname="b53233482941242"></a><aname="b53233482941242"></a>none</strong>: The box is disabled.</li></ul>
<tdclass="cellrowborder"valign="top"width="46.300000000000004%"headers="mcps1.1.6.1.5 "><pid="a25930a9fa4bd4b8896aacc24e5202575"><aname="a25930a9fa4bd4b8896aacc24e5202575"></a><aname="a25930a9fa4bd4b8896aacc24e5202575"></a>Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the <strongid="b202816196553"><aname="b202816196553"></a><aname="b202816196553"></a>display</strong> attribute to <strongid="b173519194554"><aname="b173519194554"></a><aname="b173519194554"></a>none</strong>.) Available values are as follows:</p>
<aname="u2395105022844e08854f4266096995ea"></a><aname="u2395105022844e08854f4266096995ea"></a><ulid="u2395105022844e08854f4266096995ea"><li><strongid="b977043610416"><aname="b977043610416"></a><aname="b977043610416"></a>visible</strong>: The box is visible.</li><li><strongid="b7611237443"><aname="b7611237443"></a><aname="b7611237443"></a>hidden</strong>: The box is hidden but still takes up space.</li></ul>
<divclass="note"id="nca29d306d97b4fbdbfd735b6c9fb57a4"><aname="nca29d306d97b4fbdbfd735b6c9fb57a4"></a><aname="nca29d306d97b4fbdbfd735b6c9fb57a4"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="a5196ede3623d46bbb930bc6254a55b9e"><aname="a5196ede3623d46bbb930bc6254a55b9e"></a><aname="a5196ede3623d46bbb930bc6254a55b9e"></a>If both <strongid="b852218381745"><aname="b852218381745"></a><aname="b852218381745"></a>visibility</strong> and <strongid="b1452217381449"><aname="b1452217381449"></a><aname="b1452217381449"></a>display</strong> are set, only <strongid="b6523143812412"><aname="b6523143812412"></a><aname="b6523143812412"></a>display</strong> takes effect.</p>
</div></div>
</td>
</tr>
</tbody>
</table>
## Events<a name="section571865310552"></a>
Events in [Universal Events](js-components-common-events.md) are supported.
## Events
## Method<a name="section568225514199"></a>
The [universal events](../arkui-js/js-components-common-events.md) are supported.
Only the **\<toolbar-item>** component is supported.
>A maximum of five **<toolbar-item\>** components can be contained in a **<toolbar\>** component. If there are six or more, only the first four are displayed, and the rest items are hidden in the **More** list of the toolbar. Users can click **More** to view the hidden items.
>The list is displayed in the default style instead of a customized style set for the **<toolbar-item\>** component.
## Attributes<a name="section153601034618"></a>
> **NOTE**
>
> A maximum of five **\<toolbar-item>** child components can be displayed in a **\<toolbar>** component. If there are six or more toolbar items, the first four are displayed, and the rest items are added to the **More** list of the toolbar. Users can click **More** to view the items. The list is displayed in the default style instead of the custom style set for the <toolbar-item> components.
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
## Styles<a name="section1889052254711"></a>
## Attributes
Styles in [Universal Styles](js-components-common-styles.md) are supported.
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
<tdclass="cellrowborder"valign="top"width="36.15%"headers="mcps1.1.6.1.5 "><pid="p7337142443214"><aname="p7337142443214"></a><aname="p7337142443214"></a>Called when an image is successfully loaded. This function has no parameter.</p>
<tdclass="cellrowborder"valign="top"width="36.15%"headers="mcps1.1.6.1.5 "><pid="p1778212512329"><aname="p1778212512329"></a><aname="p1778212512329"></a>Called when an image fails to be loaded. This function has no parameter.</p>
</td>
</tr>
</tbody>
</table>
## Example<a name="section13457717134912"></a>
## Attributes
```
| Name | Type | Default Value | Mandatory | Description |
>**ImageBitmap** is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **ImageBitmap** object is generated by the **transferToImageBitmap\(\)** method of the **OffscreenCanvas** and stores the pixel data rendered on the **OffscreenCanvas**.
## Attributes<a name="section661391987"></a>
The **ImageBitmap** object is an object generated using the **transferToImageBitmap()** method of the **OffscreenCanvas** and stores the pixel data rendered on the **OffscreenCanvas**.
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p1785711281405"><aname="p1785711281405"></a><aname="p1785711281405"></a>Pixel width of the <strongid="b1722548101315"><aname="b1722548101315"></a><aname="b1722548101315"></a>ImageBitmap</strong> object.</p>
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p3857192844012"><aname="p3857192844012"></a><aname="p3857192844012"></a>Pixel height of the <strongid="b199991910181313"><aname="b199991910181313"></a><aname="b199991910181313"></a>ImageBitmap</strong> object.</p>
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p1785711281405"><aname="p1785711281405"></a><aname="p1785711281405"></a>Actual width of the rectangle on the canvas, in pixels.</p>
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p3857192844012"><aname="p3857192844012"></a><aname="p3857192844012"></a>Actual height of the rectangle on the canvas, in pixels.</p>
<tdclass="cellrowborder"valign="top"width="47.774777477747776%"headers="mcps1.1.4.1.3 "><pid="p085802844017"><aname="p085802844017"></a><aname="p085802844017"></a>A one-dimensional array of color values. The values range from 0 to 255.</p>
>- The **media** attribute uses the actual size, physical pixel, and screen resolution of the device by default. Do not confuse them with the configuration based on basic screen width 720 px.
>
> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The **media** attribute uses the actual size, physical pixel, and screen resolution of the device by default. Do not confuse them with the configuration based on basic screen width 720 px.
Media query is widely used on mobile devices. You may need to frequently modify the application style based on the device type or specific features and device parameters \(such as the screen resolution\). To keep up with your requirements, the media query component provides the following features:
1. Allows you to design different layouts matching the device and application attributes.
Media Query is widely used on mobile devices. You may need to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to:
2. Synchronously updates the application page layouts when your screen changes dynamically \(for example, in the event of screen splitting or landscape/portrait orientation switching\).
@@ -18,258 +25,95 @@ Use @media to import query statements. The rules are as follows:
...
@@ -18,258 +25,95 @@ Use @media to import query statements. The rules are as follows:
}
}
```
```
Examples:
@media screen and (round-screen: true) { … }: The condition is met when the device screen is round.
@media screen and \(round-screen: true\)\{ … \} // The condition is met when the device screen is round.
@media (max-height: 800) { … }: Range query. CSS level 3 is used.
@media \(max-height: 800\)\{ … \} // Range query. CSS level 3 is used.
@media (height <= 800) { ... }: Range query. CSS level 4 is used, and the statement is equivalent to that of CSS level 3.
@media \(height <= 800\)\{ ... \} // Range query. CSS level 4 is used, and the statement is equivalent to that of CSS level 3.
@media screen and (device-type: tv) or (resolution < 2) { ... }: Multi-condition query that contains the media type and multiple media features.
@media screen and \(device-type: tv\) or \(resolution < 2\)\{ ... \} // Multi-condition query that contains the media type and multiple media features.
## Referencing Resources on a Page<a name="section1993557745"></a>
## Referencing Resources on a Page
Use @import to import media query. The rule is as follows:
Use **@import** to import a media query. The rule is as follows:
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.1.3.1.2 "><pid="p19361415397"><aname="p19361415397"></a><aname="p19361415397"></a>Media query based on screen-related parameters</p>
</td>
</tr>
</tbody>
</table>
## Media Logical Operation<a name="section9949248948"></a>
Media logical operators \(and, or, not, and only\) are used to implement complex media query. They can also be combined using comma \(,\). The following table describes the operators.
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="p16614211014"><aname="p16614211014"></a><aname="p16614211014"></a>The <strongid="b58531219133515"><aname="b58531219133515"></a><aname="b58531219133515"></a>and</strong> operator is used to combine multiple media features into a media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.</p>
<pid="p1985411145715"><aname="p1985411145715"></a><aname="p1985411145715"></a>For example, <strongid="b173711673169"><aname="b173711673169"></a><aname="b173711673169"></a>screen and (device-type: wearable) and (max-height: 600)</strong> indicates that the query is valid when the device is a wearable and the maximum height of the application is less than or equal to 600 pixels.</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="p203046566106"><aname="p203046566106"></a><aname="p203046566106"></a>The <strongid="b192160136403"><aname="b192160136403"></a><aname="b192160136403"></a>not</strong> operator is used to perform a logical negation for a media query. <strongid="b6400101184118"><aname="b6400101184118"></a><aname="b6400101184118"></a>true</strong> is returned if the query condition is not met. Otherwise, <strongid="b0448111994110"><aname="b0448111994110"></a><aname="b0448111994110"></a>false</strong> is returned. In a media query list, logical negation is performed only for the media query using the <strongid="b395945418471"><aname="b395945418471"></a><aname="b395945418471"></a>not</strong> operator.</p>
<pid="p156455001010"><aname="p156455001010"></a><aname="p156455001010"></a>For example, <strongid="b1652072344913"><aname="b1652072344913"></a><aname="b1652072344913"></a>not screen and (min-height: 50) and (max-height: 600)</strong> indicates that the query is valid when the height of the application is less than 50 pixels or greater than 600 pixels.</p>
<divclass="note"id="note14802175917349"><aname="note14802175917349"></a><aname="note14802175917349"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p10802165913349"><aname="p10802165913349"></a><aname="p10802165913349"></a>You must specify the media type when using the <strongid="b98446326516"><aname="b98446326516"></a><aname="b98446326516"></a>not</strong> operator.</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="p052516221183"><aname="p052516221183"></a><aname="p052516221183"></a>The <strongid="b1440018175537"><aname="b1440018175537"></a><aname="b1440018175537"></a>only</strong> operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity while some browsers of earlier versions are processing the statements containing both media types and media features. For example:</p>
<pid="p79641292049"><aname="p79641292049"></a><aname="p79641292049"></a>screen and (min-height: 50)</p>
<pid="p1291414473456"><aname="p1291414473456"></a><aname="p1291414473456"></a>The browsers of earlier versions would mislead this sentence into <strongid="b4962851171020"><aname="b4962851171020"></a><aname="b4962851171020"></a>screen</strong>, causing the fact that the specified style is applied when only the media type is matched. In this case, the <strongid="b1075418316593"><aname="b1075418316593"></a><aname="b1075418316593"></a>only</strong> operator can be used to avoid this problem.</p>
<divclass="note"id="note38311047113516"><aname="note38311047113516"></a><aname="note38311047113516"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1831194717358"><aname="p1831194717358"></a><aname="p1831194717358"></a>You must specify the media type when using the <strongid="b33691344533"><aname="b33691344533"></a><aname="b33691344533"></a>only</strong> operator.</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="p102861117191212"><aname="p102861117191212"></a><aname="p102861117191212"></a>The comma operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the <strongid="b6137112318212"><aname="b6137112318212"></a><aname="b6137112318212"></a>or</strong> operator.</p>
<pid="p9854131415710"><aname="p9854131415710"></a><aname="p9854131415710"></a>For example, <strongid="b581719430310"><aname="b581719430310"></a><aname="b581719430310"></a>screen and (min-height: 1000), (round-screen: true)</strong> evaluates to true when the application height is greater than or equal to 1000 pixels or the device screen is rounded.</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="p45834951417"><aname="p45834951417"></a><aname="p45834951417"></a>The <strongid="b345813341814"><aname="b345813341814"></a><aname="b345813341814"></a>or</strong> operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.</p>
<pid="p385419141878"><aname="p385419141878"></a><aname="p385419141878"></a>For example, <strongid="b67899251713"><aname="b67899251713"></a><aname="b67899251713"></a>screen and (max-height: 1000) or (round-screen: true)</strong> evaluates to true when the application height is less than or equal to 1000 pixels or the device screen is rounded.</p>
</td>
</tr>
</tbody>
</table>
At MediaQuery Level 4, range query is imported so that you can use the operators including <=, \>=, <, and \> besides the max- and min-operators.
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="en-us_topic_0000001173164721_p136831596288"><aname="en-us_topic_0000001173164721_p136831596288"></a><aname="en-us_topic_0000001173164721_p136831596288"></a>Less than or equal to, for example, screen and (50 <= height).</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="en-us_topic_0000001173164721_p453664715285"><aname="en-us_topic_0000001173164721_p453664715285"></a><aname="en-us_topic_0000001173164721_p453664715285"></a>Greater than or equal to, for example, screen and (600 >= height).</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="en-us_topic_0000001173164721_p3387258152815"><aname="en-us_topic_0000001173164721_p3387258152815"></a><aname="en-us_topic_0000001173164721_p3387258152815"></a>Less than, for example, screen and (50 < height).</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.2.3.1.2 "><pid="en-us_topic_0000001173164721_p10897195319286"><aname="en-us_topic_0000001173164721_p10897195319286"></a><aname="en-us_topic_0000001173164721_p10897195319286"></a>Greater than, for example, screen and (600 > height).</p>
</td>
</tr>
</tbody>
</table>
## Media Features<a name="section192341841653"></a>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p18892193111711"><aname="p18892193111711"></a><aname="p18892193111711"></a>Height of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1889213312176"><aname="p1889213312176"></a><aname="p1889213312176"></a>Minimum height of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1889214331718"><aname="p1889214331718"></a><aname="p1889214331718"></a>Maximum height of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p78925319176"><aname="p78925319176"></a><aname="p78925319176"></a>Width of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1189363121716"><aname="p1189363121716"></a><aname="p1189363121716"></a>Minimum width of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p7893103161712"><aname="p7893103161712"></a><aname="p7893103161712"></a>Maximum width of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1334199154717"><aname="p1334199154717"></a><aname="p1334199154717"></a>Resolution of the device. The unit can be dpi, dppx, or dpcm.</p>
<aname="ul194277378472"></a><aname="ul194277378472"></a><ulid="ul194277378472"><li>dpi indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.</li><li>dpcm indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.</li><li>dppx indicates the number of physical pixels in each pixel. The unit is 96 px = 1 inch, which is different from the calculation method of the pixel unit on the page. 1 dppx = 96 dpi.</li></ul>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1587614152112"><aname="p1587614152112"></a><aname="p1587614152112"></a>Ratio of the width to the height of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p565623919203"><aname="p565623919203"></a><aname="p565623919203"></a>Minimum ratio of the width to the height of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p3316164032014"><aname="p3316164032014"></a><aname="p3316164032014"></a>Maximum ratio of the width to the height of the display area on the application page.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1198254032010"><aname="p1198254032010"></a><aname="p1198254032010"></a>Height of the device.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p9944112915227"><aname="p9944112915227"></a><aname="p9944112915227"></a>Minimum height of the device.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p5363230142216"><aname="p5363230142216"></a><aname="p5363230142216"></a>Maximum height of the device.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p114273117223"><aname="p114273117223"></a><aname="p114273117223"></a>Width of the device.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p44654479235"><aname="p44654479235"></a><aname="p44654479235"></a>Minimum width of the device.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p1085954720232"><aname="p1085954720232"></a><aname="p1085954720232"></a>Maximum width of the device.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p2252173810430"><aname="p2252173810430"></a><aname="p2252173810430"></a>Screen type. The value <strongid="b48688335141"><aname="b48688335141"></a><aname="b48688335141"></a>true</strong> indicates a circular screen, and <strongid="b1595424471412"><aname="b1595424471412"></a><aname="b1595424471412"></a>false</strong> indicates a non-circular screen.</p>
<tdclass="cellrowborder"valign="top"width="50.03999999999999%"headers="mcps1.1.3.1.2 "><pid="p88509314207"><aname="p88509314207"></a><aname="p88509314207"></a>Whether the device is in dark mode. The value is <strongid="b535842285711"><aname="b535842285711"></a><aname="b535842285711"></a>true</strong> if the device is in dark mode and <strongid="b63668223573"><aname="b63668223573"></a><aname="b63668223573"></a>false</strong> otherwise.</p>
</td>
</tr>
</tbody>
</table>
## Sample Code<a name="section1018513818615"></a>
- Sample code of the common media feature is as follows:
```
## Media Type
| Type | Description |
| ------ | -------------- |
| screen | Media query based on screen-related parameters.|
## Media Logical Operation
Media logical operators (and, or, not, and only) are used to implement complex media query. They can also be combined using comma (,). The following table describes the operators.
| and | The **and** operator is used to combine multiple media features into a media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: wearable) and (max-height: 600)** indicates that the query is valid when the device is a wearable and the maximum height of the application is less than or equal to 600 pixels.|
| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not screen and (min-height: 50) and (max-height: 600)** indicates that the query is valid when the height of the application is less than 50 pixels or greater than 600 pixels.<br>You must specify the media type when using the **not** operator.|
| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen and (min-height: 50)<br>The browsers of earlier versions would mislead this sentence into **screen**, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>You must specify the media type when using the **only** operator.|
| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen and (min-height: 1000), (round-screen: true)** evaluates to true when the application height is greater than or equal to 1000 pixels or the device screen is rounded.|
| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 1000) or (round-screen: true)** evaluates to true when the application height is less than or equal to 1000 pixels or the device screen is rounded.|
At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the max- and min-operators.
| height | Height of the display area on the application page. |
| min-height | Minimum height of the display area on the application page. |
| max-height | Maximum height of the display area on the application page. |
| width | Width of the display area on the application page. |
| min-width | Minimum width of the display area on the application page. |
| max-width | Maximum width of the display area on the application page. |
| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm. Where:<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. The unit is 96 px = 1 inch, which is different from the calculation method of the pixel unit on the page. 1 dppx = 96 dpi.|
| min-resolution | Minimum device resolution. |
| max-resolution | Maximum device resolution. |
| orientation | Screen orientation.<br>Options are as follows:<br>- **orientation: portrait**: portrait screen orientation<br>- **orientation: landscape**: landscape screen orientation|
| aspect-ratio | Ratio of the width to the height of the display area on the application page.<br>Example: **aspect-ratio:1/2**|
| min-aspect-ratio | Minimum ratio of the width to the height of the display area on the application page. |
| max-aspect-ratio | Maximum ratio of the width to the height of the display area on the application page. |
| device-height | Height of the device. |
| min-device-height | Minimum height of the device. |
| max-device-height | Maximum height of the device. |
| device-width | Width of the device. |
| min-device-width | Minimum width of the device. |
| max-device-width | Maximum width of the device. |
| round-screen | Screen type. The value **true** indicates a circular screen, and **false** indicates a non-circular screen. |
| dark-mode<sup>6+</sup> | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite. |
## Example
Sample code for the common media feature is as follows:
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
<divclass="container">
<divclass="container">
...
@@ -278,7 +122,7 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
...
@@ -278,7 +122,7 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
</div>
</div>
```
```
```
```css
/* xxx.css */
/* xxx.css */
.container{
.container{
width:300px;
width:300px;
...
@@ -300,4 +144,3 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
...
@@ -300,4 +144,3 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
| backgroundPosition | string | - | The value format is **x y**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%**.|
</td>
| transformOrigin | string | 'center center' | Origin position of the transformed element.<br>The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.<br>The second value indicates the y-axis position. The value can be **top**, **center**, **bottom**, a length, or a percentage.|
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p11199113144912"><a name="p11199113144912"></a><a name="p11199113144912"></a>Array of objects used to set animation attributes. For details, see <a href="#table703167514">Options</a>.</p>
| transform | [Transform](../arkui-js/js-components-common-animation.md) | - | Transformation type set for a transformed element. |
</td>
| offset | number | - | - The value of **offset** must be within (0.0, 1.0] and sorted in ascending order if it is provided.<br>- If there are only two frames, **offset** can be left empty.<br>- If there are more than two frames, **offset** is mandatory.|
| delay | number | 0 | Delay for the animation start. The default value indicates no delay. |
</th>
| iterations | number \| string | 1 | Number of times the animation will be played. **number** indicates a fixed number of playback operations, and **Infinity** indicates an unlimited number of playback operations.|
| direction<sup>6+</sup> | string | normal | Mode of playing the animation.<br>**normal**: Plays the animation in forward loop mode.<br>**reverse**: Plays the animation in reverse loop mode.<br>**alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction. <br>**alternate-reverse**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.|
</th>
| fill | string | none | Start and end styles of the animation.<br>**none**: No style is applied to the target before or after the animation is executed.<br>**forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.<br>**backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.<br>**both**: The animation follows the **forwards** and **backwards** rules.|
| ease-in | The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**.|
</td>
| ease-out | The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**.|
<td class="cellrowborder" valign="top" width="42.85428542854285%" headers="mcps1.2.4.1.3 "><p id="p2036224318436"><a name="p2036224318436"></a><a name="p2036224318436"></a>Array of objects used to set animation attributes. For details about style attributes, see <a href="#table15168543143">Style attributes</a>.</p>
| ease-in-out | The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)**.|
</td>
| friction | The animation uses the damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)**.|
</tr>
| extreme-deceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).|
</tbody>
| sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).|
</table>
| rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).|
| smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).|
**Table 2** Style attributes
| cubic-bezier(x1, y1, x2, y2) | You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1. |
| steps(number, step-position)<sup>6+</sup> | The animation uses the step curve.<br>The **number** must be set and only an integer is supported.<br>**step-position** is optional. It can be set to **start** or **end**. The default value is **end**.|
| pending | boolean | Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).|
</th>
| playState | string | Read-write attribute, which indicates the playback status of the animation:<br>- **idle**: The animation is not running (playback ended or not started).<br>- **running**: The animation is running.<br>- **paused**: The animation is paused.<br>- **finished**: Animation playback ends.|
</tr>
| startTime | number | Read-write attribute, which indicates the animation start time. This attribute is similar to **delay** in the **options** attribute. |
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p10169124310419"><a name="p10169124310419"></a><a name="p10169124310419"></a>Width set for the component during playback of the animation.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p1116914431443"><a name="p1116914431443"></a><a name="p1116914431443"></a>Height set for the component during playback of the animation.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p14170174320411"><a name="p14170174320411"></a><a name="p14170174320411"></a>Background color set for the component during playback of the animation.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p8170243142"><a name="p8170243142"></a><a name="p8170243142"></a>Opacity set for the component. The value ranges from <strong id="b76363459372"><a name="b76363459372"></a><a name="b76363459372"></a>0</strong> to <strong id="b1964116457373"><a name="b1964116457373"></a><a name="b1964116457373"></a>1</strong>.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p1217094313411"><a name="p1217094313411"></a><a name="p1217094313411"></a>The value format is <strong id="b49364643719"><a name="b49364643719"></a><a name="b49364643719"></a>x y</strong>, in percentage or pixels.</p>
}
<p id="p61701543144"><a name="p61701543144"></a><a name="p61701543144"></a>The first value indicates the horizontal position, and the second value indicates the vertical position.</p>
.box{
<p id="p917084315410"><a name="p917084315410"></a><a name="p917084315410"></a>If only one value is specified, the other value is <strong id="b2860446193717"><a name="b2860446193717"></a><a name="b2860446193717"></a>50%</strong> by default.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p3170643446"><a name="p3170643446"></a><a name="p3170643446"></a>Origin position of the transformed element.</p>
}
<p id="p817012431349"><a name="p817012431349"></a><a name="p817012431349"></a>The first value indicates the x-axis position. The value can be <strong id="b20914191218395"><a name="b20914191218395"></a><a name="b20914191218395"></a>left</strong>, <strong id="b16915141233913"><a name="b16915141233913"></a><a name="b16915141233913"></a>center</strong>, <strong id="b1591571233911"><a name="b1591571233911"></a><a name="b1591571233911"></a>right</strong>, a length, or a percentage.</p>
button{
<p id="p13170144310411"><a name="p13170144310411"></a><a name="p13170144310411"></a>The second value indicates the y-axis position. The value can be <strong id="b15935411173916"><a name="b15935411173916"></a><a name="b15935411173916"></a>top</strong>, <strong id="b994031111394"><a name="b994031111394"></a><a name="b994031111394"></a>center</strong>, <strong id="b19411111163910"><a name="b19411111163910"></a><a name="b19411111163910"></a>bottom</strong>, a length, or a percentage.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><p id="p18171174315410"><a name="p18171174315410"></a><a name="p18171174315410"></a>Transformation type set for a transformed element.</p>
<td class="cellrowborder" valign="top" width="41.9%" headers="mcps1.2.5.1.4 "><a name="ul1017119439418"></a><a name="ul1017119439418"></a><ul id="ul1017119439418"><li>The value of <strong id="b0754154863713"><a name="b0754154863713"></a><a name="b0754154863713"></a>offset</strong> must be within (0.0,1.0] and sorted in ascending order if it is provided.</li><li>If there are only two frames, <strong id="b10139164983712"><a name="b10139164983712"></a><a name="b10139164983712"></a>offset</strong> can be left empty.</li><li>If there are more than two frames, <strong id="b97100207390"><a name="b97100207390"></a><a name="b97100207390"></a>offset</strong> is mandatory.</li></ul>
<td class="cellrowborder" valign="top" width="35.33%" headers="mcps1.2.5.1.4 "><p id="p1011161458"><a name="p1011161458"></a><a name="p1011161458"></a>Duration for playing the animation, in milliseconds.</p>
<td class="cellrowborder" valign="top" width="35.33%" headers="mcps1.2.5.1.4 "><p id="p1615165512"><a name="p1615165512"></a><a name="p1615165512"></a>Time curve of the animation. For details about the supported types, see <a href="#table12317161054">Available values of the easing attribute</a>.</p>
<td class="cellrowborder" valign="top" width="35.33%" headers="mcps1.2.5.1.4 "><p id="p131616659"><a name="p131616659"></a><a name="p131616659"></a>Delay for the animation start. The default value indicates no delay.</p>
<td class="cellrowborder" valign="top" width="35.33%" headers="mcps1.2.5.1.4 "><p id="p32201615513"><a name="p32201615513"></a><a name="p32201615513"></a>Number of times the animation will be played. <strong id="b1119019523812"><a name="b1119019523812"></a><a name="b1119019523812"></a>number</strong> indicates a fixed number of playback operations, and <strong id="b319110563816"><a name="b319110563816"></a><a name="b319110563816"></a>Infinity</strong> indicates an unlimited number of playback operations.</p>
<td class="cellrowborder" valign="top" width="35.33%" headers="mcps1.2.5.1.4 "><p id="p9281612515"><a name="p9281612515"></a><a name="p9281612515"></a>Mode of playing the animation.</p>
<p id="p132101617517"><a name="p132101617517"></a><a name="p132101617517"></a><strong id="b661265611817"><a name="b661265611817"></a><a name="b661265611817"></a>normal</strong>: Plays the animation in forward loop mode.</p>
<p id="p3215161154"><a name="p3215161154"></a><a name="p3215161154"></a><strong id="b315117564199"><a name="b315117564199"></a><a name="b315117564199"></a>reverse</strong>: Plays the animation in reverse loop mode.</p>
<p id="p1321816454"><a name="p1321816454"></a><a name="p1321816454"></a><strong id="b01883517209"><a name="b01883517209"></a><a name="b01883517209"></a>alternate</strong>: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction. </p>
<p id="p22181618510"><a name="p22181618510"></a><a name="p22181618510"></a><strong id="b1122444132810"><a name="b1122444132810"></a><a name="b1122444132810"></a>alternate-reverse</strong>: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction. </p>
<td class="cellrowborder" valign="top" width="35.33%" headers="mcps1.2.5.1.4 "><p id="p102171619515"><a name="p102171619515"></a><a name="p102171619515"></a>Start and end styles of the animation.</p>
<p id="p14220167520"><a name="p14220167520"></a><a name="p14220167520"></a><strong id="b95102196241659"><a name="b95102196241659"></a><a name="b95102196241659"></a>none</strong>: No style is applied to the target before or after the animation is executed.</p>
<p id="p202916355"><a name="p202916355"></a><a name="p202916355"></a><strong id="b60720248341659"><a name="b60720248341659"></a><a name="b60720248341659"></a>forwards</strong>: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.</p>
<p id="p17211168516"><a name="p17211168516"></a><a name="p17211168516"></a><strong id="b46810291047"><a name="b46810291047"></a><a name="b46810291047"></a>backwards</strong><sup id="sup138811738182"><a name="sup138811738182"></a><a name="sup138811738182"></a>6+</sup>: The animation uses the value defined in the first key frame during the <strong id="b835517106516"><a name="b835517106516"></a><a name="b835517106516"></a>animation-delay</strong>. When <strong id="b133698551511"><a name="b133698551511"></a><a name="b133698551511"></a>animation-direction</strong> is set to <strong id="b2327558755"><a name="b2327558755"></a><a name="b2327558755"></a>normal</strong> or <strong id="b1599365910513"><a name="b1599365910513"></a><a name="b1599365910513"></a>alternate</strong>, the value in the <strong id="b451431119612"><a name="b451431119612"></a><a name="b451431119612"></a>from</strong> key frame is used. When <strong id="b167462211565"><a name="b167462211565"></a><a name="b167462211565"></a>animation-direction</strong> is set to <strong id="b122791361617"><a name="b122791361617"></a><a name="b122791361617"></a>reverse</strong> or <strong id="b63560395611"><a name="b63560395611"></a><a name="b63560395611"></a>alternate-reverse</strong>, the value in the <strong id="b19219491061"><a name="b19219491061"></a><a name="b19219491061"></a>to</strong> key frame is used.</p>
<p id="p13201614513"><a name="p13201614513"></a><a name="p13201614513"></a><strong id="b13700558762"><a name="b13700558762"></a><a name="b13700558762"></a>both</strong><sup id="sup1588111341817"><a name="sup1588111341817"></a><a name="sup1588111341817"></a>6+</sup>: The animation follows the <strong id="b693012181778"><a name="b693012181778"></a><a name="b693012181778"></a>forwards</strong> and <strong id="b991216202075"><a name="b991216202075"></a><a name="b991216202075"></a>backwards</strong> rules.</p>
</td>
</tr>
</tbody>
</table>
**Table 4** Available values of the easing attribute
<td class="cellrowborder" valign="top" width="62.06%" headers="mcps1.2.3.1.2 "><p id="p195121611510"><a name="p195121611510"></a><a name="p195121611510"></a>You can customize an animation speed curve in the <strong id="b55061643143812"><a name="b55061643143812"></a><a name="b55061643143812"></a>cubic-bezier()</strong> function. The x and y values of each input parameter must be between 0 and 1.</p>
<p id="p1359161455"><a name="p1359161455"></a><a name="p1359161455"></a>The <strong id="b1284724173817"><a name="b1284724173817"></a><a name="b1284724173817"></a>number</strong> must be set and only an integer is supported.</p>
<p id="p15519162512"><a name="p15519162512"></a><a name="p15519162512"></a><strong id="b1076620494398"><a name="b1076620494398"></a><a name="b1076620494398"></a>step-position</strong> is optional. It can be set to <strong id="b8772949153918"><a name="b8772949153918"></a><a name="b8772949153918"></a>start</strong> or <strong id="b377374953915"><a name="b377374953915"></a><a name="b377374953915"></a>end</strong>. The default value is <strong id="b177731949163918"><a name="b177731949163918"></a><a name="b177731949163918"></a>end</strong>.</p>
<td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="p11678185413534"><a name="p11678185413534"></a><a name="p11678185413534"></a>Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).</p>
<td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="p767885475320"><a name="p767885475320"></a><a name="p767885475320"></a>Read-write attribute, which indicates the playback status of the animation:</p>
<a name="ul467812544531"></a><a name="ul467812544531"></a><ul id="ul467812544531"><li><strong id="b111155323383"><a name="b111155323383"></a><a name="b111155323383"></a>idle</strong>: The animation is not running (playback ended or not started).</li><li><strong id="b16562194011527"><a name="b16562194011527"></a><a name="b16562194011527"></a>running</strong>: The animation is running.</li><li><strong id="b1262634712524"><a name="b1262634712524"></a><a name="b1262634712524"></a>paused</strong>: The animation is paused.</li><li><strong id="b9892827103810"><a name="b9892827103810"></a><a name="b9892827103810"></a>finished</strong>: Animation playback ends.</li></ul>
<td class="cellrowborder" valign="top" width="63.06%" headers="mcps1.1.4.1.3 "><p id="p1667855415532"><a name="p1667855415532"></a><a name="p1667855415532"></a>Read-write attribute, which indicates the animation start time. This attribute is similar to <strong id="b20841169134017"><a name="b20841169134017"></a><a name="b20841169134017"></a>delay</strong> in the <strong id="b1684113915405"><a name="b1684113915405"></a><a name="b1684113915405"></a>options</strong> attribute.</p>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p1051016719148"><a name="p1051016719148"></a><a name="p1051016719148"></a>Offset between the left boundary of the element and the window.</p>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p6510172148"><a name="p6510172148"></a><a name="p6510172148"></a>Offset between the upper boundary of the element and the window.</p>
</td>
</tr>
</tbody>
</table>
- Example
```
// xxx.js
var rect = this.$element('id').getBoundingClientRect();
console.info(`current element position is ${rect.left}, ${rect.top}`);
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p153551949101819"><a name="p153551949101819"></a><a name="p153551949101819"></a>When the component is out of the range or is less than the range, the observer callback is triggered.</p>
</td>
</tr>
</tbody>
</table>
- Return values
**Table 7** Methods supported by the Observer object<sup>6+</sup>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p750713361718"><a name="p750713361718"></a><a name="p750713361718"></a>Subscribes to events of the observed object. The callback method is called when the value is greater than or less than the threshold.</p>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p6507183311710"><a name="p6507183311710"></a><a name="p6507183311710"></a>Unsubscribes from events of the observed object.</p>
</td>
</tr>
</tbody>
</table>
- Example
```
// xxx.js
let observer = this.$element('broad').createIntersectionObserver({
ratios: [0.2, 0.5], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
})
observer.unobserve()
```
**Table 5** Rect<sup>6+</sup>
| Name | Type | Description |
| ------ | ------ | -------------- |
| width | number | Width of the element. |
| height | number | Height of the element. |
| left | number | Offset between the left boundary of the element and the window.|
| top | number | Offset between the upper boundary of the element and the window.|
| ratios | Array<number> | Range for triggering the observer callback. If the component is not within the range, the observer callback is triggered.|
| observe | callback: function | Subscribes to events of the observed object. The callback method is called when the value is greater than or less than the threshold.|
| unobserve | - | Unsubscribes from events of the observed object. |
<tdclass="cellrowborder"valign="top"width="42.54%"headers="mcps1.1.6.1.5 "><pid="p1788142954315"><aname="p1788142954315"></a><aname="p1788142954315"></a>Position of a number or dot badge. Available values are as follows:</p>
<aname="ul1388112944320"></a><aname="ul1388112944320"></a><ulid="ul1388112944320"><li><strongid="b3391219132117"><aname="b3391219132117"></a><aname="b3391219132117"></a>right</strong>: on the right border of the component.</li><li><strongid="b341442812510"><aname="b341442812510"></a><aname="b341442812510"></a>rightTop</strong>: in the upper right corner of the component border.</li><li><strongid="b101851310251"><aname="b101851310251"></a><aname="b101851310251"></a>left</strong>: on the left border of the component.</li></ul>
<tdclass="cellrowborder"valign="top"width="42.54%"headers="mcps1.1.6.1.5 "><pid="p19881229144313"><aname="p19881229144313"></a><aname="p19881229144313"></a>Number of notifications displayed via the badge. The default value is <strongid="b68878221295"><aname="b68878221295"></a><aname="b68878221295"></a>0</strong>. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.</p>
<divclass="note"id="note388629144318"><aname="note388629144318"></a><aname="note388629144318"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p488929174319"><aname="p488929174319"></a><aname="p488929174319"></a>When the <strongid="b107952317541"><aname="b107952317541"></a><aname="b107952317541"></a>count</strong> value is greater than the <strongid="b57744085419"><aname="b57744085419"></a><aname="b57744085419"></a>maxcount</strong> value, <emid="i136441735511"><aname="i136441735511"></a><aname="i136441735511"></a>maxcount</em><strongid="b135651010553"><aname="b135651010553"></a><aname="b135651010553"></a>+</strong> is displayed.</p>
<pid="p16106238105113"><aname="p16106238105113"></a><aname="p16106238105113"></a>The largest integer value supported for <strongid="b12402155411712"><aname="b12402155411712"></a><aname="b12402155411712"></a>count</strong> is <strongid="b3868192910710"><aname="b3868192910710"></a><aname="b3868192910710"></a>2147483647</strong>.</p>
<tdclass="cellrowborder"valign="top"width="42.54%"headers="mcps1.1.6.1.5 "><pid="p988112917435"><aname="p988112917435"></a><aname="p988112917435"></a>Whether to display the badge. The value <strongid="b15203113585411"><aname="b15203113585411"></a><aname="b15203113585411"></a>true</strong> means that the badge shows up when a new notification is received. To use a number badge, set the <strongid="b102697204598"><aname="b102697204598"></a><aname="b102697204598"></a>count</strong> attribute.</p>
<tdclass="cellrowborder"valign="top"width="42.54%"headers="mcps1.1.6.1.5 "><pid="p3881229164317"><aname="p3881229164317"></a><aname="p3881229164317"></a>Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, <emid="i205207517"><aname="i205207517"></a><aname="i205207517"></a>maxcount</em><strongid="b12397175512"><aname="b12397175512"></a><aname="b12397175512"></a>+</strong> is displayed, for example, <strongid="b19503636557"><aname="b19503636557"></a><aname="b19503636557"></a>99+</strong>.</p>
<divclass="note"id="note046285914515"><aname="note046285914515"></a><aname="note046285914515"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p114631559205118"><aname="p114631559205118"></a><aname="p114631559205118"></a>The largest integer value supported for <strongid="b138164151386"><aname="b138164151386"></a><aname="b138164151386"></a>maxcount</strong> is <strongid="b168231615682"><aname="b168231615682"></a><aname="b168231615682"></a>2147483647</strong>.</p>
<tdclass="cellrowborder"valign="top"width="42.54%"headers="mcps1.1.6.1.5 "><pid="p4890291437"><aname="p4890291437"></a><aname="p4890291437"></a>Configuration of the badge.</p>
<tdclass="cellrowborder"valign="top"width="42.54%"headers="mcps1.1.6.1.5 "><pid="p15894294432"><aname="p15894294432"></a><aname="p15894294432"></a>Text of the new notification displayed via the badge.</p>
<divclass="note"id="note168915299438"><aname="note168915299438"></a><aname="note168915299438"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p118982994316"><aname="p118982994316"></a><aname="p118982994316"></a>When this attribute is set, attributes <strongid="b133005251811"><aname="b133005251811"></a><aname="b133005251811"></a>count</strong> and <strongid="b1089219451819"><aname="b1089219451819"></a><aname="b1089219451819"></a>maxcount</strong> do not take effect.</p>
<tdclass="cellrowborder"valign="top"width="51.33%"headers="mcps1.2.6.1.5 "><pid="p12623249168"><aname="p12623249168"></a><aname="p12623249168"></a>Background color of the badge</p>
<tdclass="cellrowborder"valign="top"width="51.33%"headers="mcps1.2.6.1.5 "><pid="p196231461610"><aname="p196231461610"></a><aname="p196231461610"></a>Text color of the number badge</p>
<tdclass="cellrowborder"valign="top"width="51.33%"headers="mcps1.2.6.1.5 "><pid="p1962474101618"><aname="p1962474101618"></a><aname="p1962474101618"></a>Text size of the number badge</p>
<tdclass="cellrowborder"valign="top"width="51.33%"headers="mcps1.2.6.1.5 "><pid="p1962410411162"><aname="p1962410411162"></a><aname="p1962410411162"></a>Default size of the dot badge</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
Styles in [Universal Styles](js-components-common-styles.md) are supported.
>The total size of child components must be smaller than or equal to that of the **<badge\>** component. Otherwise, the child components cannot be displayed.
## Events<a name="section43461940193518"></a>
Events in [Universal Events](js-components-common-events.md) are supported.
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section3510104413431"></a>
```
## Attributes
In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
| count | number | 0 | No | Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute.|
| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>The largest integer value supported for **maxcount** is **2147483647**.|
| config | BadgeConfig | - | No | Configuration of the badge. |
| label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
**Table 1** BadgeConfig
| Name | Type | Default Value | Mandatory | Description |
| badgeColor | <color> | \#fa2a2d | No | Background color of the badge. |
| textColor | <color> | \#ffffff | No | Text color of the number badge.|
| textSize | <length> | 10px | No | Text size of the number badge.|
| badgeSize | <length> | 6px | No | Default size of the dot badge. |
## Styles
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
> **NOTE**
>
> The total size of child components must be smaller than or equal to that of the **<badge>** component. Otherwise, the child components cannot be displayed.
## Events
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
<tdclass="cellrowborder"valign="top"width="51.754824517548236%"headers="mcps1.1.6.1.5 "><pid="a692121725a9b4ebbae65cd22b94b672e"><aname="a692121725a9b4ebbae65cd22b94b672e"></a><aname="a692121725a9b4ebbae65cd22b94b672e"></a>Whether the pop-up can be dragged.</p>
>- The **<dialog\>** component does not support the **focusable** and **click-effect** attributes.
## Styles<a name="section5775351116"></a>
Only the **width**, **height**, **margin**, **margin-\[left|top|right|bottom\]**, and **margin-\[start|end\]** styles in [Universal Styles](js-components-common-styles.md) are supported.
## Events<a name="section8562129182916"></a>
Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event.
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p55621629122916"><aname="p55621629122916"></a><aname="p55621629122916"></a>Triggered when a user taps a non-dialog area to cancel the pop-up.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p204465311269"><aname="p204465311269"></a><aname="p204465311269"></a>Triggered when the pop-up is displayed.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p5848121742920"><aname="p5848121742920"></a><aname="p5848121742920"></a>Triggered when the pop-up is closed.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section11753103216253"></a>
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods.
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p0314958162512"><aname="p0314958162512"></a><aname="p0314958162512"></a>Shows a dialog box.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p10314105842512"><aname="p10314105842512"></a><aname="p10314105842512"></a>Closes a dialog box.</p>
| dragable<sup>7+</sup> | boolean | false | No | Whether the dialog box can be dragged.|
> **NOTE**
>
> The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
## Styles
Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
The following events are supported. The [universal events](../arkui-js/js-components-common-events.md) are not supported.
<tdclass="cellrowborder"valign="top"width="60.41604160416041%"headers="mcps1.1.4.1.3 "><pid="p8807102116392"><aname="p8807102116392"></a><aname="p8807102116392"></a>Triggered when the Submit button is touched.</p>
<tdclass="cellrowborder"valign="top"width="60.41604160416041%"headers="mcps1.1.4.1.3 "><pid="p2850758423"><aname="p2850758423"></a><aname="p2850758423"></a>Triggered when the Reset button is clicked.</p>
<tdclass="cellrowborder"valign="top"width="33.33333333333333%"headers="mcps1.2.4.1.3 "><pid="p1852512118411"><aname="p1852512118411"></a><aname="p1852512118411"></a>Values of <strongid="b194181133618"><aname="b194181133618"></a><aname="b194181133618"></a>name</strong> and <strongid="b1690145461"><aname="b1690145461"></a><aname="b1690145461"></a>value</strong> of the input element.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section1241545010391"></a>
```
## Attributes
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
## Styles
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| submit | FormResult | Triggered when the **Submit** button is touched.|
| reset | - | Triggered when the **Reset** button is clicked.|
**Table 1** FormResult
| Name| Type| Description|
| -------- | -------- | -------- |
| value | Object | Values of **name** and **value** of the input element.|
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
**<list-item\>** is a child component of the **<[list](js-components-container-list.md)\>** component and is used to display items in a list. You can customize the width of each **<list-item\>**. However, if you retain the default value **stretch** of **align-items** for the parent component **<list\>**, the width of **<list-item\>** is equal to that of **<list\>**. You can set **align-items** to other values rather than **stretch** to make the customized **<list-item-group\>** width take effect.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**\<list-item>** is a child component of the **[\<list>](../arkui-js/js-components-container-list.md)** component and is used to display items in a list. You can customize the width of each **\<list-item>**. However, if you retain the default value **stretch** of **align-items** for the parent component **\<list>**, the width of **\<list-item>** is equal to that of **\<list>**. To make the customized **\<list-item>** width take effect, set **align-items** to other values rather than **stretch**.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1595671312135"><aname="p1595671312135"></a><aname="p1595671312135"></a>Type of the list-item. A list can contain multiple list-item types. The same type of list items should have the same view layout after being rendered. When the type is fixed, replace the <strongid="b1152364710610"><aname="b1152364710610"></a><aname="b1152364710610"></a>if</strong> attribute with the <strongid="b8963450964"><aname="b8963450964"></a><aname="b8963450964"></a>show</strong> attribute to ensure that the view layout remains unchanged.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p995671314134"><aname="p995671314134"></a><aname="p995671314134"></a>The value <strongid="b133217164716"><aname="b133217164716"></a><aname="b133217164716"></a>true</strong> indicates that the item is the primary item in the group, which is the item that appears in a collapsed group. If there is more than one item marked as primary, the first one is the primary item. If there is no item marked as primary, the first item is the primary item.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p2956161391313"><aname="p2956161391313"></a><aname="p2956161391313"></a>String used to match this item. This attribute can be left empty. The value cannot be dynamically updated. In a list item group, only the string set for the primary item is valid.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p29571313131310"><aname="p29571313131310"></a><aname="p29571313131310"></a>Whether the current item sticks in place at the top, and the effect when it disappears. This attribute supports vertical lists only and is invalid for items in a group.</p>
<aname="ul69572137130"></a><aname="ul69572137130"></a><ulid="ul69572137130"><li><strongid="b13151921114"><aname="b13151921114"></a><aname="b13151921114"></a>none</strong>: The current item does not stick at the top.</li><li><strongid="b646332811"><aname="b646332811"></a><aname="b646332811"></a>normal</strong>: The current item sticks at the top and disappears with a sliding effect.</li><li><strongid="b20166151733418"><aname="b20166151733418"></a><aname="b20166151733418"></a>opacity</strong>: The current item sticks at the top and disappears gradually. This option is only supported on wearables.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p99581613141313"><aname="p99581613141313"></a><aname="p99581613141313"></a>Whether an effect is displayed when the current item is clicked.</p>
<aname="ul1958513101318"></a><aname="ul1958513101318"></a><ulid="ul1958513101318"><li><strongid="b206206251067"><aname="b206206251067"></a><aname="b206206251067"></a>false</strong>: No effect is displayed when the item is clicked.</li><li><strongid="b1974082612456"><aname="b1974082612456"></a><aname="b1974082612456"></a>true</strong>: An effect is displayed when the item is clicked.</li></ul>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p24821933921"><aname="p24821933921"></a><aname="p24821933921"></a>Number of columns occupied by the current list-item in the list. By default, the list-item occupies one column. This attribute is valid only when the list contains multiple columns.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section1948820711216"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="52.32523252325233%"headers="mcps1.1.4.1.3 "><pid="p3489773215"><aname="p3489773215"></a><aname="p3489773215"></a>Callback events for a sticky component.</p>
<pid="p44891171220"><aname="p44891171220"></a><aname="p44891171220"></a><strongid="b3628542811"><aname="b3628542811"></a><aname="b3628542811"></a>value: false</strong>: The current item is not in the sticky state.</p>
<pid="p74892071427"><aname="p74892071427"></a><aname="p74892071427"></a><strongid="b6657181394"><aname="b6657181394"></a><aname="b6657181394"></a>value: true</strong>: The current item is in the sticky state.</p>
<pid="p74895716210"><aname="p74895716210"></a><aname="p74895716210"></a>This event is supported only when the item is configured with the <strongid="b15560112218363"><aname="b15560112218363"></a><aname="b15560112218363"></a>sticky</strong> attribute.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section634316188515"></a>
For details, see the [list example code](js-components-container-list.md#example).
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| type | string | default | No| Type of the list-item. A list can contain multiple list-item types. The same type of list items should have the same view layout after being rendered. When the type is fixed, replace the **if** attribute with the **show** attribute to ensure that the view layout remains unchanged.|
| primary | boolean | false | No| Whether the item is the primary item in the group. The value **true** indicates that the item is the primary item in the group, which is the item that appears in a collapsed group. If there is more than one item marked as primary, the first one is the primary item. If there is no item marked as primary, the first item is the primary item.|
| section | string | - | No| String used to match the item. This attribute can be left empty. The value cannot be dynamically updated. In a list item group, only the string set for the primary item is valid.|
| sticky | string | none | No| Whether the current item sticks in place at the top, and the effect when it disappears. This attribute supports vertical lists only and is invalid for items in a group.<br>- **none**: The current item does not stick at the top.<br>- **normal**: The current item sticks at the top and disappears with a sliding effect.<br>- **opacity**: The current item sticks at the top and disappears gradually. This option is only supported on wearables.|
| clickeffect<sup>5+</sup> | boolean | true | No| Whether an effect is displayed when the current item is clicked.<br>- **false**: No effect is displayed when the item is clicked.<br>- **true**: An effect is displayed when the item is clicked.|
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| column-span | <number> | 1 | No| Number of columns occupied by the current list-item in the list. By default, the list-item occupies one column. This attribute is valid only when the list contains multiple columns.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| sticky | { state: boolean } | Callback event for a sticky component.<br>**value: false**: The current item is not in the sticky state.<br>**value: true**: The current item is in the sticky state.<br>This event is supported only when the item is configured with the **sticky** attribute.|
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example
For details, see [Example in list](../arkui-js/js-components-container-list.md#example).
The **<list\>** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
<[list-item](js-components-container-list-item-group.md)\> and <[list-item-group](js-components-container-list-item.md)\>
## Attributes<a name="section2907183951110"></a>
## Child Components
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
The **[\<list-item-group>](../arkui-js/js-components-container-list-item-group.md)** and **[\<list-item>](../arkui-js/js-components-container-list-item.md)** components are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p627473213585"><aname="p627473213585"></a><aname="p627473213585"></a>Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be <strongid="b1827263010156"><aname="b1827263010156"></a><aname="b1827263010156"></a>true</strong> (scrolls the non-list part out) or <strongid="b1020123281511"><aname="b1020123281511"></a><aname="b1020123281511"></a>false</strong> (does not scroll the non-list part out). This attribute is not available when the direction is <strongid="b661941418162"><aname="b661941418162"></a><aname="b661941418162"></a>row</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p02741932195811"><aname="p02741932195811"></a><aname="p02741932195811"></a>Minimum number of cached list items when the long list is loaded with delay.</p>
<pid="p182741432115814"><aname="p182741432115814"></a><aname="p182741432115814"></a>When the number of list items cached outside the visible area is less than the value of this attribute, a <strongid="b34911451101"><aname="b34911451101"></a><aname="b34911451101"></a>requestitem</strong> event is triggered.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p142744322587"><aname="p142744322587"></a><aname="p142744322587"></a>Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)</p>
<aname="ul162752325582"></a><aname="ul162752325582"></a><ulid="ul162752325582"><li><strongid="b067574210418"><aname="b067574210418"></a><aname="b067574210418"></a>off</strong>: No display</li><li><strongid="b694151664211"><aname="b694151664211"></a><aname="b694151664211"></a>auto</strong>: Displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.)</li><li><strongid="b19479834154210"><aname="b19479834154210"></a><aname="b19479834154210"></a>on</strong>: Always displayed</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1827516324585"><aname="p1827516324585"></a><aname="p1827516324585"></a>Scroll effect. Available values are as follows:</p>
<aname="ul13275532195819"></a><aname="ul13275532195819"></a><ulid="ul13275532195819"><li><strongid="b687114363370"><aname="b687114363370"></a><aname="b687114363370"></a>spring</strong>: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.</li><li><strongid="b767535112394"><aname="b767535112394"></a><aname="b767535112394"></a>fade</strong>: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.</li><li><strongid="b136381350114118"><aname="b136381350114118"></a><aname="b136381350114118"></a>no</strong>: No effect after the scrollbar is moved to the edge.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1127613275818"><aname="p1127613275818"></a><aname="p1127613275818"></a>Whether to display the alphabetical index bar on the sidebar. If this attribute is set to <strongid="b1035315299257"><aname="b1035315299257"></a><aname="b1035315299257"></a>true</strong> or a customized indexer, the index bar is displayed at the right boundary of the list. Example:</p>
<pid="p19276132105811"><aname="p19276132105811"></a><aname="p19276132105811"></a><strongid="b119841862711"><aname="b119841862711"></a><aname="b119841862711"></a>"indexer" : "true"</strong> indicates the default alphabetical indexer.</p>
<pid="p10276133295813"><aname="p10276133295813"></a><aname="p10276133295813"></a><strongid="b158642216272"><aname="b158642216272"></a><aname="b158642216272"></a>"indexer" : "false"</strong> indicates no indexer.</p>
<pid="p1027643295815"><aname="p1027643295815"></a><aname="p1027643295815"></a>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include <strongid="b095305716565"><aname="b095305716565"></a><aname="b095305716565"></a>"#"</strong> when using a customized indexer.</p>
<divclass="note"id="note1752771418501"><aname="note1752771418501"></a><aname="note1752771418501"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><aname="ul55231518155017"></a><aname="ul55231518155017"></a><ulid="ul55231518155017"><li>This attribute is valid only when <strongid="b15581134072810"><aname="b15581134072810"></a><aname="b15581134072810"></a>flex-direction</strong> is set to <strongid="b13563344132812"><aname="b13563344132812"></a><aname="b13563344132812"></a>column</strong> and <strongid="b1047494711284"><aname="b1047494711284"></a><aname="b1047494711284"></a>columns</strong> is set to <strongid="b2312249162819"><aname="b2312249162819"></a><aname="b2312249162819"></a>1</strong>.</li><li>This attribute must be used together with the <ahref="js-components-container-list-item.md#section2907183951110">section</a> attribute of <strongid="b562515564293"><aname="b562515564293"></a><aname="b562515564293"></a><list-item></strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1898916471451"><aname="p1898916471451"></a><aname="p1898916471451"></a>Whether to use a circle indexer.</p>
<pid="p10513447125316"><aname="p10513447125316"></a><aname="p10513447125316"></a>The default value is <strongid="b337272111448"><aname="b337272111448"></a><aname="b337272111448"></a>true</strong> for wearables and <strongid="b83154814105"><aname="b83154814105"></a><aname="b83154814105"></a>false</strong> for other device types. This attribute is invalid if <strongid="b155631448185810"><aname="b155631448185810"></a><aname="b155631448185810"></a>indexer</strong> is set to <strongid="b115688487588"><aname="b115688487588"></a><aname="b115688487588"></a>false</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1768357350"><aname="p1768357350"></a><aname="p1768357350"></a>Whether to use a multi-language indexer.</p>
<pid="p57061219500"><aname="p57061219500"></a><aname="p57061219500"></a>This attribute is invalid if <strongid="b18235164351416"><aname="b18235164351416"></a><aname="b18235164351416"></a>indexer</strong> is set to <strongid="b223554316147"><aname="b223554316147"></a><aname="b223554316147"></a>false</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p15708185468"><aname="p15708185468"></a><aname="p15708185468"></a>Whether to display the bubble effect when switching among indexes.</p>
<pid="p12366132614518"><aname="p12366132614518"></a><aname="p12366132614518"></a>This attribute is invalid if <strongid="b3399153701610"><aname="b3399153701610"></a><aname="b3399153701610"></a>indexer</strong> is set to <strongid="b14404237151617"><aname="b14404237151617"></a><aname="b14404237151617"></a>false</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p111882182061"><aname="p111882182061"></a><aname="p111882182061"></a>Whether list items are separated by dividers.</p>
<pid="p20914284518"><aname="p20914284518"></a><aname="p20914284518"></a>For details about divider styles, see <strongid="b1680911361100"><aname="b1680911361100"></a><aname="b1680911361100"></a>divider-color</strong>, <strongid="b270113916020"><aname="b270113916020"></a><aname="b270113916020"></a>divider-height</strong>, <strongid="b312394211012"><aname="b312394211012"></a><aname="b312394211012"></a>divider-length</strong>, and <strongid="b17431644908"><aname="b17431644908"></a><aname="b17431644908"></a>divider-origin</strong> in the <ahref="../../nottoctopics/en-us_topic_0000001131154746.md#section1071433432218">Styles</a> table.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p182761532205818"><aname="p182761532205818"></a><aname="p182761532205818"></a>Shape of the side scrollbar.</p>
<aname="ul4276203212589"></a><aname="ul4276203212589"></a><ulid="ul4276203212589"><li><strongid="b1694164924312"><aname="b1694164924312"></a><aname="b1694164924312"></a>default</strong>: not specified (following the theme)</li><li><strongid="b4888059134313"><aname="b4888059134313"></a><aname="b4888059134313"></a>rect</strong>: rectangle</li><li><strongid="b631715664410"><aname="b631715664410"></a><aname="b631715664410"></a>round</strong>: circle</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p3278032145815"><aname="p3278032145815"></a><aname="p3278032145815"></a>Whether a dynamic effect is displayed when an item in the list is deleted or added.</p>
<aname="ul8278153205815"></a><aname="ul8278153205815"></a><ulid="ul8278153205815"><li><strongid="b1406192914574"><aname="b1406192914574"></a><aname="b1406192914574"></a>false</strong>: No dynamic effect is displayed.</li><li><strongid="b139515324582"><aname="b139515324582"></a><aname="b139515324582"></a>true</strong>: A dynamic effect is displayed when an item is added or deleted.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p78841255154210"><aname="p78841255154210"></a><aname="p78841255154210"></a>Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.</p>
<aname="ul1490293714519"></a><aname="ul1490293714519"></a><ulid="ul1490293714519"><li><strongid="b19321195416183"><aname="b19321195416183"></a><aname="b19321195416183"></a>false</strong>: Chained animations are displayed.</li><li><strongid="b1493073215190"><aname="b1493073215190"></a><aname="b1493073215190"></a>true</strong>: No chained animation is displayed.<divclass="note"id="note775214910343"><aname="note775214910343"></a><aname="note775214910343"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><aname="ul99031432111819"></a><aname="ul99031432111819"></a><ulid="ul99031432111819"><li>Dynamic modification is not supported.</li><li>This attribute does not take effect if an indexer is used.</li><li>If this attribute is <strongid="b93341294243"><aname="b93341294243"></a><aname="b93341294243"></a>true</strong>, the <strongid="b123631857114410"><aname="b123631857114410"></a><aname="b123631857114410"></a>sticky</strong> attributes set for <strongid="b17762181514469"><aname="b17762181514469"></a><aname="b17762181514469"></a><list-item></strong> components do not take effect.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p19236720152515"><aname="p19236720152515"></a><aname="p19236720152515"></a>Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is <strongid="b1823682018251"><aname="b1823682018251"></a><aname="b1823682018251"></a>0</strong>, indicating that the first item is displayed.</p>
<pid="p16604922152515"><aname="p16604922152515"></a><aname="p16604922152515"></a>The setting does not take effect in any of the following cases:</p>
<aname="ul920222662516"></a><aname="ul920222662516"></a><ulid="ul920222662516"><li>The value you set is greater than the index of the last item.</li><li>The <strongid="b39045241265"><aname="b39045241265"></a><aname="b39045241265"></a>initialoffset</strong> attribute is set.</li><li><strongid="b102021626202510"><aname="b102021626202510"></a><aname="b102021626202510"></a>indexer</strong> or <strongid="b1420282652515"><aname="b1420282652515"></a><aname="b1420282652515"></a>scrollpage</strong> is set to <strongid="b192021826132518"><aname="b192021826132518"></a><aname="b192021826132518"></a>true</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p327920329582"><aname="p327920329582"></a><aname="p327920329582"></a>Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if <strongid="b519019121326"><aname="b519019121326"></a><aname="b519019121326"></a>indexer</strong> or <strongid="b519531213210"><aname="b519531213210"></a><aname="b519531213210"></a>scrollpage</strong> is set to <strongid="b121953129219"><aname="b121953129219"></a><aname="b121953129219"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p11147853145914"><aname="p11147853145914"></a><aname="p11147853145914"></a>Selected item in the current list. The value can be a <strongid="b19508174512249"><aname="b19508174512249"></a><aname="b19508174512249"></a>section</strong> value of any list items.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
## Attributes
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
<aname="table1744514388541"></a>
| Name | Type | Default Value | Mandatory | Description |
| scrollpage | boolean | false | No | Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be **true** (scrolls the non-list part out) or **false** (does not scroll the non-list part out). This attribute is not available when the direction is **row**.|
| cachedcount | number | 0 | No | Minimum number of cached list items when a long list is loaded with delay.<br>When the number of list items cached outside the visible area is less than the value of this attribute, a **requestitem** event is triggered.|
</th>
| scrollbar | string | off | No | Display mode of the side scrollbar. (Currently, only the vertical scrollbar is supported.)<br>- **off**: no display.<br>- **auto**: displayed on demand (The side scrollbar is displayed when touched and disappears 2s later.).<br>- **on**: always displayed.|
| scrolleffect | string | spring | No | Scroll effect. Available values are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.<br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **no**: No effect after the scrollbar is moved to the edge.|
</th>
| indexer | boolean \| Array<string> | false | No | Whether to display the alphabetical index bar on the sidebar. If this attribute is set to **true** or a customized indexer, the index bar is displayed at the right boundary of the list. Example:<br>**"indexer" : "true"** indicates the default alphabetical indexer.<br>**"indexer" : "false"** indicates no indexer.<br>"indexer": ['#', '1', '2', '3', '4', '5', '6', '7', '8'] indicates a customized index. You must include **"#"** when using a customized indexer.<br>This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.<br>This attribute must be used together with the **[section](../arkui-js/js-components-container-list-item.md#attributes)** attribute of **\<list-item>**.|
| indexercircle<sup>5+</sup> | boolean | - | No | Whether to use a circle indexer.<br>The default value is **true** for wearables and **false** for other device types. This attribute is invalid if **indexer** is set to **false**.|
</th>
| indexermulti<sup>5+</sup> | boolean | false | No | Whether to use a multi-language indexer.<br>This attribute is invalid if **indexer** is set to **false**. |
| indexerbubble<sup>5+</sup> | boolean | true | No | Whether to display the bubble effect when switching among indexes.<br>This attribute is invalid if **indexer** is set to **false**. |
</th>
| divider<sup>5+</sup> | boolean | false | No | Whether list items are separated by dividers.<br>For details about divider styles, see **divider-color**, **divider-height**, **divider-length**, and **divider-origin** in the **Styles** table.|
</tr>
| shapemode | string | default | No | Shape of the side scrollbar.<br>- **default**: not specified (following the theme).<br>- **rect**: rectangle.<br>- **round**: circle.|
</thead>
| updateeffect | boolean | false | No | Whether a dynamic effect is displayed when an item in the list is deleted or added.<br>- **false**: No dynamic effect is displayed.<br>- **true**: A dynamic effect is displayed when an item is added or deleted.|
| chainanimation<sup>5+</sup> | boolean | false | No | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>- **false**: Chained animations are displayed.<br>- **true**: No chained animation is displayed.<br>Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>This attribute does not take effect if an indexer is used.<br>If this attribute is **true**, the **sticky** attributes set for **\<list-item>** components do not take effect.|
</td>
| initialindex | number | 0 | No | Item displayed at the start position of the viewport when the current list is loaded for the first time. The default value is **0**, indicating that the first item is displayed. If the number you set is greater than the index of the last item, the setting does not take effect. When the **initialoffset** attribute is set, this attribute does not take effect. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
| initialoffset | <length> | 0 | No | Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if **indexer** or **scrollpage** is set to **true**.|
</td>
| selected<sup>5+</sup> | string | - | No | Selected item in the current list. The value can be a **section** value of any list items.|
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1397215441382"><aname="p1397215441382"></a><aname="p1397215441382"></a>Item divider color. This style is valid only when the <strongid="b1297030161517"><aname="b1297030161517"></a><aname="b1297030161517"></a>divider</strong> attribute of <strongid="b5742145113148"><aname="b5742145113148"></a><aname="b5742145113148"></a><list></strong> is set to <strongid="b1358345714144"><aname="b1358345714144"></a><aname="b1358345714144"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p10983561383"><aname="p10983561383"></a><aname="p10983561383"></a>Item divider height. This style is valid only when the <strongid="b11937127141512"><aname="b11937127141512"></a><aname="b11937127141512"></a>divider</strong> attribute of <strongid="b189375713157"><aname="b189375713157"></a><aname="b189375713157"></a><list></strong> is set to <strongid="b69387717151"><aname="b69387717151"></a><aname="b69387717151"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="8.869113088691131%"headers="mcps1.1.6.1.3 "><pid="p0440741193"><aname="p0440741193"></a><aname="p0440741193"></a>The main axis width</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p10440341697"><aname="p10440341697"></a><aname="p10440341697"></a>Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the <strongid="b11621155518258"><aname="b11621155518258"></a><aname="b11621155518258"></a>divider-origin</strong> parameter. This style is valid only when the <strongid="b68621714152610"><aname="b68621714152610"></a><aname="b68621714152610"></a>divider</strong> attribute of <strongid="b189911656201616"><aname="b189911656201616"></a><aname="b189911656201616"></a><list></strong> is set to <strongid="b1040015185263"><aname="b1040015185263"></a><aname="b1040015185263"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p42327191895"><aname="p42327191895"></a><aname="p42327191895"></a>Item divider offset relative to the start point of the main axis. This style is valid only when the <strongid="b194511311204618"><aname="b194511311204618"></a><aname="b194511311204618"></a>divider</strong> attribute of <strongid="b16151347170"><aname="b16151347170"></a><aname="b16151347170"></a><list></strong> is set to <strongid="b13844149467"><aname="b13844149467"></a><aname="b13844149467"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p172837654814"><aname="p172837654814"></a><aname="p172837654814"></a>Main axis direction of the flex container. It specifies how items are placed in the flex container.</p>
<aname="ul132831763482"></a><aname="ul132831763482"></a><ulid="ul132831763482"><li><strongid="b195531457856"><aname="b195531457856"></a><aname="b195531457856"></a>column</strong>: The y-axis is the maim axis.</li><li><strongid="b1454210619720"><aname="b1454210619720"></a><aname="b1454210619720"></a>row</strong>: The x-axis is the main axis.</li></ul>
<pid="p132831263486"><aname="p132831263486"></a><aname="p132831263486"></a>For the <strongid="b587519315312"><aname="b587519315312"></a><aname="b587519315312"></a><list></strong> component, the default value is <strongid="b2766193510313"><aname="b2766193510313"></a><aname="b2766193510313"></a>column</strong>. For other components, the default value is <strongid="b1853133913313"><aname="b1853133913313"></a><aname="b1853133913313"></a>row</strong>. </p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1928418624820"><aname="p1928418624820"></a><aname="p1928418624820"></a>Number of columns displayed in the cross axis direction of the list. The default value is <strongid="b106911824153820"><aname="b106911824153820"></a><aname="b106911824153820"></a>1</strong>.</p>
<divclass="note"id="note87762014175811"><aname="note87762014175811"></a><aname="note87762014175811"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p157761214205810"><aname="p157761214205810"></a><aname="p157761214205810"></a>When multiple columns are set, the columns are evenly distributed on the cross axis of the <strongid="b20419145511271"><aname="b20419145511271"></a><aname="b20419145511271"></a><list></strong> component. The size of each column is the same.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p9617542124318"><aname="p9617542124318"></a><aname="p9617542124318"></a>Alignment of items in each column on the cross axis. Available values are as follows:</p>
<aname="ul166171442134312"></a><aname="ul166171442134312"></a><ulid="ul166171442134312"><li><strongid="b162552382282"><aname="b162552382282"></a><aname="b162552382282"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strongid="b534154612815"><aname="b534154612815"></a><aname="b534154612815"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b12116104832812"><aname="b12116104832812"></a><aname="b12116104832812"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b16621855132813"><aname="b16621855132813"></a><aname="b16621855132813"></a>center</strong>: Items are aligned in the middle of the cross axis.<divclass="note"id="note10891229703"><aname="note10891229703"></a><aname="note10891229703"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p18891029105"><aname="p18891029105"></a><aname="p18891029105"></a>This style takes effect only on items of each column. Columns are evenly distributed.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p18284660488"><aname="p18284660488"></a><aname="p18284660488"></a>Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p428518694818"><aname="p428518694818"></a><aname="p428518694818"></a>Color of the physical dynamic effect. This attribute is valid only when <strongid="b1640719118429"><aname="b1640719118429"></a><aname="b1640719118429"></a>scrolleffect</strong> is set to <strongid="b1941331114423"><aname="b1941331114423"></a><aname="b1941331114423"></a>fade</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p14300165317215"><aname="p14300165317215"></a><aname="p14300165317215"></a>Color of the scrollbar.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p533510595217"><aname="p533510595217"></a><aname="p533510595217"></a>Width of the scrollbar.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p17972694239"><aname="p17972694239"></a><aname="p17972694239"></a>Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section471854810515"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Styles
<aname="table12718648205119"></a>
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1871920489510"><aname="p1871920489510"></a><aname="p1871920489510"></a>Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both <strongid="b16937844815"><aname="b16937844815"></a><aname="b16937844815"></a>indexer</strong> and <strongid="b239116138814"><aname="b239116138814"></a><aname="b239116138814"></a>indexermulti</strong> are set to <strongid="b14371161515817"><aname="b14371161515817"></a><aname="b14371161515817"></a>true</strong>. The value of <strongid="b122409572813"><aname="b122409572813"></a><aname="b122409572813"></a>booleanValue</strong> can be:</p>
<aname="ul18719104820516"></a><aname="ul18719104820516"></a><ulid="ul18719104820516"><li><strongid="b6542135618131"><aname="b6542135618131"></a><aname="b6542135618131"></a>true</strong>: The local index is displayed.</li><li><strongid="b17362155812135"><aname="b17362155812135"></a><aname="b17362155812135"></a>false</strong>: The alphabetic index is displayed.</li></ul>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1571914895114"><aname="p1571914895114"></a><aname="p1571914895114"></a>Triggered to indicate the offset and status of list scrolling.</p>
<pid="p13719164815112"><aname="p13719164815112"></a><aname="p13719164815112"></a><strongid="b19254154542413"><aname="b19254154542413"></a><aname="b19254154542413"></a>stateValue: 0</strong>: The list is not scrolling.</p>
<pid="p1719154885113"><aname="p1719154885113"></a><aname="p1719154885113"></a><strongid="b679923542516"><aname="b679923542516"></a><aname="b679923542516"></a>stateValue: 1</strong>: The list is scrolling along with user's touches.</p>
<pid="p8719148105112"><aname="p8719148105112"></a><aname="p8719148105112"></a><strongid="b6111123911267"><aname="b6111123911267"></a><aname="b6111123911267"></a>stateValue: 2</strong>: The list is scrolling after the touches stop.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p371984855113"><aname="p371984855113"></a><aname="p371984855113"></a>Triggered when the list is scrolled to the bottom.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p127193483517"><aname="p127193483517"></a><aname="p127193483517"></a>Triggered when the list is scrolled to the top.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1472054895112"><aname="p1472054895112"></a><aname="p1472054895112"></a>Triggered when the list stops scrolling.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p17720548105118"><aname="p17720548105118"></a><aname="p17720548105118"></a>Triggered when the list continues scrolling after the user lifts their fingers.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p272034815115"><aname="p272034815115"></a><aname="p272034815115"></a>Triggered for a request to create a list-item.</p>
<pid="p1372014820516"><aname="p1372014820516"></a><aname="p1372014820516"></a>This event is triggered when the number of cached list-items outside the visible area is less than the value of <strongid="b1137011348317"><aname="b1137011348317"></a><aname="b1137011348317"></a>cachedcount</strong> during long list loading with delay.</p>
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p1135419179146"><aname="p1135419179146"></a><aname="p1135419179146"></a>{ rotateValue: number }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1835471721415"><aname="p1835471721415"></a><aname="p1835471721415"></a>Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section47669296127"></a>
| Name | Type | Default Value | Mandatory | Description |
| divider-color<sup>5+</sup> | <color> | transparent | No | Item divider color. This style is valid only when the **divider** attribute of **<list>** is set to **true**. |
| divider-height<sup>5+</sup> | <length> | 1 | No | Item divider height. This style is valid only when the **divider** attribute of **<list>** is set to **true**. |
| divider-length<sup>5+</sup> | <length> | Main axis width | No | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
| divider-origin<sup>5+</sup> | <length> | 0 | No | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
| flex-direction | string | column | No | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the main axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**.|
| columns | number | 1 | No | Number of columns displayed in the cross axis direction of the list. The default value is **1**.<br>When multiple columns are set, the columns are evenly distributed on the cross axis of the **\<list>** component. The size of each column is the same.|
| align-items | string | stretch | No | Alignment of items in each column on the cross axis. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>This style takes effect only on items of each column. Columns are evenly distributed.|
| item-extent | <length>\|<percentage> | - | No | Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint.|
| fade-color | <color> | grey | No | Color of the physical dynamic effect. This attribute is valid only when **scrolleffect** is set to **fade**. |
| scrollbar-color<sup>6+</sup> | <color> | - | No | Color of the scrollbar. |
| scrollbar-width<sup>6+</sup> | <length> | - | No | Width of the scrollbar. |
| scrollbar-offset<sup>6+</sup> | <length> | 0 | No | Offset between the scrollbar and the default position of the list. The value must be a positive number. The default position is on the right edge of the list. You can adjust the horizontal position of the scrollbar by setting this offset. If the scrollbar is drawn outside the list and the parent component of the list is capable of cropping, the scrollbar will be cropped.|
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="a75c53230ef704966b5b25d2e2606584f"><aname="a75c53230ef704966b5b25d2e2606584f"></a><aname="a75c53230ef704966b5b25d2e2606584f"></a>Scrolls the list to the position of the item at the specified index.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="a5a3997da89d649f0ac1c71461d953294"><aname="a5a3997da89d649f0ac1c71461d953294"></a><aname="a5a3997da89d649f0ac1c71461d953294"></a>Scrolls the list for a certain distance.</p>
<pid="a0767362b2b4a4535a06cb42e483b14cd"><aname="a0767362b2b4a4535a06cb42e483b14cd"></a><aname="a0767362b2b4a4535a06cb42e483b14cd"></a>This method applies only to smart TVs.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p1466520168521"><aname="p1466520168521"></a><aname="p1466520168521"></a>If <strongid="b984720142292"><aname="b984720142292"></a><aname="b984720142292"></a>smooth</strong> is set to <strongid="b2026210453280"><aname="b2026210453280"></a><aname="b2026210453280"></a>false</strong> (default value), the list is directly scrolled to the top.</p>
<pid="p1166519160524"><aname="p1166519160524"></a><aname="p1166519160524"></a>If <strongid="b3593012162913"><aname="b3593012162913"></a><aname="b3593012162913"></a>smooth</strong> is set to <strongid="b1085141612919"><aname="b1085141612919"></a><aname="b1085141612919"></a>true</strong>, the list is smoothly scrolled to the top.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p1966571635219"><aname="p1966571635219"></a><aname="p1966571635219"></a>If <strongid="b1850718335307"><aname="b1850718335307"></a><aname="b1850718335307"></a>smooth</strong> is set to <strongid="b155131133173012"><aname="b155131133173012"></a><aname="b155131133173012"></a>false</strong> (default value), the list is directly scrolled to the bottom.</p>
<pid="p1566513161529"><aname="p1566513161529"></a><aname="p1566513161529"></a>If <strongid="b92856582554"><aname="b92856582554"></a><aname="b92856582554"></a>smooth</strong> is set to <strongid="b1285858195517"><aname="b1285858195517"></a><aname="b1285858195517"></a>true</strong>, the list is smoothly scrolled to the bottom.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p156651016205211"><aname="p156651016205211"></a><aname="p156651016205211"></a>If <strongid="b4550185811294"><aname="b4550185811294"></a><aname="b4550185811294"></a>reverse</strong> is set to <strongid="b117247306"><aname="b117247306"></a><aname="b117247306"></a>false</strong> (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.</p>
<pid="p11665141617522"><aname="p11665141617522"></a><aname="p11665141617522"></a>If <strongid="b930919101316"><aname="b930919101316"></a><aname="b930919101316"></a>reverse</strong> is set to <strongid="b143091510103117"><aname="b143091510103117"></a><aname="b143091510103117"></a>true</strong>, the previous page is displayed. If there is no previous page, the list scrolls to the top.</p>
<pid="p466513161522"><aname="p466513161522"></a><aname="p466513161522"></a>If <strongid="b21022056123111"><aname="b21022056123111"></a><aname="b21022056123111"></a>smooth</strong> is set to <strongid="b16107155643115"><aname="b16107155643115"></a><aname="b16107155643115"></a>false</strong> (default value), the list is directly scrolled to another page.</p>
<pid="p5665131615528"><aname="p5665131615528"></a><aname="p5665131615528"></a>If <strongid="b115833242327"><aname="b115833242327"></a><aname="b115833242327"></a>smooth</strong> is set to <strongid="b1058832493214"><aname="b1058832493214"></a><aname="b1058832493214"></a>true</strong>, the list is smoothly scrolled to another page.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p1966551617521"><aname="p1966551617521"></a><aname="p1966551617521"></a>If <strongid="b1549291018335"><aname="b1549291018335"></a><aname="b1549291018335"></a>reverse</strong> is set to <strongid="b20492111023311"><aname="b20492111023311"></a><aname="b20492111023311"></a>false</strong> (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.</p>
<pid="p266511168524"><aname="p266511168524"></a><aname="p266511168524"></a>If <strongid="b5940743113413"><aname="b5940743113413"></a><aname="b5940743113413"></a>reverse</strong> is set to <strongid="b5940243133413"><aname="b5940243133413"></a><aname="b5940243133413"></a>true</strong>, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.</p>
<pid="p466510161529"><aname="p466510161529"></a><aname="p466510161529"></a>If <strongid="b3360148173519"><aname="b3360148173519"></a><aname="b3360148173519"></a>smooth</strong> is set to <strongid="b436188123520"><aname="b436188123520"></a><aname="b436188123520"></a>false</strong> (default value), the list is directly scrolled.</p>
<pid="p966561612526"><aname="p966561612526"></a><aname="p966561612526"></a>If <strongid="b914072419593"><aname="b914072419593"></a><aname="b914072419593"></a>smooth</strong> is set to <strongid="b5146224175917"><aname="b5146224175917"></a><aname="b5146224175917"></a>true</strong>, the list is smoothly scrolled.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p206661165523"><aname="p206661165523"></a><aname="p206661165523"></a>Collapses a group.</p>
<pid="p15666516205215"><aname="p15666516205215"></a><aname="p15666516205215"></a><strongid="b15480175617355"><aname="b15480175617355"></a><aname="b15480175617355"></a>groupid</strong>: ID of the group to collapse.</p>
<pid="p1566613167526"><aname="p1566613167526"></a><aname="p1566613167526"></a>All groups are collapsed when <strongid="b717013733612"><aname="b717013733612"></a><aname="b717013733612"></a>groupid</strong> is not specified.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p11666816135210"><aname="p11666816135210"></a><aname="p11666816135210"></a>Expands a group.</p>
<pid="p1766615169528"><aname="p1766615169528"></a><aname="p1766615169528"></a><strongid="b15511066374"><aname="b15511066374"></a><aname="b15511066374"></a>groupid</strong>: ID of the group to expand.</p>
<pid="p1766616164528"><aname="p1766616164528"></a><aname="p1766616164528"></a>All groups are expanded when <strongid="b692019124376"><aname="b692019124376"></a><aname="b692019124376"></a>groupid</strong> is not specified.</p>
<tdclass="cellrowborder"valign="top"width="51%"headers="mcps1.1.4.1.3 "><pid="p8563144914534"><aname="p8563144914534"></a><aname="p8563144914534"></a>Returns the offset of the current scrolling. The return value type is <strongid="b619148183811"><aname="b619148183811"></a><aname="b619148183811"></a>Object</strong>. For details, see <ahref="#table1145513617576">Table 2</a>.</p>
</td>
</tr>
</tbody>
</table>
**Table 1** ScrollParam
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| indexerchange<sup>5+</sup> | { local: booleanValue } | Triggered when the indexer switches between local and alphabetic indexers. This parameter takes effect only when both **indexer** and **indexermulti** are set to **true**. The values of **booleanValue** can be:<br>- **true**: The local index is displayed.<br>- **false**: The alphabetic index is displayed.|
| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | Triggered to indicate the offset and status of list scrolling.<br>**stateValue: 0**: The list is not scrolling.<br>**stateValue: 1**: The list is scrolling along with user's touches.<br>**stateValue: 2**: The list is scrolling after the touches stop.|
</th>
| scrollbottom | - | Triggered when the list is scrolled to the bottom. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
</th>
| requestitem | - | Triggered for a request to create a list-item.<br>This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay.|
| rotate<sup>7+</sup> | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. |
<tdclass="cellrowborder"valign="top"width="21.000000000000004%"headers="mcps1.2.6.1.5 "><pid="aaffe44e874d74b6297ea7841258cb941"><aname="aaffe44e874d74b6297ea7841258cb941"></a><aname="aaffe44e874d74b6297ea7841258cb941"></a>Offset for scrolling the list in the horizontal direction, in px.</p>
<tdclass="cellrowborder"valign="top"width="21.000000000000004%"headers="mcps1.2.6.1.5 "><pid="ade99317ad7354fee8e88ca282cf70446"><aname="ade99317ad7354fee8e88ca282cf70446"></a><aname="ade99317ad7354fee8e88ca282cf70446"></a>Offset for scrolling the list in the vertical direction, in px.</p>
<tdclass="cellrowborder"valign="top"width="21.000000000000004%"headers="mcps1.2.6.1.5 "><pid="a1a8906b49d5e48f98a068f339df880e9"><aname="a1a8906b49d5e48f98a068f339df880e9"></a><aname="a1a8906b49d5e48f98a068f339df880e9"></a>Whether a sliding animation is displayed when the list position is changed.</p>
</td>
</tr>
</tbody>
</table>
**Table 2** Attributes of the currentOffset return object
| scrollTo | { index: number(specified position) } | Scrolls the list to the position of the item at the specified index. |
</tr>
| scrollTop | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the top.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the top.|
</thead>
| scrollBottom | { smooth: boolean } | If **smooth** is set to **false** (default value), the list is directly scrolled to the bottom.<br>If **smooth** is set to **true**, the list is smoothly scrolled to the bottom.|
| scrollPage | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the previous page is displayed. If there is no previous page, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled to another page.<br>If **smooth** is set to **true**, the list is smoothly scrolled to another page.|
</td>
| scrollArrow | { reverse: boolean, smooth: boolean } | If **reverse** is set to **false** (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.<br>If **reverse** is set to **true**, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.<br>If **smooth** is set to **false** (default value), the list is directly scrolled.<br>If **smooth** is set to **true**, the list is smoothly scrolled.|
| collapseGroup | { groupid: string } | Collapses a group.<br>**groupid**: ID of the group to collapse.<br>All groups are collapsed when **groupid** is not specified.|
</td>
| expandGroup | { groupid: string } | Expands a group.<br>**groupid**: ID of the group to expand.<br>All groups are expanded when **groupid** is not specified.|
<tdclass="cellrowborder"valign="top"width="38.18%"headers="mcps1.2.4.1.3 "><pid="p19456436165717"><aname="p19456436165717"></a><aname="p19456436165717"></a>Scrolling offset in the x-axis, in px</p>
| currentOffset | - | Returns the offset of the current scrolling. The return value type is Object. For details, see **currentOffset**.|
| x | number | Scrolling offset in the x-axis, in px|
<tdclass="cellrowborder"valign="top"width="38.18%"headers="mcps1.2.4.1.3 "><pid="p1144122515599"><aname="p1144122515599"></a><aname="p1144122515599"></a>Scrolling offset in the y-axis, in px</p>
| y | number | Scrolling offset in the y-axis, in px|
</td>
</tr>
</tbody>
</table>
## Example
## Example
```
```html
<!-- index.hml -->
<!-- index.hml -->
<divclass="container">
<divclass="container">
<listclass="todo-wrapper">
<listclass="todo-wrapper">
...
@@ -638,7 +113,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
...
@@ -638,7 +113,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
The **<panel\>** component is a slidable panel. It provides a lightweight content display window with flexible sizes. The **<panel\>** component pops up when it is displayed.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p175541420104219"><aname="p175541420104219"></a><aname="p175541420104219"></a>Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows:</p>
<aname="ul15554620204219"></a><aname="ul15554620204219"></a><ulid="ul15554620204219"><li><pid="p555417208423"><aname="p555417208423"></a><aname="p555417208423"></a><strongid="b75944818331"><aname="b75944818331"></a><aname="b75944818331"></a>minibar</strong>: A minibar panel displays content in the minibar area or a large (fullscreen-like) area.</p>
</li><li><pid="p15554920204216"><aname="p15554920204216"></a><aname="p15554920204216"></a><strongid="b1346141143510"><aname="b1346141143510"></a><aname="b1346141143510"></a>foldable</strong>: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.</p>
</li><li><pid="p35545206423"><aname="p35545206423"></a><aname="p35545206423"></a><strongid="b11403369397"><aname="b11403369397"></a><aname="b11403369397"></a>temporary</strong>: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p655415206425"><aname="p655415206425"></a><aname="p655415206425"></a>Initial status of the slidable panel. Available values are as follows:</p>
<aname="ol6554220154216"></a><aname="ol6554220154216"></a><olid="ol6554220154216"><li><pid="p12554520154216"><aname="p12554520154216"></a><aname="p12554520154216"></a><strongid="b13227603353"><aname="b13227603353"></a><aname="b13227603353"></a>mini</strong>: Displays a <strongid="b18230114212422"><aname="b18230114212422"></a><aname="b18230114212422"></a>minibar</strong> or <strongid="b3615459421"><aname="b3615459421"></a><aname="b3615459421"></a>foldable</strong> panel in its minimum size. This attribute does not take effect for <strongid="b65822124212"><aname="b65822124212"></a><aname="b65822124212"></a>temporary</strong> panels.</p>
</li><li><pid="p1955422014218"><aname="p1955422014218"></a><aname="p1955422014218"></a><strongid="b7388181616411"><aname="b7388181616411"></a><aname="b7388181616411"></a>half</strong>: Displays a <strongid="b14130550104216"><aname="b14130550104216"></a><aname="b14130550104216"></a>foldable</strong> or <strongid="b1347545294213"><aname="b1347545294213"></a><aname="b1347545294213"></a>temporary</strong> panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for <strongid="b17461163424318"><aname="b17461163424318"></a><aname="b17461163424318"></a>minibar</strong> panels.</p>
</li><li><pid="p15541020134214"><aname="p15541020134214"></a><aname="p15541020134214"></a><strongid="b56264913506"><aname="b56264913506"></a><aname="b56264913506"></a>full</strong>: Displays a panel in a large (fullscreen-like) area.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p135551520114215"><aname="p135551520114215"></a><aname="p135551520114215"></a>Whether to enable a drag bar. The value <strongid="b899416435214"><aname="b899416435214"></a><aname="b899416435214"></a>true</strong> indicates that the drag bar will be displayed, and <strongid="b1834810239526"><aname="b1834810239526"></a><aname="b1834810239526"></a>false</strong> indicates the opposite.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p16555102011423"><aname="p16555102011423"></a><aname="p16555102011423"></a>Panel height in the <strongid="b190616511539"><aname="b190616511539"></a><aname="b190616511539"></a>full</strong> mode. The default value is the screen height minus 8 px.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p17555320194211"><aname="p17555320194211"></a><aname="p17555320194211"></a>Panel height in the <strongid="b360733265415"><aname="b360733265415"></a><aname="b360733265415"></a>half</strong> mode. The default value is half of the screen height.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p115561020164217"><aname="p115561020164217"></a><aname="p115561020164217"></a>Panel height in the <strongid="b634712315173"><aname="b634712315173"></a><aname="b634712315173"></a>mini</strong> mode. The default value is <strongid="b1170192112410"><aname="b1170192112410"></a><aname="b1170192112410"></a>48px</strong>.</p>
| type | string | foldable | Yes | Type of the slidable panel. This attribute cannot be dynamically changed. Available values are as follows:<br>- **minibar**: A minibar panel displays content in the minibar area or a large (fullscreen-like) area.<br>- **foldable**: A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.<br>- **temporary**: A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.|
| mode | string | full | No | Initial status of the slidable panel. Available values are as follows:<br>1. **mini**: Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels.<br>2. **half**: Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.<br>3. **full**: Displays a panel in a large (fullscreen-like) area.|
| dragbar | boolean | true | No | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite. |
| fullheight | <length> | - | No | Panel height in the **full** mode. The default value is the screen height minus 8 px. |
| halfheight | <length> | - | No | Panel height in the **half** mode. The default value is half of the screen height. |
| miniheight | <length> | - | No | Panel height in the **mini** mode. The default value is **48px**. |
> **NOTE**
> - Rendering attributes, including **for**, **if**, and **show**, are not supported.
>
> - The **focusable** and **disabled** attributes are not supported.
## Styles
Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| padding | <length> | 0 | No | The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| padding-[start\|end] | <length> | 0 | No | Start and end padding. |
| margin | <length> | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom margins. |
| margin-[start\|end] | <length> | 0 | No | Start and end margins. |
| border | - | 0 | No | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-style | string | solid | No | Shorthand attribute to set the style for all borders. Available values are as follows:<br>- **dotted**: dotted border. The radius of a dot is half of **border-width**.<br>- **dashed**: dashed border.<br>- **solid**: solid border.|
| border-[left\|top\|right\|bottom]-style | string | solid | No | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.|
| border-[left\|top\|right\|bottom] | - | - | No | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-width | <length> | 0 | No | Shorthand attribute to set the width for all borders, or separately set the width for each border. |
| border-[left\|top\|right\|bottom]-width | <length> | 0 | No | Attribute to set widths of left, top, right, and bottom borders. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders, or separately set the color for each border. |
| border-[left\|top\|right\|bottom]-color | <color> | black | No | Attribute to set colors for left, top, right, and bottom borders. |
| border-radius | <length> | - | No | Attribute to set the radius of round-corner borders. This attribute cannot be used to set the width or color of a specific border. To set the width or color, you must set **border-width** or **border-color** for all the borders at the same time. |
| border-[top\|bottom]-[left\|right]-radius | <length> | - | No | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| background | <linear-gradient> | - | No | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| background-image | string | - | No | Background image. This attribute is not compatible with **background-color** or **background**. Local image resources are supported. |
| background-size | - string<br>- <length><length><br>- <percentage><percentage> | auto | No | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **length** values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- The two **percentage** values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
| background-repeat | string | repeat | No | Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-position | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | No | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **length** values: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- Using **percentage** values: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br>- Using both **percentage** and **length** values.|
| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><divclass="p"id="a9d4f39d126ce4c4cb7652dc07238acf0"><aname="a9d4f39d126ce4c4cb7652dc07238acf0"></a><aname="a9d4f39d126ce4c4cb7652dc07238acf0"></a>The attribute can have one to four values:<aname="udb68dd5e787d4dc4ba26465e8450efe7"></a><aname="udb68dd5e787d4dc4ba26465e8450efe7"></a><ulid="udb68dd5e787d4dc4ba26465e8450efe7"><li><pid="a95f9b1440265405fa0007c00d337dab3"><aname="a95f9b1440265405fa0007c00d337dab3"></a><aname="a95f9b1440265405fa0007c00d337dab3"></a>If you set only one value, it specifies the padding for four sides.</p>
</li><li><pid="a1c1fdd035aee4b3a8a61fc1a42c967e4"><aname="a1c1fdd035aee4b3a8a61fc1a42c967e4"></a><aname="a1c1fdd035aee4b3a8a61fc1a42c967e4"></a>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.</p>
</li><li><pid="a643af1b111eb4220a3703a37180c0735"><aname="a643af1b111eb4220a3703a37180c0735"></a><aname="a643af1b111eb4220a3703a37180c0735"></a>If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.</p>
</li><li><pid="ab8cfda39634d4ecf86eb772c1b654f7e"><aname="ab8cfda39634d4ecf86eb772c1b654f7e"></a><aname="ab8cfda39634d4ecf86eb772c1b654f7e"></a>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="aaf71a7aed79445c18bb63ae5f5a00314"><aname="aaf71a7aed79445c18bb63ae5f5a00314"></a><aname="aaf71a7aed79445c18bb63ae5f5a00314"></a>Start and end padding.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="afe56536fd53c409db2033b4be7135555"><aname="afe56536fd53c409db2033b4be7135555"></a><aname="afe56536fd53c409db2033b4be7135555"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p>
<aname="u1fe7f0fee6294e3aabd5a16f16f62eaa"></a><aname="u1fe7f0fee6294e3aabd5a16f16f62eaa"></a><ulid="u1fe7f0fee6294e3aabd5a16f16f62eaa"><li><pid="a51f7d66473934ec6918040a4da7ed533"><aname="a51f7d66473934ec6918040a4da7ed533"></a><aname="a51f7d66473934ec6918040a4da7ed533"></a>If you set only one value, it specifies the margin for all the four sides.</p>
</li><li><pid="a446e0dc7bfbc4aa580ede47e4af3901c"><aname="a446e0dc7bfbc4aa580ede47e4af3901c"></a><aname="a446e0dc7bfbc4aa580ede47e4af3901c"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p>
</li><li><pid="a2ce71640e6964e86acb7f6abd6e6aec8"><aname="a2ce71640e6964e86acb7f6abd6e6aec8"></a><aname="a2ce71640e6964e86acb7f6abd6e6aec8"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p>
</li><li><pid="a86622e9fbdeb409cb5afcc0b2c7fe651"><aname="a86622e9fbdeb409cb5afcc0b2c7fe651"></a><aname="a86622e9fbdeb409cb5afcc0b2c7fe651"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="ae427df4a00bf46379ce337974a1d17df"><aname="ae427df4a00bf46379ce337974a1d17df"></a><aname="ae427df4a00bf46379ce337974a1d17df"></a>Start and end margins.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a18290265c858402dad42d13f5df9556f"><aname="a18290265c858402dad42d13f5df9556f"></a><aname="a18290265c858402dad42d13f5df9556f"></a>Shorthand attribute to set all borders. Set <strongid="b083513429473"><aname="b083513429473"></a><aname="b083513429473"></a>border-width</strong>, <strongid="b984410426477"><aname="b984410426477"></a><aname="b984410426477"></a>border-style</strong>, and <strongid="b13845154204714"><aname="b13845154204714"></a><aname="b13845154204714"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a29372dc23f5f4307929d789f9b76472e"><aname="a29372dc23f5f4307929d789f9b76472e"></a><aname="a29372dc23f5f4307929d789f9b76472e"></a>Shorthand attribute to set the style for all borders. Available values are as follows:</p>
<aname="u5617b1dfdf2048739b8699b11a69d8db"></a><aname="u5617b1dfdf2048739b8699b11a69d8db"></a><ulid="u5617b1dfdf2048739b8699b11a69d8db"><li><strongid="b152932468478"><aname="b152932468478"></a><aname="b152932468478"></a>dotted</strong>: dotted border. The radius of a dot is half of <strongid="b1294184614715"><aname="b1294184614715"></a><aname="b1294184614715"></a>border-width</strong>.</li><li><strongid="b063849104711"><aname="b063849104711"></a><aname="b063849104711"></a>dashed</strong>: dashed border</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="abfe3dfb0662b4a6c850a8d5d285dff6d"><aname="abfe3dfb0662b4a6c850a8d5d285dff6d"></a><aname="abfe3dfb0662b4a6c850a8d5d285dff6d"></a>Styles of the left, top, right, and bottom borders. The available values are <strongid="b5137105454712"><aname="b5137105454712"></a><aname="b5137105454712"></a>dotted</strong>, <strongid="b111381654144718"><aname="b111381654144718"></a><aname="b111381654144718"></a>dashed</strong>, and <strongid="b101391554184712"><aname="b101391554184712"></a><aname="b101391554184712"></a>solid</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a5ec1cb3c8733406b91ad459e012f91f4"><aname="a5ec1cb3c8733406b91ad459e012f91f4"></a><aname="a5ec1cb3c8733406b91ad459e012f91f4"></a>Shorthand attribute to set the borders for every side respectively. You set <strongid="b11961957114716"><aname="b11961957114716"></a><aname="b11961957114716"></a>border-width</strong>, <strongid="b7103145715476"><aname="b7103145715476"></a><aname="b7103145715476"></a>border-style</strong>, and <strongid="b16104175711473"><aname="b16104175711473"></a><aname="b16104175711473"></a>border-color</strong> in sequence. Default values are used for attributes that are not set.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="aad1af0ece034401a8c56fb287c16320c"><aname="aad1af0ece034401a8c56fb287c16320c"></a><aname="aad1af0ece034401a8c56fb287c16320c"></a>Shorthand attribute to set the width of all borders<spanid="ph1439331144812"><aname="ph1439331144812"></a><aname="ph1439331144812"></a>, or separately set the width of each border</span>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a0e87cf1edd0f474cb33591ce68b19296"><aname="a0e87cf1edd0f474cb33591ce68b19296"></a><aname="a0e87cf1edd0f474cb33591ce68b19296"></a>Attribute to set widths of left, top, right, and bottom borders.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a5c2063b884d84196b3a328d8029c5bbd"><aname="a5c2063b884d84196b3a328d8029c5bbd"></a><aname="a5c2063b884d84196b3a328d8029c5bbd"></a>Shorthand attribute to set the color of all borders<spanid="ph20728201214910"><aname="ph20728201214910"></a><aname="ph20728201214910"></a>, or separately set the color of each border</span>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a3a75202614f54b8d86865e6bdd23220e"><aname="a3a75202614f54b8d86865e6bdd23220e"></a><aname="a3a75202614f54b8d86865e6bdd23220e"></a>Attribute to set colors of left, top, right, and bottom borders.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a3df8b3f3ec00490a9687f38cb6369c75"><aname="a3df8b3f3ec00490a9687f38cb6369c75"></a><aname="a3df8b3f3ec00490a9687f38cb6369c75"></a>Attribute to set the radius of round-corner borders. <spanid="ph8921172719494"><aname="ph8921172719494"></a><aname="ph8921172719494"></a>This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set <strongid="b1891342784915"><aname="b1891342784915"></a><aname="b1891342784915"></a>border-width</strong> or <strongid="b159203275495"><aname="b159203275495"></a><aname="b159203275495"></a>border-color</strong> for all the borders at the same time.</span></p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a41f1597c4e454492aaea4818c234d429"><aname="a41f1597c4e454492aaea4818c234d429"></a><aname="a41f1597c4e454492aaea4818c234d429"></a>Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a2681658e98234c0bb3dfb1a8fc1ae346"><aname="a2681658e98234c0bb3dfb1a8fc1ae346"></a><aname="a2681658e98234c0bb3dfb1a8fc1ae346"></a>This attribute supports <ahref="js-components-common-gradient.md">Gradient Styles</a> only but is not compatible with <strongid="b199011833144912"><aname="b199011833144912"></a><aname="b199011833144912"></a>background-color</strong> or <strongid="b1690283344915"><aname="b1690283344915"></a><aname="b1690283344915"></a>background-image</strong>.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="aa236de4e56e349ff8c753d294e98abab"><aname="aa236de4e56e349ff8c753d294e98abab"></a><aname="aa236de4e56e349ff8c753d294e98abab"></a>Background image. Currently, this attribute is not compatible with <strongid="b168581843184914"><aname="b168581843184914"></a><aname="b168581843184914"></a>background-color</strong> or <strongid="b4866144318494"><aname="b4866144318494"></a><aname="b4866144318494"></a>background</strong>. Local image resources are supported.</p>
<aname="ub2423a2f8d96432f8c58c629288432c5"></a><aname="ub2423a2f8d96432f8c58c629288432c5"></a><ulid="ub2423a2f8d96432f8c58c629288432c5"><li>The <strongid="b13127185124910"><aname="b13127185124910"></a><aname="b13127185124910"></a>string</strong> values are as follows:<aname="uee8f5c89381a4ce682a5d557f8e558ee"></a><aname="uee8f5c89381a4ce682a5d557f8e558ee"></a><ulid="uee8f5c89381a4ce682a5d557f8e558ee"><li><strongid="b1474287165014"><aname="b1474287165014"></a><aname="b1474287165014"></a>contain</strong>: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.</li><li><strongid="b311264385312"><aname="b311264385312"></a><aname="b311264385312"></a>cover</strong>: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.</li><li><strongid="b163611704548"><aname="b163611704548"></a><aname="b163611704548"></a>auto</strong>: The original image width-height ratio is retained.</li></ul>
</li><li>The two <strongid="b64592211545"><aname="b64592211545"></a><aname="b64592211545"></a><length></strong> values are as follows:<pid="a5b969a49f8074aae96a12e4232e47c5d"><aname="a5b969a49f8074aae96a12e4232e47c5d"></a><aname="a5b969a49f8074aae96a12e4232e47c5d"></a>Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b3412192712546"><aname="b3412192712546"></a><aname="b3412192712546"></a>auto</strong> by default.</p>
</li><li>The two <strongid="b344718292549"><aname="b344718292549"></a><aname="b344718292549"></a><percentage></strong> values are as follows:<pid="a19ef0a7986ce47f2b7fe614975e23cd9"><aname="a19ef0a7986ce47f2b7fe614975e23cd9"></a><aname="a19ef0a7986ce47f2b7fe614975e23cd9"></a>Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to <strongid="b11170184116543"><aname="b11170184116543"></a><aname="b11170184116543"></a>auto</strong> by default.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a64efc26d6e2c48a3a4032c71b8511085"><aname="a64efc26d6e2c48a3a4032c71b8511085"></a><aname="a64efc26d6e2c48a3a4032c71b8511085"></a>Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.</p>
<aname="uee59e640d2304d56a0a5b396795a8cc5"></a><aname="uee59e640d2304d56a0a5b396795a8cc5"></a><ulid="uee59e640d2304d56a0a5b396795a8cc5"><li><strongid="b1953611845513"><aname="b1953611845513"></a><aname="b1953611845513"></a>repeat</strong>: Repeatedly draws images along the x-axis and y-axis at the same time.</li><li><strongid="b4728182018554"><aname="b4728182018554"></a><aname="b4728182018554"></a>repeat-x</strong>: Repeatedly draws images along the x-axis.</li><li><strongid="b38969231556"><aname="b38969231556"></a><aname="b38969231556"></a>repeat-y</strong>: Repeatedly draws images along the y-axis.</li><li><strongid="b106442517553"><aname="b106442517553"></a><aname="b106442517553"></a>no-repeat</strong>: The image is not drawn repeatedly.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><aname="ub1e24d41a33d4560a6637f7a16ee5140"></a><aname="ub1e24d41a33d4560a6637f7a16ee5140"></a><ulid="ub1e24d41a33d4560a6637f7a16ee5140"><li>Using keywords: If only one keyword is specified, the other value is <strongid="b1375628105514"><aname="b1375628105514"></a><aname="b1375628105514"></a>center</strong> by default. The two values define the horizontal position and vertical position, respectively.<aname="uac6e07c1eb0244d79eeed180658cb6c6"></a><aname="uac6e07c1eb0244d79eeed180658cb6c6"></a><ulid="uac6e07c1eb0244d79eeed180658cb6c6"><li><strongid="b1895315557"><aname="b1895315557"></a><aname="b1895315557"></a>left</strong>: leftmost in the horizontal direction</li><li><strongid="b832423245517"><aname="b832423245517"></a><aname="b832423245517"></a>right</strong>: rightmost in the horizontal direction</li><li><strongid="b1252973310555"><aname="b1252973310555"></a><aname="b1252973310555"></a>top</strong>: top in the vertical direction</li><li><strongid="b157931134185511"><aname="b157931134185511"></a><aname="b157931134185511"></a>bottom</strong>: bottom in the vertical direction</li><li><strongid="b792773565515"><aname="b792773565515"></a><aname="b792773565515"></a>center</strong>: center position</li></ul>
</li></ul>
<aname="ua495746d9777430c973a5ec607309ac4"></a><aname="ua495746d9777430c973a5ec607309ac4"></a><ulid="ua495746d9777430c973a5ec607309ac4"><li>Using <strongid="b15235143718553"><aname="b15235143718553"></a><aname="b15235143718553"></a><length></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b10672040165512"><aname="b10672040165512"></a><aname="b10672040165512"></a>0 0</strong> indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is <strongid="b182882471554"><aname="b182882471554"></a><aname="b182882471554"></a>50%</strong>.</li><li>Using <strongid="b4812144875514"><aname="b4812144875514"></a><aname="b4812144875514"></a><percentage></strong>: The first value indicates the horizontal position, and the second value indicates the vertical position. <strongid="b20541964578"><aname="b20541964578"></a><aname="b20541964578"></a>0% 0%</strong> indicates the upper left corner. <strongid="b561913815576"><aname="b561913815576"></a><aname="b561913815576"></a>100% 100%</strong> indicates the lower right corner. If only one value is specified, the other one is <strongid="b88734955715"><aname="b88734955715"></a><aname="b88734955715"></a>50%</strong>.</li><li>Using both <strongid="b6916141065718"><aname="b6916141065718"></a><aname="b6916141065718"></a><percentage></strong> and <strongid="b5917121019577"><aname="b5917121019577"></a><aname="b5917121019577"></a><length></strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="a2e8d180f3c914356af72e679446f4ab5"><aname="a2e8d180f3c914356af72e679446f4ab5"></a><aname="a2e8d180f3c914356af72e679446f4ab5"></a>Opacity of an element. The value ranges from <strongid="b15364171275710"><aname="b15364171275710"></a><aname="b15364171275710"></a>0</strong> to <strongid="b93641412135719"><aname="b93641412135719"></a><aname="b93641412135719"></a>1</strong>. The value <strongid="b03651712145710"><aname="b03651712145710"></a><aname="b03651712145710"></a>1</strong> means opaque, and <strongid="b17366101211577"><aname="b17366101211577"></a><aname="b17366101211577"></a>0</strong> means completely transparent.</p>
| sizechange | { size: { height: heightLength, width: widthLength }, mode: modeStr } | Triggered when the status of the slidable panel changes. Available **mode** values are as follows:<br>- **mini**: Displays a **minibar** or **foldable** panel in its minimum size.<br>- **half**: Displays a **foldable** panel in a medium-sized (halfscreen-like) area.<br>- **full**: Displays a panel in a large (fullscreen-like) area.<br>The returned **height** value indicates the content area height. However, when the **dragbar** attribute is **true**, the **height** value is the height of the drag bar plus that of the content area.|
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p8520101364714"><aname="p8520101364714"></a><aname="p8520101364714"></a>Triggered when the status of the slidable panel changes. Available <strongid="b122905111282"><aname="b122905111282"></a><aname="b122905111282"></a>mode</strong> values are as follows:</p>
<aname="ol5520181316476"></a><aname="ol5520181316476"></a><olid="ol5520181316476"><li><pid="p4520141364713"><aname="p4520141364713"></a><aname="p4520141364713"></a><strongid="b45816387277"><aname="b45816387277"></a><aname="b45816387277"></a>mini</strong>: Displays a <strongid="b10542195774416"><aname="b10542195774416"></a><aname="b10542195774416"></a>minibar</strong> or <strongid="b134141855164411"><aname="b134141855164411"></a><aname="b134141855164411"></a>foldable</strong> panel in its minimum size.</p>
</li><li><pid="p6520191324711"><aname="p6520191324711"></a><aname="p6520191324711"></a><strongid="b2065484932810"><aname="b2065484932810"></a><aname="b2065484932810"></a>half</strong>: Displays a <strongid="b166951703457"><aname="b166951703457"></a><aname="b166951703457"></a>foldable</strong> panel in a medium-sized (halfscreen-like) area.</p>
</li><li><pid="p252018137477"><aname="p252018137477"></a><aname="p252018137477"></a><strongid="b1696104211503"><aname="b1696104211503"></a><aname="b1696104211503"></a>full</strong>: Displays a panel in a large (fullscreen-like) area.</p>
<divclass="note"id="note1672712533287"><aname="note1672712533287"></a><aname="note1672712533287"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1672795314285"><aname="p1672795314285"></a><aname="p1672795314285"></a>The returned <strongid="b17504232153714"><aname="b17504232153714"></a><aname="b17504232153714"></a>height</strong> value indicates the content area height. However, when the <strongid="b6111851103715"><aname="b6111851103715"></a><aname="b6111851103715"></a>dragbar</strong> attribute is <strongid="b1019713539372"><aname="b1019713539372"></a><aname="b1019713539372"></a>true</strong>, the <strongid="b21622103812"><aname="b21622103812"></a><aname="b21622103812"></a>height</strong> value is the height of the drag bar plus that of the content area.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p10314105842512"><aname="p10314105842512"></a><aname="p10314105842512"></a>Closes the slidable panel that has been popped up.</p>
</td>
</tr>
</tbody>
</table>
## Example<a name="section36743614499"></a>
| Name | Parameter | Description |
| ----- | ---- | ------------- |
| show | - | Pops the slidable panel up.|
| close | - | Closes the slidable panel that has been popped up.|
```
## Example
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="doc-page">
<divclass="doc-page">
<divclass="btn-div">
<divclass="btn-div">
...
@@ -476,7 +102,7 @@ Only the following methods are supported.
...
@@ -476,7 +102,7 @@ Only the following methods are supported.
</div>
</div>
```
```
```
```css
/* xxx.css */
/* xxx.css */
.doc-page{
.doc-page{
flex-direction:column;
flex-direction:column;
...
@@ -515,7 +141,7 @@ Only the following methods are supported.
...
@@ -515,7 +141,7 @@ Only the following methods are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p9904155363115"><aname="p9904155363115"></a><aname="p9904155363115"></a>ID of the target element. Dynamic switch is not supported.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1990410531316"><aname="p1990410531316"></a><aname="p1990410531316"></a>Position of the pop-up. Available values are as follows:</p>
<aname="ul1190565393119"></a><aname="ul1190565393119"></a><ulid="ul1190565393119"><li><strongid="b15820759192312"><aname="b15820759192312"></a><aname="b15820759192312"></a>left</strong>: The pop-up is displayed on the left of the target item.</li><li><strongid="b16901171419245"><aname="b16901171419245"></a><aname="b16901171419245"></a>right</strong>: The pop-up is displayed on the right of the target item.</li><li><strongid="b1499931915246"><aname="b1499931915246"></a><aname="b1499931915246"></a>top</strong>: The pop-up is displayed at the top of the target item.</li><li><strongid="b4343193516249"><aname="b4343193516249"></a><aname="b4343193516249"></a>bottom</strong>: The pop-up is displayed at the bottom of the target item.</li><li><strongid="b64261744192420"><aname="b64261744192420"></a><aname="b64261744192420"></a>topLeft</strong>: The pop-up is displayed on the upper left of the target item.</li><li><strongid="b612225418245"><aname="b612225418245"></a><aname="b612225418245"></a>topRight</strong>: The pop-up is displayed on the upper right of the target item.</li><li><strongid="b19405122515"><aname="b19405122515"></a><aname="b19405122515"></a>bottomLeft</strong>: The pop-up is displayed on the bottom left of the target item.</li><li><strongid="b1069401942019"><aname="b1069401942019"></a><aname="b1069401942019"></a>bottomRight</strong>: The pop-up is displayed on the bottom right of the target item.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p121401832662"><aname="p121401832662"></a><aname="p121401832662"></a>Whether to retain this pop-up.</p>
<pid="p0676162715614"><aname="p0676162715614"></a><aname="p0676162715614"></a><strongid="b1667616271964"><aname="b1667616271964"></a><aname="b1667616271964"></a>true</strong>: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, you need to call the <strongid="b166761527866"><aname="b166761527866"></a><aname="b166761527866"></a>hide</strong> method.</p>
<pid="p1661313358613"><aname="p1661313358613"></a><aname="p1661313358613"></a><strongid="b1343817329515"><aname="b1343817329515"></a><aname="b1343817329515"></a>false</strong>: The pop-up disappears when users tap other areas or switch the page.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p39792192095"><aname="p39792192095"></a><aname="p39792192095"></a>Whether to display the pop-up when users click the bound control. If this parameter is set to <strongid="b12988162164619"><aname="b12988162164619"></a><aname="b12988162164619"></a>false</strong>, the pop-up can be triggered only by a method call.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p548093131119"><aname="p548093131119"></a><aname="p548093131119"></a>Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.</p>
<tdclass="cellrowborder"valign="top"width="61.933806619338064%"headers="mcps1.1.6.1.5 "><pid="p1416162202014"><aname="p1416162202014"></a><aname="p1416162202014"></a>Color configuration of the mask layer. By default, the mask layer is completely transparent.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p558817173314"><aname="p558817173314"></a><aname="p558817173314"></a>Triggered when a pop-up appears or disappears.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p0314958162512"><aname="p0314958162512"></a><aname="p0314958162512"></a>Pops up a message.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p10314105842512"><aname="p10314105842512"></a><aname="p10314105842512"></a>Hides a pop-up.</p>
>1. Attributes and styles of a **<popup\>** component cannot be dynamically updated.
>2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect.
>3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style \(in the sequence of left, top, right, and bottom\) takes effect. Otherwise, the **border** attribute does not take effect.
>4. The click event bound to the target element of a pop-up does not take effect.
## Example Code<a name="section29231018162418"></a>
```
## Child Components
This component supports only one child component.<sup>5+</sup>
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| target | string | - | Yes| ID of the target element. Dynamic switch is not supported.|
| placement | string | bottom | No| Position of the pop-up. Available values are as follows:<br>- **left**: The pop-up is displayed on the left of the target item.<br>- **right**: The pop-up is displayed on the right of the target item.<br>- **top**: The pop-up is displayed at the top of the target item.<br>- **bottom**: The pop-up is displayed at the bottom of the target item.<br>- **topLeft**: The pop-up is displayed on the upper left of the target item.<br>- **topRight**: The pop-up is displayed on the upper right of the target item.<br>- **bottomLeft**: The pop-up is displayed on the bottom left of the target item.<br>- **bottomRight**: The pop-up is displayed on the bottom right of the target item.|
| keepalive<sup>5+</sup> | boolean | false | No| Whether to retain this pop-up. **true**: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, call the **hide** method.<br>**false**: The pop-up disappears when users tap other areas or switch the page.|
| clickable<sup>5+</sup> | boolean | true | No| Whether to display the pop-up when users click the bound control. If this parameter is set to **false**, the pop-up can be triggered only by a method call.|
| arrowoffset<sup>5+</sup> | <length> | 0 | No| Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.|
> **NOTE**
>
> The **focusable** attribute is not supported.
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| mask-color | <color> | - | No| Color configuration of the mask layer. By default, the mask layer is completely transparent.|
> **NOTE**
>
> Position-related styles are not supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| visibilitychange | { visibility: boolean } | Triggered when a pop-up appears or disappears.|
## Methods
The following methods are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| show<sup>5+</sup> | - | Shows the pop-up.|
| hide<sup>5+</sup> | - | Hides the pop-up.|
> **NOTE**
> 1. Attributes and styles of a **\<popup>** component cannot be dynamically updated.
>
> 2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect.
>
> 3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style (in the sequence of left, top, right, and bottom) takes effect. Otherwise, the **border** attribute does not take effect.
>
> 4. The click event bound to the target element of a pop-up does not take effect.
## Example
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<textid="text">Click to show the pop-up</text>
<textid="text">Click to show the pop-up</text>
...
@@ -199,7 +89,7 @@ Only the following methods are supported.
...
@@ -199,7 +89,7 @@ Only the following methods are supported.
</div>
</div>
```
```
```
```css
/* xxx.css */
/* xxx.css */
.container{
.container{
flex-direction:column;
flex-direction:column;
...
@@ -219,7 +109,7 @@ Only the following methods are supported.
...
@@ -219,7 +109,7 @@ Only the following methods are supported.
| offset | <length> | - | No| Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
</th>
| refreshing | boolean | false | No| Whether the **\<refresh>** component is being used for refreshing.|
| type | string | auto | No| Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.<br>- **auto**: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.<br>- **pulldown**: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set **scrolleffect** of the list to **no** to prevent drop-down effect conflicts.|
</th>
| lasttime | boolean | false | No| Whether to display the last update time. The character string format is **last update time: XXXX**, where **XXXX** is displayed based on the certain time and date formats and cannot be dynamically modified. (It is recommended that this attribute be used when **type** is set to **pulldown**. The fixed distance is at the bottom of the content drop-down area. Pay attention to the **offset** attribute setting to prevent overlapping.)|
| timeoffset<sup>6+</sup> | <length> | - | No| Distance between the update time and the top of the parent component.|
</th>
| friction | number | 42 | No| Pull-down friction coefficient. The value ranges from 0 to 100. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * **friction**% px.|
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p380114563617"><aname="p380114563617"></a><aname="p380114563617"></a>Distance to the top of the parent component from the <strongid="b179761137151712"><aname="b179761137151712"></a><aname="b179761137151712"></a><refresh></strong> component that comes to rest after a successful swipe gesture.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p28011856362"><aname="p28011856362"></a><aname="p28011856362"></a>Whether the <strongid="b1342720507196"><aname="b1342720507196"></a><aname="b1342720507196"></a><refresh></strong> component is being used for refreshing.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p9802205183619"><aname="p9802205183619"></a><aname="p9802205183619"></a>Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.</p>
<aname="ul0802951367"></a><aname="ul0802951367"></a><ulid="ul0802951367"><li><strongid="b0351155943013"><aname="b0351155943013"></a><aname="b0351155943013"></a>auto</strong>: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.</li><li><strongid="b12317132114318"><aname="b12317132114318"></a><aname="b12317132114318"></a>pulldown</strong>: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set <strongid="b1218171023213"><aname="b1218171023213"></a><aname="b1218171023213"></a>scrolleffect</strong> of the list to <strongid="b1152941417327"><aname="b1152941417327"></a><aname="b1152941417327"></a>no</strong> to prevent drop-down effect conflicts.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1880211583612"><aname="p1880211583612"></a><aname="p1880211583612"></a>Whether to display the last update time. The character string format is <strongid="b46471930153316"><aname="b46471930153316"></a><aname="b46471930153316"></a>last update time: XXXX</strong>, where <strongid="b142341139133312"><aname="b142341139133312"></a><aname="b142341139133312"></a>XXXX</strong> is displayed based on the time and date display specifications and cannot be dynamically modified. (It is recommended that this attribute be used when <strongid="b22347013416"><aname="b22347013416"></a><aname="b22347013416"></a>type</strong> is set to <strongid="b20303548342"><aname="b20303548342"></a><aname="b20303548342"></a>pulldown</strong>. The fixed distance is at the bottom of the content drop-down area. Pay attention to the <strongid="b18265168348"><aname="b18265168348"></a><aname="b18265168348"></a>offset</strong> attribute setting to prevent overlapping.)</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p12987154619106"><aname="p12987154619106"></a><aname="p12987154619106"></a>Sets the distance between the update time and the top of the parent component.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p118021351362"><aname="p118021351362"></a><aname="p118021351362"></a>Pull-down friction coefficient. The value ranges from <strongid="b7887020335"><aname="b7887020335"></a><aname="b7887020335"></a>0</strong> to <strongid="b81365257313"><aname="b81365257313"></a><aname="b81365257313"></a>100</strong>. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 *<strongid="b2130757132018"><aname="b2130757132018"></a><aname="b2130757132018"></a>friction</strong>% px.</p>
<tdclass="cellrowborder"valign="top"width="37.9%"headers="mcps1.1.6.1.5 "><pid="p12940181519248"><aname="p12940181519248"></a><aname="p12940181519248"></a>Background color of the <strongid="b6261744123520"><aname="b6261744123520"></a><aname="b6261744123520"></a><refresh></strong> component.</p>
<tdclass="cellrowborder"valign="top"width="37.9%"headers="mcps1.1.6.1.5 "><pid="p169402151243"><aname="p169402151243"></a><aname="p169402151243"></a>Loading color of the <strongid="b10245113211611"><aname="b10245113211611"></a><aname="b10245113211611"></a><refresh></strong> component.</p>
| refresh | { refreshing: refreshingValue } | Triggered when the **\<refresh>** component is pulled down and the refresh status changes. Available values are as follows:<br>- **false**: The **\<refresh>** component is being pulled down.<br>- **true**: The **\<refresh>** component is not being pulled down.|
| pulldown | { state: string } | Triggered when a user starts or stops pulling down the **\<refresh>** component. Available values are as follows:<br>- **start**: The pull-down starts.<br>- **end**: The pull-down ends.|
<tdclass="cellrowborder"valign="top"width="50.74999999999999%"headers="mcps1.1.4.1.3 "><pid="p15225575017"><aname="p15225575017"></a><aname="p15225575017"></a>Triggered when the <strongid="b152251728113018"><aname="b152251728113018"></a><aname="b152251728113018"></a><refresh></strong> component is pulled down and the refresh status changes. Available values are as follows:</p>
<aname="ul96951626943"></a><aname="ul96951626943"></a><ulid="ul96951626943"><li><strongid="b18264193215"><aname="b18264193215"></a><aname="b18264193215"></a>false</strong>: The <strongid="b01351252103212"><aname="b01351252103212"></a><aname="b01351252103212"></a><refresh></strong> component is being pulled down.</li><li><strongid="b610561314337"><aname="b610561314337"></a><aname="b610561314337"></a>true</strong>: The <strongid="b2742219336"><aname="b2742219336"></a><aname="b2742219336"></a><refresh></strong> component is not being pulled down.</li></ul>
<tdclass="cellrowborder"valign="top"width="50.74999999999999%"headers="mcps1.1.4.1.3 "><pid="p527644753917"><aname="p527644753917"></a><aname="p527644753917"></a>Triggered when a user starts or stops pulling down the <strongid="b101091622103416"><aname="b101091622103416"></a><aname="b101091622103416"></a><refresh></strong> component. Available values are as follows:</p>
<aname="ul225113709"></a><aname="ul225113709"></a><ulid="ul225113709"><li><strongid="b18546112103519"><aname="b18546112103519"></a><aname="b18546112103519"></a>start</strong>: The pull-down starts.</li><li><strongid="b1978717723516"><aname="b1978717723516"></a><aname="b1978717723516"></a>end</strong>: The pull-down ends.</li></ul>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are not supported.
## Example<a name="section1050103282219"></a>
```
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are not supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p19923012153517"><aname="p19923012153517"></a><aname="p19923012153517"></a>Index of a child component currently displayed in the container.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p192451253512"><aname="p192451253512"></a><aname="p192451253512"></a>Whether to enable autoplay for child component switching. If this attribute is <strongid="b15681104972613"><aname="b15681104972613"></a><aname="b15681104972613"></a>true</strong>, the indicator does not take effect<supid="sup285913711416"><aname="sup285913711416"></a><aname="sup285913711416"></a>5+</sup>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p15924121219354"><aname="p15924121219354"></a><aname="p15924121219354"></a>Autoplay interval, in milliseconds, when autoplay is enabled.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p139247126354"><aname="p139247126354"></a><aname="p139247126354"></a>Whether to enable the indicator. The default value is <strongid="b11169818165715"><aname="b11169818165715"></a><aname="b11169818165715"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p892412121355"><aname="p892412121355"></a><aname="p892412121355"></a>Whether to enable the digital indicator. The default value is <strongid="b186731053201012"><aname="b186731053201012"></a><aname="b186731053201012"></a>false</strong>.</p>
<divclass="note"id="note592581253511"><aname="note592581253511"></a><aname="note592581253511"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1892581233520"><aname="p1892581233520"></a><aname="p1892581233520"></a>The digital indicator takes effect only when <strongid="b129911746141816"><aname="b129911746141816"></a><aname="b129911746141816"></a>indicator</strong> is set to <strongid="b1176765601811"><aname="b1176765601811"></a><aname="b1176765601811"></a>true</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p12467101911179"><aname="p12467101911179"></a><aname="p12467101911179"></a>Whether gesture operations are disabled on the indicator. If this attribute is set to <strongid="b76131411183611"><aname="b76131411183611"></a><aname="b76131411183611"></a>true</strong>, the indicator does not respond to clicking or dragging operations.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1492511233518"><aname="p1492511233518"></a><aname="p1492511233518"></a>Whether to enable looping.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p79261112123512"><aname="p79261112123512"></a><aname="p79261112123512"></a>Duration of the autoplay for child component switching.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p9926141215356"><aname="p9926141215356"></a><aname="p9926141215356"></a>Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p161510182110"><aname="p161510182110"></a><aname="p161510182110"></a>Minimum number of cached items during delayed loading of the <strongid="b1461673213215"><aname="b1461673213215"></a><aname="b1461673213215"></a><swiper></strong> component. The value <strongid="b1622894813210"><aname="b1622894813210"></a><aname="b1622894813210"></a>-1</strong> indicates that all content is cached.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p118181116136"><aname="p118181116136"></a><aname="p118181116136"></a>Scroll effect. The options are as follows:</p>
<aname="ul5570142716148"></a><aname="ul5570142716148"></a><ulid="ul5570142716148"><li><strongid="b9832231639"><aname="b9832231639"></a><aname="b9832231639"></a>spring</strong>: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.</li><li><strongid="b1843310104318"><aname="b1843310104318"></a><aname="b1843310104318"></a>fade</strong>: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.</li><li><strongid="b18395161410313"><aname="b18395161410313"></a><aname="b18395161410313"></a>none</strong>: No effect after the scroll bar is moved to the edge.<divclass="note"id="note194872416715"><aname="note194872416715"></a><aname="note194872416715"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p104852416717"><aname="p104852416717"></a><aname="p104852416717"></a>This attribute is valid only when <strongid="b466318259316"><aname="b466318259316"></a><aname="b466318259316"></a>loop</strong> is set to <strongid="b99292718313"><aname="b99292718313"></a><aname="b99292718313"></a>false</strong>.</p>
</div></div>
</li></ul>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section08721578337"></a>
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| index | number | 0 | No | Index of the child component currently displayed in the container. |
| autoplay | boolean | false | No | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
| interval | number | 3000 | No | Autoplay interval, in milliseconds, when autoplay is enabled. |
| indicator | boolean | true | No | Whether to enable the indicator. The default value is **true**. |
| digital<sup>5+</sup> | boolean | false | No | Whether to enable the digital indicator. The default value is **false**.<br>The digital indicator takes effect only when **indicator** is set to **true**.|
| indicatordisabled<sup>5+</sup> | boolean | false | No | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations. |
| loop | boolean | true | No | Whether to enable looping. |
| duration | number | - | No | Duration of the autoplay for child component switching. |
| vertical | boolean | false | No | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator. |
| cachedsize<sup>7+</sup> | number | -1 | No | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached. |
| scrolleffect<sup>7+</sup> | string | spring | No | Scroll effect. The options are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.<br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect after the scroll bar is moved to the edge.<br>This attribute is valid only when **loop** is set to **false**.|
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p38731575337"><aname="p38731575337"></a><aname="p38731575337"></a>Fill color of the navigation point indicator.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p08741578331"><aname="p08741578331"></a><aname="p08741578331"></a>Color of the currently selected navigation point indicator.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1287415572334"><aname="p1287415572334"></a><aname="p1287415572334"></a>Diameter of the navigation point indicator.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p28751457163310"><aname="p28751457163310"></a><aname="p28751457163310"></a>Relative position of the indicator in the swiper.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p082712081614"><aname="p082712081614"></a><aname="p082712081614"></a>Next margin, used to reveal a small part of the next item.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1684225411159"><aname="p1684225411159"></a><aname="p1684225411159"></a>Previous margin, used to reveal a small part of the previous item.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section5891352194417"></a>
## Styles
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
<aname="table836435619510"></a>
| Name | Type | Default Value | Mandatory | Description |
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p4302728104511"><aname="p4302728104511"></a><aname="p4302728104511"></a>Triggered when the index of the currently displayed component changes.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p12302172834515"><aname="p12302172834515"></a><aname="p12302172834515"></a>Triggered when the crown of the wearable rotates.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p13660835101610"><aname="p13660835101610"></a><aname="p13660835101610"></a>Triggered when the animation is finished.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section47669296127"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
## Events
<aname="te7404653e7d24f40acacb0305c705aa2"></a>
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.1.4.1.3 "><pid="a446f14fd895449f68d98b2a7e1c4bd04"><aname="a446f14fd895449f68d98b2a7e1c4bd04"></a><aname="a446f14fd895449f68d98b2a7e1c4bd04"></a>Scrolls the child component to the position at the specified index.</p>
<tdclass="cellrowborder"valign="top"width="50%"headers="mcps1.1.4.1.3 "><pid="p47675220555"><aname="p47675220555"></a><aname="p47675220555"></a>Shows the next child component.</p>
**<tab-bar\>** is a child component of **<[tabs](js-components-container-tabs.md)\>** and is used to provide the area to display tab labels. Its child components are horizontally arranged.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**\<tab-bar>** is a child component of **[\<tabs>](js-components-container-tabs.md)** and is used to provide the area to display tab labels. Its child components are horizontally arranged.
| mode | string | scrollable | No| Extensibility of the component width. Available values are as follows:<br>- **scrollable**: The width of a child component is the configured width. When the total width of all child components (including the margins) is greater than the tab-bar width, the child components can scroll horizontally.<br>- **fixed**: The width of a child component equals the tab-bar width divided by the number of child components.|
## Styles
<aname="table20633101642315"></a>
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p129191953112718"><aname="p129191953112718"></a><aname="p129191953112718"></a>Extensibility of the component width. Available values are as follows:</p>
<aname="ul09198536276"></a><aname="ul09198536276"></a><ulid="ul09198536276"><li><strongid="b20114123122910"><aname="b20114123122910"></a><aname="b20114123122910"></a>scrollable</strong>: The width of a child component is the configured width. When the total width of all child components (including the margins) is greater than the tab-bar width, the child components can scroll horizontally.</li><li><strongid="b8929201053917"><aname="b8929201053917"></a><aname="b8929201053917"></a>fixed</strong>: The width of a child component equals the tab-bar width divided by the number of child components.</li></ul>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section193239416388"></a>
Styles in [Universal Styles](js-components-common-styles.md) are supported.
## Events
## Events<a name="section71081937192815"></a>
The [universal events](../arkui-js/js-components-common-events.md) are supported.
Events in [Universal Events](js-components-common-events.md) are supported.
## Methods<a name="section2279124532420"></a>
## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported.
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example<a name="section10605165263911"></a>
For details, see the [tabs example code](js-components-container-tabs.md#section14993155318710).
## Example
For details, see [Example in tabs](../arkui-js/js-components-container-tabs.md#example).
A **<tabs\>** can wrap at most one **<[tab-bar](js-components-container-tab-bar.md)\>** and at most one **<[tab-content](js-components-container-tab-content.md)\>**.
## Attributes<a name="section2907183951110"></a>
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p13231103192517"><aname="p13231103192517"></a><aname="p13231103192517"></a>Index of the active tab.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p10231123114251"><aname="p10231123114251"></a><aname="p10231123114251"></a>Whether the tab is vertical. Available values are as follows:</p>
<aname="ul8231123114251"></a><aname="ul8231123114251"></a><ulid="ul8231123114251"><li><strongid="b12577236554"><aname="b12577236554"></a><aname="b12577236554"></a>false</strong>: The <strongid="b17955203312912"><aname="b17955203312912"></a><aname="b17955203312912"></a><tab-bar></strong> and <strongid="b14567123617917"><aname="b14567123617917"></a><aname="b14567123617917"></a><tab-content></strong> are arranged vertically.</li><li><strongid="b188320450320"><aname="b188320450320"></a><aname="b188320450320"></a>true</strong>: The <strongid="b108915451032"><aname="b108915451032"></a><aname="b108915451032"></a><tab-bar></strong> and <strongid="b168917451631"><aname="b168917451631"></a><aname="b168917451631"></a><tab-content></strong> are arranged horizontally.</li></ul>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section169548171376"></a>
Styles in [Universal Styles](js-components-common-styles.md) are supported.
## Events<a name="section3892191911214"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p161015852613"><aname="p161015852613"></a><aname="p161015852613"></a>Triggered upon tab switching.</p>
<divclass="note"id="note1551155885118"><aname="note1551155885118"></a><aname="note1551155885118"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1251125818519"><aname="p1251125818519"></a><aname="p1251125818519"></a>This event is not triggered when the <strongid="b3802133719811"><aname="b3802133719811"></a><aname="b3802133719811"></a>index</strong> value is dynamically changed.</p>
</div></div>
</td>
</tr>
</tbody>
</table>
## Example<a name="section14993155318710"></a>
```
## Child Components
A **\<tabs>** component can wrap at most one **[\<tab-bar>](../arkui-js/js-components-container-tab-bar.md)** and at most one **[\<tab-content>](../arkui-js/js-components-container-tab-content.md)**.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally.|
## Styles
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet:
Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet:
@@ -20,46 +19,18 @@ The following is an example of using a custom component with **if-else**:
...
@@ -20,46 +19,18 @@ The following is an example of using a custom component with **if-else**:
</div>
</div>
```
```
- The **name** attribute indicates the custom component name \(optional\), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path \(mandatory\) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default.
- Event binding: Use **\(on|@\)**_child1_ syntax to bind a child component event to a custom component. In the child component, use **this.$emit\('**_child1_**', \{params:'**_parameter to pass_**'\}\)** for event triggering and value transferring. In the parent component, call **bindParentVmMethod** method and receive the parameters passed from the child component.
>For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **@children-event** instead of **childrenEvent**: **@children-event="bindParentVmMethod"**.
- The **name** attribute indicates the custom component name (optional), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path (mandatory) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default.
**Table 1** Objects
- Event binding: Use **(on|@)***child1* syntax to bind a child component event to a custom component. In the child component, use **this.$emit('***child1***', {params:'***parameter to pass***'})** for event triggering and value transferring. In the parent component, call **bindParentVmMethod** method and receive the parameters passed from the child component.
> **NOTE**
>
> For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **\@children-event** instead of **childrenEvent**: **\@children-event="bindParentVmMethod"**.
<tdclass="cellrowborder"valign="top"width="75.94759475947595%"headers="mcps1.2.4.1.3 "><pid="p105644412409"><aname="p105644412409"></a><aname="p105644412409"></a>Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (<strongid="b1663610842111"><aname="b1663610842111"></a><aname="b1663610842111"></a>for</strong>, <strongid="b18647087218"><aname="b18647087218"></a><aname="b18647087218"></a>if</strong>, <strongid="b565218842116"><aname="b565218842116"></a><aname="b565218842116"></a>show</strong>, and <strongid="b0657587218"><aname="b0657587218"></a><aname="b0657587218"></a>tid</strong>).</p>
<pid="p356184410403"><aname="p356184410403"></a><aname="p356184410403"></a>Do not use this attribute and <strongid="b1944710452613"><aname="b1944710452613"></a><aname="b1944710452613"></a>private</strong> or <strongid="b1645518414264"><aname="b1645518414264"></a><aname="b1645518414264"></a>public</strong> at the same time. (Rich)</p>
<tdclass="cellrowborder"valign="top"width="75.94759475947595%"headers="mcps1.2.4.1.3 "><pid="p3857192844012"><aname="p3857192844012"></a><aname="p3857192844012"></a>Used for communication between components. This attribute can be transferred to components via <strongid="b19615191652119"><aname="b19615191652119"></a><aname="b19615191652119"></a><tag xxxx='value'></strong>. A <strongid="b56261916152117"><aname="b56261916152117"></a><aname="b56261916152117"></a>props</strong> name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (<strongid="b11631216152114"><aname="b11631216152114"></a><aname="b11631216152114"></a>for</strong>, <strongid="b86351216202115"><aname="b86351216202115"></a><aname="b86351216202115"></a>if</strong>, <strongid="b864018160215"><aname="b864018160215"></a><aname="b864018160215"></a>show</strong>, and <strongid="b364591612115"><aname="b364591612115"></a><aname="b364591612115"></a>tid</strong>). Currently, <strongid="b129739262211"><aname="b129739262211"></a><aname="b129739262211"></a>props</strong> does not support functions.</p>
<tdclass="cellrowborder"valign="top"width="75.94759475947595%"headers="mcps1.2.4.1.3 "><pid="p6422712153413"><aname="p6422712153413"></a><aname="p6422712153413"></a>Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words.</p>
| data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>Do not use this attribute and **private** or **public** at the same time.(Rich) |
| props | Array/Object | Used for communication between components. This attribute can be transferred to components via **\<tag xxxx='value'>**. A **props** name must be in lowercase and cannot start with a dollar sign ($) or underscore (\_). Do not use reserved words (**for**, **if**, **show**, and **tid**). Currently, **props** does not support functions.|
| computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (\_). Do not use reserved words.|
<tdclass="cellrowborder"valign="top"width="35.83%"headers="mcps1.1.6.1.5 "><pid="p3694217141213"><aname="p3694217141213"></a><aname="p3694217141213"></a>Number of columns occupied by this item and offset columns when <strongid="b2585202119227"><aname="b2585202119227"></a><aname="b2585202119227"></a>sizetype</strong> is <strongid="b145851221182211"><aname="b145851221182211"></a><aname="b145851221182211"></a>xs</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strongid="b1058552182220"><aname="b1058552182220"></a><aname="b1058552182220"></a>{"span": 1, "offset": 0}</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.83%"headers="mcps1.1.6.1.5 "><pid="p17694117171211"><aname="p17694117171211"></a><aname="p17694117171211"></a>Number of columns occupied by this item and offset columns when <strongid="b57340307222"><aname="b57340307222"></a><aname="b57340307222"></a>sizetype</strong> is <strongid="b6735103052215"><aname="b6735103052215"></a><aname="b6735103052215"></a>sm</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strongid="b473510307229"><aname="b473510307229"></a><aname="b473510307229"></a>{"span": 1, "offset": 0}</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.83%"headers="mcps1.1.6.1.5 "><pid="p66953176126"><aname="p66953176126"></a><aname="p66953176126"></a>Number of columns occupied by this item and offset columns when <strongid="b103393393221"><aname="b103393393221"></a><aname="b103393393221"></a>sizetype</strong> is <strongid="b43391139202219"><aname="b43391139202219"></a><aname="b43391139202219"></a>md</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strongid="b734019398229"><aname="b734019398229"></a><aname="b734019398229"></a>{"span": 1, "offset": 0}</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.83%"headers="mcps1.1.6.1.5 "><pid="p8695111741217"><aname="p8695111741217"></a><aname="p8695111741217"></a>Number of columns occupied by this item and offset columns when <strongid="b689794313225"><aname="b689794313225"></a><aname="b689794313225"></a>sizetype</strong> is <strongid="b2897194312222"><aname="b2897194312222"></a><aname="b2897194312222"></a>lg</strong>. If you set the value of the number type, you only set the number of occupied columns. You can set a value of the object type for both the number of occupied columns and offset columns, for example, <strongid="b189715439226"><aname="b189715439226"></a><aname="b189715439226"></a>{"span": 1, "offset": 0}</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.83%"headers="mcps1.1.6.1.5 "><pid="p1169581712121"><aname="p1169581712121"></a><aname="p1169581712121"></a>Default number of columns occupied by this item when no breakpoint is set.</p>
<tdclass="cellrowborder"valign="top"width="35.83%"headers="mcps1.1.6.1.5 "><pid="p2069531710128"><aname="p2069531710128"></a><aname="p2069531710128"></a>Default number of offset columns in the container layout direction when <strongid="b19705495222"><aname="b19705495222"></a><aname="b19705495222"></a>"offset"</strong> is not set for a specific <strongid="b8970349172212"><aname="b8970349172212"></a><aname="b8970349172212"></a>sizetype</strong>.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section1948816404128"></a>
| Name | Type | Default Value | Mandatory | Description |
| xs | number\|object | - | No | Number of columns occupied by this item and its offset when **sizetype** is **xs**. If you set the value of the number type, you only set the number of columns. You can set a value of the object type for both the number of occupied columns and the offset, for example, **{"span": 1, "offset": 0}**. |
| sm | number\|object | - | No | Number of columns occupied by this item and its offset when **sizetype** is **sm**. If you set the value of the number type, you only set the number of columns. You can set a value of the object type for both the number of occupied columns and the offset, for example, **{"span": 1, "offset": 0}**. |
| md | number\|object | - | No | Number of columns occupied by this item and its offset when **sizetype** is **md**. If you set the value of the number type, you only set the number of columns. You can set a value of the object type for both the number of occupied columns and the offset, for example, **{"span": 1, "offset": 0}**. |
| lg | number\|object | - | No | Number of columns occupied by this item and its offset when **sizetype** is **lg**. If you set the value of the number type, you only set the number of columns. You can set a value of the object type for both the number of occupied columns and the offset, for example, **{"span": 1, "offset": 0}**. |
| span | number | 1 | No | Default number of columns occupied by the item when no breakpoint is set. |
| offset | number | 0 | No | Default number of offset columns in the container layout direction when **"offset"** is not set for a specific **sizetype**. |
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p18821165563017"><aname="p18821165563017"></a><aname="p18821165563017"></a>Main axis direction of the container. Available values are as follows:</p>
<aname="ul15821145583019"></a><aname="ul15821145583019"></a><ulid="ul15821145583019"><li><strongid="b139844122235"><aname="b139844122235"></a><aname="b139844122235"></a>column</strong>: Items are placed vertically from top to bottom.</li><li><strongid="b13943201572311"><aname="b13943201572311"></a><aname="b13943201572311"></a>row</strong>: Items are placed horizontally from left to right.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p1382145510309"><aname="p1382145510309"></a><aname="p1382145510309"></a>Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows:</p>
<aname="ul282175510308"></a><aname="ul282175510308"></a><ulid="ul282175510308"><li><strongid="b6139102416233"><aname="b6139102416233"></a><aname="b6139102416233"></a>nowrap</strong>: Items are displayed on a single axis.</li><li><strongid="b2067817262239"><aname="b2067817262239"></a><aname="b2067817262239"></a>wrap</strong>: Items are displayed on multiple axes.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p68219555307"><aname="p68219555307"></a><aname="p68219555307"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p>
<aname="ul782165511302"></a><aname="ul782165511302"></a><ulid="ul782165511302"><li><strongid="b8769731192316"><aname="b8769731192316"></a><aname="b8769731192316"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strongid="b771073314238"><aname="b771073314238"></a><aname="b771073314238"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strongid="b1011423512317"><aname="b1011423512317"></a><aname="b1011423512317"></a>center</strong>: Items are centered along the row.</li><li><strongid="b3987391242"><aname="b3987391242"></a><aname="b3987391242"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strongid="b357091132411"><aname="b357091132411"></a><aname="b357091132411"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p17822555103011"><aname="p17822555103011"></a><aname="p17822555103011"></a>How items are aligned along the cross axis of the current row in the container. Available values are as follows:</p>
<aname="ul1822185512309"></a><aname="ul1822185512309"></a><ulid="ul1822185512309"><li><strongid="b16113143415242"><aname="b16113143415242"></a><aname="b16113143415242"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strongid="b20396146112419"><aname="b20396146112419"></a><aname="b20396146112419"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b892674722417"><aname="b892674722417"></a><aname="b892674722417"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b31272211257"><aname="b31272211257"></a><aname="b31272211257"></a>center</strong>: Items are aligned in the middle of the cross axis.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p1882312558307"><aname="p1882312558307"></a><aname="p1882312558307"></a>Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:</p>
<aname="ul282335519305"></a><aname="ul282335519305"></a><ulid="ul282335519305"><li><strongid="b9493718162518"><aname="b9493718162518"></a><aname="b9493718162518"></a>flex-start</strong>: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b11505192419253"><aname="b11505192419253"></a><aname="b11505192419253"></a>flex-end</strong>: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b188881131152510"><aname="b188881131152510"></a><aname="b188881131152510"></a>center</strong>: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.</li><li><strongid="b15345336172513"><aname="b15345336172513"></a><aname="b15345336172513"></a>space-between</strong>: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.</li><li><strongid="b83081740202520"><aname="b83081740202520"></a><aname="b83081740202520"></a>space-around</strong>: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p1482375503018"><aname="p1482375503018"></a><aname="p1482375503018"></a>Type of the view box of the element. Currently, dynamic modification is not supported. Available values are as follows:</p>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p1082465513013"><aname="p1082465513013"></a><aname="p1082465513013"></a>Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when <strongid="b28621856183616"><aname="b28621856183616"></a><aname="b28621856183616"></a>display</strong> is set to <strongid="b3863156133617"><aname="b3863156133617"></a><aname="b3863156133617"></a>grid</strong>.</p>
<pid="p18824145520305"><aname="p18824145520305"></a><aname="p18824145520305"></a>For example, set <strongid="b4153173193711"><aname="b4153173193711"></a><aname="b4153173193711"></a>grid-template-columns</strong> to:</p>
<pid="p68241557304"><aname="p68241557304"></a><aname="p68241557304"></a>(1) <strongid="b846617113713"><aname="b846617113713"></a><aname="b846617113713"></a>50px 100px 60px</strong>: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.</p>
<pid="p4824105513305"><aname="p4824105513305"></a><aname="p4824105513305"></a>(2) <strongid="b1647513243379"><aname="b1647513243379"></a><aname="b1647513243379"></a>1fr 1fr 2fr</strong>: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.</p>
<pid="p128242055163011"><aname="p128242055163011"></a><aname="p128242055163011"></a>(3) <strongid="b726082719376"><aname="b726082719376"></a><aname="b726082719376"></a>30% 20% 50%</strong>: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.</p>
<pid="p282475514306"><aname="p282475514306"></a><aname="p282475514306"></a>(4) <strongid="b7978142816374"><aname="b7978142816374"></a><aname="b7978142816374"></a>repeat (2,100px)</strong>: There are two columns. The first column is 100 px, and the second column is 100 px.</p>
<pid="p17824185516300"><aname="p17824185516300"></a><aname="p17824185516300"></a>(5) <strongid="b109141030143716"><aname="b109141030143716"></a><aname="b109141030143716"></a>auto 1fr 1fr</strong>: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the two columns.</p>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p88241255183013"><aname="p88241255183013"></a><aname="p88241255183013"></a>Size of the gap between two consecutive rows or columns in a grid layout. You can also use <strongid="b6959203393714"><aname="b6959203393714"></a><aname="b6959203393714"></a>grid-gap</strong> to set the same size of the gap between rows and columns. This attribute is valid only when <strongid="b796033313718"><aname="b796033313718"></a><aname="b796033313718"></a>display</strong> is set to <strongid="b69601833153714"><aname="b69601833153714"></a><aname="b69601833153714"></a>grid</strong>.</p>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p13824115519302"><aname="p13824115519302"></a><aname="p13824115519302"></a>Start and end row numbers of the current item in the grid layout. This attribute is valid only when <strongid="b887337113714"><aname="b887337113714"></a><aname="b887337113714"></a>display</strong> of the parent component is <strongid="b1487437153717"><aname="b1487437153717"></a><aname="b1487437153717"></a>grid</strong>. (The <strongid="b0879377371"><aname="b0879377371"></a><aname="b0879377371"></a>display</strong> attribute of the parent component can be set to <strongid="b16871537163710"><aname="b16871537163710"></a><aname="b16871537163710"></a>grid</strong> only for the <strongid="b198853711373"><aname="b198853711373"></a><aname="b198853711373"></a><div></strong> container.)</p>
<tdclass="cellrowborder"valign="top"width="43.12568743125688%"headers="mcps1.1.6.1.5 "><pid="p128256553309"><aname="p128256553309"></a><aname="p128256553309"></a>Start and end column numbers of the current item in the grid layout. This attribute is valid only when <strongid="b8311144193712"><aname="b8311144193712"></a><aname="b8311144193712"></a>display</strong> of the parent component is <strongid="b43111041183711"><aname="b43111041183711"></a><aname="b43111041183711"></a>grid</strong>. (The <strongid="b1331120417371"><aname="b1331120417371"></a><aname="b1331120417371"></a>display</strong> attribute of the parent component can be set to <strongid="b731164115376"><aname="b731164115376"></a><aname="b731164115376"></a>grid</strong> only for the <strongid="b131284183717"><aname="b131284183717"></a><aname="b131284183717"></a><div></strong> container.)</p>
| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.|
| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Items are displayed on a single axis.<br>- **wrap**: Items are displayed on multiple axes.|
| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed towards the start row.<br>- **flex-end**: Items are packed towards the end row.<br>- **center**: Items are centered along the row.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.|
| align-items | string | stretch | No | How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.|
| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:<br>- **flex-start**: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **flex-end**: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **center**: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.<br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.<br>- **space-around**: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:<br>- **flex**: flexible layout.<br>- **grid**: grid layout.<br>- **none**: The box is disabled.|
| grid-template-[columns\|rows] | string | 1 row, 1 column | No | Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when **display** is set to **grid**.<br>Below are some example values of **grid-template-columns**:<br>- **50px 100px 60px**: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px.<br>- **1fr 1fr 2fr**: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares.<br>- **30% 20% 50%**: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%.<br>- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px.<br>- **auto 1fr 1fr**: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.|
| grid-[columns\|rows]-gap | <length> | 0 | No | Size of the gap between two consecutive rows or columns in a grid layout. You can also use **grid-gap** to set the same size of the gap between rows and columns. This attribute is valid only when **display** is set to **grid**.|
| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
| grid-column-[start\|end] | number | - | No | Start and end column numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\<div>** container whose **display** style is set to **grid**.|
Events in [Universal Events](js-components-common-events.md) are supported.
> **NOTE**
>
> Width-related styles are not supported.
## Methods<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Events
## Example<a name="section2021865273710"></a>
The [universal events](../arkui-js/js-components-common-events.md) are supported.
```
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
The **<grid-container\>** component is the root container of the grid layout. Within the root container, you can use **<grid-row\>** and **<grid-col\>** for the grid layout.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<grid-container>** component is the root container of the grid layout. Within the root container, you can use **\<grid-row>** and **\<grid-col>** for the grid layout.
| columns | string \| number | auto | No| Total number of columns in the grid. If a value of the string type is set, it can only be **auto**. In this case, the total number of columns is determined based on the current **sizetype**, which can be one of the following values:<br>- **xs**: 2 columns<br>- **sm**: 4 columns<br>- **md**: 8 columns<br>- **lg**: 12 columns|
| sizetype | string | auto | No| Size-responsive type of the grid. Available values are **xs**, **sm**, **md**, and **lg**. If the default value **auto** is used, the framework automatically selects one of the four types based on the current container size.|
| gridtemplate<sup>6+</sup> | string | default | No| Layout template of the grid, which defines the columns, gutters, and margins for different size-responsive types. This attribute is available when **columns** and **sizetype** are set to **auto**. For details about the values, see **gridtemplate**.|
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p224762773015"><aname="p224762773015"></a><aname="p224762773015"></a>Total number of columns in the grid. If a value of the string type is set, it can only be <strongid="b7289163434214"><aname="b7289163434214"></a><aname="b7289163434214"></a>auto</strong>. In this case, the total number of columns is determined based on the current <strongid="b9588131715436"><aname="b9588131715436"></a><aname="b9588131715436"></a>sizetype</strong>, which can be one of the following values:</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p7247627163020"><aname="p7247627163020"></a><aname="p7247627163020"></a>Size-responsive type of the grid. Available values are <strongid="b91463252455"><aname="b91463252455"></a><aname="b91463252455"></a>xs</strong>, <strongid="b1714732794517"><aname="b1714732794517"></a><aname="b1714732794517"></a>sm</strong>, <strongid="b15924192884519"><aname="b15924192884519"></a><aname="b15924192884519"></a>md</strong>, and <strongid="b15978430104510"><aname="b15978430104510"></a><aname="b15978430104510"></a>lg</strong>. If the default value <strongid="b101844241462"><aname="b101844241462"></a><aname="b101844241462"></a>auto</strong> is used, the framework automatically selects one of the four types based on the current container size.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p5414150172819"><aname="p5414150172819"></a><aname="p5414150172819"></a>Layout template of the grid, which defines the columns, gutters, and margins for different size-responsive types. This attribute is available when <strongid="b1258512715617"><aname="b1258512715617"></a><aname="b1258512715617"></a>columns</strong> and <strongid="b476518131765"><aname="b476518131765"></a><aname="b476518131765"></a>sizetype</strong> are set to <strongid="b148138151263"><aname="b148138151263"></a><aname="b148138151263"></a>auto</strong>. For details about the values, see <ahref="#table135645386317">gridtemplate options</a>.</p>
| justify-content | string | flex-start | No| How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed towards the start row.<br>- **flex-end**: Items are packed towards the end row.<br>- **center**: Items are centered along the row.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.|
| align-items | string | stretch | No| How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.|
| align-content | string | flex-start | No| Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:<br>- **flex-start**: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **flex-end**: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **center**: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.<br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.<br>- **space-around**: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="43.00569943005699%"headers="mcps1.1.6.1.5 "><pid="p387092216251"><aname="p387092216251"></a><aname="p387092216251"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p>
<aname="ul10870182213257"></a><aname="ul10870182213257"></a><ulid="ul10870182213257"><li><strongid="b51288404238"><aname="b51288404238"></a><aname="b51288404238"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strongid="b5644141515401"><aname="b5644141515401"></a><aname="b5644141515401"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strongid="b7864161612403"><aname="b7864161612403"></a><aname="b7864161612403"></a>center</strong>: Items are centered along the row.</li><li><strongid="b88480177406"><aname="b88480177406"></a><aname="b88480177406"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strongid="b18281819184011"><aname="b18281819184011"></a><aname="b18281819184011"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.00569943005699%"headers="mcps1.1.6.1.5 "><pid="p68701122112519"><aname="p68701122112519"></a><aname="p68701122112519"></a>How items are aligned along the cross axis of the current row in the container. Available values are as follows:</p>
<aname="ul3870122212514"></a><aname="ul3870122212514"></a><ulid="ul3870122212514"><li><strongid="b15990175016232"><aname="b15990175016232"></a><aname="b15990175016232"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strongid="b524165320338"><aname="b524165320338"></a><aname="b524165320338"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b676224516400"><aname="b676224516400"></a><aname="b676224516400"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b364214812409"><aname="b364214812409"></a><aname="b364214812409"></a>center</strong>: Items are aligned in the middle of the cross axis.</li></ul>
<tdclass="cellrowborder"valign="top"width="43.00569943005699%"headers="mcps1.1.6.1.5 "><pid="p168715228251"><aname="p168715228251"></a><aname="p168715228251"></a>Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:</p>
<aname="ul38718227256"></a><aname="ul38718227256"></a><ulid="ul38718227256"><li><strongid="b6835336414"><aname="b6835336414"></a><aname="b6835336414"></a>flex-start</strong>: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b16351217154115"><aname="b16351217154115"></a><aname="b16351217154115"></a>flex-end</strong>: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b122251326204112"><aname="b122251326204112"></a><aname="b122251326204112"></a>center</strong>: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.</li><li><strongid="b193979315414"><aname="b193979315414"></a><aname="b193979315414"></a>space-between</strong>: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.</li><li><strongid="b1724683484119"><aname="b1724683484119"></a><aname="b1724683484119"></a>space-around</strong>: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.</li></ul>
</td>
</tr>
</tbody>
</table>
## Events<a name="section291933813509"></a>
The [universal events](../arkui-js/js-components-common-events.md) are supported.
Events in [Universal Events](js-components-common-events.md) are supported.
## Method<a name="section13156101584913"></a>
## Methods
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
<tdclass="cellrowborder"valign="top"width="45%"headers="mcps1.1.4.1.3 "><pid="p51491967515"><aname="p51491967515"></a><aname="p51491967515"></a>Returns the number of columns in the grid.</p>
<tdclass="cellrowborder"valign="top"width="45%"headers="mcps1.1.4.1.3 "><pid="p81491761519"><aname="p81491761519"></a><aname="p81491761519"></a>Returns the column width of the grid.</p>
<tdclass="cellrowborder"valign="top"width="45%"headers="mcps1.1.4.1.3 "><pid="p51495615511"><aname="p51495615511"></a><aname="p51495615511"></a>Returns the gutter width between columns of the grid.</p>
<tdclass="cellrowborder"valign="top"width="45%"headers="mcps1.1.4.1.3 "><pid="p1414911617515"><aname="p1414911617515"></a><aname="p1414911617515"></a>Returns the size-responsive type of the grid container, which can be <strongid="b1935468442"><aname="b1935468442"></a><aname="b1935468442"></a>xs</strong>, <strongid="b79446104417"><aname="b79446104417"></a><aname="b79446104417"></a>sm</strong>, <strongid="b179546164415"><aname="b179546164415"></a><aname="b179546164415"></a>md</strong>, or <strongid="b910346144414"><aname="b910346144414"></a><aname="b910346144414"></a>lg</strong>.</p>
</td>
</tr>
</tbody>
</table>
## Example Code<a name="section132671420142616"></a>
For details, see [grid-col](js-components-grid-col.md).
## Example
For details, see [Example in grid-col](../arkui-js/js-components-grid-col.md#example).
The **<grid-row\>** component is a container used as a child component of **<grid-container\>**. Each **<grid-col\>** component is arranged horizontally with **flex**-related styles. By default, items in the **<grid-row\>** component are packed towards the start row and aligned to the start of the cross axis. You can set the items to be displayed in multiple axes.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<grid-row>** component is a container used as a child component of **\<grid-container>**. Each **\<grid-col>** component is arranged horizontally with **flex**-related styles. By default, items in the **\<grid-row>** component are packed towards the start row and aligned to the start of the cross axis. You can set the items to be displayed in multiple axes.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p883731162713"><aname="p883731162713"></a><aname="p883731162713"></a>Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows:</p>
<aname="ul1583771142719"></a><aname="ul1583771142719"></a><ulid="ul1583771142719"><li><strongid="b1899950182014"><aname="b1899950182014"></a><aname="b1899950182014"></a>nowrap</strong>: Items are displayed on a single axis.</li><li><strongid="b18315182162018"><aname="b18315182162018"></a><aname="b18315182162018"></a>wrap</strong>: Items are displayed on multiple axes.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p198371919278"><aname="p198371919278"></a><aname="p198371919278"></a>How items are aligned along the main axis of the current row in the container. Available values are as follows:</p>
<aname="ul20837121152717"></a><aname="ul20837121152717"></a><ulid="ul20837121152717"><li><strongid="b1442428202016"><aname="b1442428202016"></a><aname="b1442428202016"></a>flex-start</strong>: Items are packed towards the start row.</li><li><strongid="b233318913202"><aname="b233318913202"></a><aname="b233318913202"></a>flex-end</strong>: Items are packed towards the end row.</li><li><strongid="b162541410172015"><aname="b162541410172015"></a><aname="b162541410172015"></a>center</strong>: Items are centered along the row.</li><li><strongid="b131513117202"><aname="b131513117202"></a><aname="b131513117202"></a>space-between</strong>: Items are positioned with space between the rows.</li><li><strongid="b1021031292014"><aname="b1021031292014"></a><aname="b1021031292014"></a>space-around</strong>: Items are positioned with space before, between, and after the rows.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p983813116271"><aname="p983813116271"></a><aname="p983813116271"></a>How items are aligned along the cross axis of the current row in the container. Available values are as follows:</p>
<aname="ul2838201122714"></a><aname="ul2838201122714"></a><ulid="ul2838201122714"><li><strongid="b52351418182019"><aname="b52351418182019"></a><aname="b52351418182019"></a>stretch</strong>: Items are stretched to the same height or width as the container in the cross axis direction. </li><li><strongid="b19675172015207"><aname="b19675172015207"></a><aname="b19675172015207"></a>flex-start</strong>: Items are aligned to the start of the cross axis.</li><li><strongid="b2654721132018"><aname="b2654721132018"></a><aname="b2654721132018"></a>flex-end</strong>: Items are aligned to the end of the cross axis.</li><li><strongid="b4585102215204"><aname="b4585102215204"></a><aname="b4585102215204"></a>center</strong>: Items are aligned in the middle of the cross axis.</li></ul>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p148392011271"><aname="p148392011271"></a><aname="p148392011271"></a>Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:</p>
<aname="ul15839101102715"></a><aname="ul15839101102715"></a><ulid="ul15839101102715"><li><strongid="b232014272206"><aname="b232014272206"></a><aname="b232014272206"></a>flex-start</strong>: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b034111308204"><aname="b034111308204"></a><aname="b034111308204"></a>flex-end</strong>: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.</li><li><strongid="b58521334203"><aname="b58521334203"></a><aname="b58521334203"></a>center</strong>: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start of the container's cross axis and the first row is equal to the spacing between the end of the container's cross axis and the last row.</li><li><strongid="b126908361201"><aname="b126908361201"></a><aname="b126908361201"></a>space-between</strong>: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.</li><li><strongid="b19242184011208"><aname="b19242184011208"></a><aname="b19242184011208"></a>space-around</strong>: All rows are evenly distributed in the container, and the spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.</li></ul>
| flex-wrap | string | nowrap | No| Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:<br>- **nowrap**: Items are displayed on a single axis.<br>- **wrap**: Items are displayed on multiple axes.|
| justify-content | string | flex-start | No| How items are aligned along the main axis of the flex container. Available values are as follows:<br>- **flex-start**: Items are packed towards the start row.<br>- **flex-end**: Items are packed towards the end row.<br>- **center**: Items are centered along the row.<br>- **space-between**: Items are positioned with space between the rows.<br>- **space-around**: Items are positioned with space before, between, and after the rows.|
| align-items | string | flex-start | No| How items are aligned along the cross axis in a flex container. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.|
| align-content | string | flex-start | No| Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:<br>- **flex-start**: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **flex-end**: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.<br>- **center**: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.<br>- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.<br>- **space-around**: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
> **NOTE**
>
> Width-related styles are not supported.
## Events
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example
For details, see [Example in grid-col](../arkui-js/js-components-grid-col.md#example).
| attributeName | string | - | No| Name of the component to which the animation is applied.|
</th>
| begin | <time> | 0 | No| Delay time of the animation.<br>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.|
| dur | <time> | 0 | No| Animation duration. If **dur** is not set, the value of **end**-**begin** is used as the duration. If the value is less than or equal to 0, the animation is not triggered.<br>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.|
</th>
| end | <time> | 0 | No| Duration after which the animation ends. The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.|
| repeatCount | <number \| indefinite> | 1 | No| Number of times the animation is played. The default value is indefinite. You can set the value to **1** to play the animation only once.|
</th>
| fill | <freeze \| remove> | remove | No| State when the animation ends.|
| calcMode | <discrete \| linear \| paced \| spline> | linear | No| Interpolation mode of the animation.<br>**discrete**: The value of **from** directly jumps to the value of **to**.<br>**linear**: linear.<br>**paced**: linear. After this value is set, the values of **keyTimes** and **keyPoints** are invalid.<br>**spline**: user-defined Bessel curve. The spline point is defined in the **keyTimes** attribute, and the control point of each interval is defined by **keySplines**.|
</th>
| keyTimes | string | - | No| Start time of the key frame animation. The value ranges from 0 to 1, separated by semicolons (;), for example, **0;0.3;0.8;1**. **keyTimes**, **keySplines**, and **values** are combined to set the key frame animation. The number of **keyTimes** is the same as that of **values**. The number of **keySplines** is the number of **keyTimes** minus 1.|
</tr>
| keySplines | string | - | No| A set of Bessel control points associated with **keyTimes**. You can define the Bessel curves for each key frame. The curves are separated by semicolons (;). The format of the two controls in the curve is x1 y1 x2 y2. For example, **0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1**.|
</thead>
| by | number | - | No| Relative offset value to add to a specified attribute in the animation. The default value of **from** is the original attribute value.|
| from | string | - | No| Start value of the attribute to which the animation is applied.<br>If the **values** attribute has been set, the **from** attribute is invalid.|
</td>
| to | string | - | No| End value of the attribute to which the animation is applied.<br>If the **values** attribute has been set, the **to** attribute is invalid.|
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="a1a1731af05554f119fa365748f276bb2"><aname="a1a1731af05554f119fa365748f276bb2"></a><aname="a1a1731af05554f119fa365748f276bb2"></a>Unique ID of the component.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="adbe7ecbee96b4f938b04a4b8d62791bf"><aname="adbe7ecbee96b4f938b04a4b8d62791bf"></a><aname="adbe7ecbee96b4f938b04a4b8d62791bf"></a>Name of the component to which the animation is applied.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p10941922464"><aname="p10941922464"></a><aname="p10941922464"></a>Delay time of the animation.</p>
<pid="p1094114216469"><aname="p1094114216469"></a><aname="p1094114216469"></a>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1676818505465"><aname="p1676818505465"></a><aname="p1676818505465"></a>Animation duration. If <strongid="b1544660203114"><aname="b1544660203114"></a><aname="b1544660203114"></a>dur</strong> is not set, the value of <strongid="b136951589311"><aname="b136951589311"></a><aname="b136951589311"></a>end</strong>-<strongid="b1444821113311"><aname="b1444821113311"></a><aname="b1444821113311"></a>begin</strong> is used as the duration. If the value is less than or equal to 0, the animation is not triggered.</p>
<pid="p18768125018462"><aname="p18768125018462"></a><aname="p18768125018462"></a>The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p759484922319"><aname="p759484922319"></a><aname="p759484922319"></a>Duration after which the animation ends. The value can be ms (ms), s (second), or m (minute). The default value is s (second). Other formats are not supported.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p759344911237"><aname="p759344911237"></a><aname="p759344911237"></a>Number of times the animation is played. The default value is indefinite. You can set the value to <strongid="b14918201573219"><aname="b14918201573219"></a><aname="b14918201573219"></a>1</strong> to play the animation only once.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p557624915236"><aname="p557624915236"></a><aname="p557624915236"></a>State when the animation ends.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p2083395862919"><aname="p2083395862919"></a><aname="p2083395862919"></a>Interpolation mode of the animation.</p>
<pid="p191847533337"><aname="p191847533337"></a><aname="p191847533337"></a><strongid="b8323142113216"><aname="b8323142113216"></a><aname="b8323142113216"></a>discrete</strong>: The value of <strongid="b752455013214"><aname="b752455013214"></a><aname="b752455013214"></a>from</strong> directly jumps to the value of <strongid="b411775643213"><aname="b411775643213"></a><aname="b411775643213"></a>to</strong>.</p>
<pid="p599115247353"><aname="p599115247353"></a><aname="p599115247353"></a><strongid="b125981513183319"><aname="b125981513183319"></a><aname="b125981513183319"></a>paced</strong>: linear. After this value is set, the values of <strongid="b19223130123317"><aname="b19223130123317"></a><aname="b19223130123317"></a>keyTimes</strong> and <strongid="b1386173520336"><aname="b1386173520336"></a><aname="b1386173520336"></a>keyPoints</strong> are invalid.</p>
<pid="p1734674418335"><aname="p1734674418335"></a><aname="p1734674418335"></a><strongid="b136563407338"><aname="b136563407338"></a><aname="b136563407338"></a>spline</strong>: user-defined Bessel curve. The spline point is defined in the <strongid="b3738847163315"><aname="b3738847163315"></a><aname="b3738847163315"></a>keyTimes</strong> attribute, and the control point of each interval is defined by <strongid="b6133175153320"><aname="b6133175153320"></a><aname="b6133175153320"></a>keySplines</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p621412519306"><aname="p621412519306"></a><aname="p621412519306"></a>Start time of the key frame animation. The value ranges from 0 to 1, separated by semicolons (;), for example, <strongid="b1375915100341"><aname="b1375915100341"></a><aname="b1375915100341"></a>0;0.3;0.8;1</strong>. <strongid="b196691614123412"><aname="b196691614123412"></a><aname="b196691614123412"></a>keyTimes</strong>, <strongid="b388521518349"><aname="b388521518349"></a><aname="b388521518349"></a>keySplines</strong>, and <strongid="b105861120173419"><aname="b105861120173419"></a><aname="b105861120173419"></a>values</strong> are combined to set the key frame animation. The number of <strongid="b11841122810348"><aname="b11841122810348"></a><aname="b11841122810348"></a>keyTimes</strong> is the same as that of <strongid="b8880193063411"><aname="b8880193063411"></a><aname="b8880193063411"></a>values</strong>. The number of <strongid="b114117381341"><aname="b114117381341"></a><aname="b114117381341"></a>keySplines</strong> is the number of <strongid="b695174110345"><aname="b695174110345"></a><aname="b695174110345"></a>keyTimes</strong> minus 1.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p5386113518391"><aname="p5386113518391"></a><aname="p5386113518391"></a>A set of Bessel control points associated with <strongid="b37611449153418"><aname="b37611449153418"></a><aname="b37611449153418"></a>keyTimes</strong>. You can define the Bessel curves for each key frame. The curves are separated by semicolons (;). The format of the two controls in the curve is x1 y1 x2 y2. For example, <strongid="b42741357193520"><aname="b42741357193520"></a><aname="b42741357193520"></a>0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1</strong>.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p772662145916"><aname="p772662145916"></a><aname="p772662145916"></a>Relative offset value to add to a specified attribute in the animation. The default value of <strongid="b1538419278369"><aname="b1538419278369"></a><aname="b1538419278369"></a>from</strong> is the original attribute value.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p17372184944016"><aname="p17372184944016"></a><aname="p17372184944016"></a>Start value of the attribute to which the animation is applied.</p>
<pid="p18674115684120"><aname="p18674115684120"></a><aname="p18674115684120"></a>If the <strongid="b14993865376"><aname="b14993865376"></a><aname="b14993865376"></a>values</strong> attribute has been set, the <strongid="b663481314372"><aname="b663481314372"></a><aname="b663481314372"></a>from</strong> attribute is invalid.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p131031856134010"><aname="p131031856134010"></a><aname="p131031856134010"></a>End value of the attribute to which the animation is applied.</p>
<pid="p3660170134220"><aname="p3660170134220"></a><aname="p3660170134220"></a>If the <strongid="b5960321193718"><aname="b5960321193718"></a><aname="b5960321193718"></a>values</strong> attribute has been set, the <strongid="b159601321193715"><aname="b159601321193715"></a><aname="b159601321193715"></a>to</strong> attribute is invalid.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1277755115407"><aname="p1277755115407"></a><aname="p1277755115407"></a>Change value of a group of animations. The format is value1;value2;value3.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1211954714533"><aname="p1211954714533"></a><aname="p1211954714533"></a>Point position of a group of key frames. The value of each frame is the distance proportion of the object along the path. The function is the same as that of <strongid="b1312051017397"><aname="b1312051017397"></a><aname="b1312051017397"></a>values</strong> in the <strongid="b176954136392"><aname="b176954136392"></a><aname="b176954136392"></a>animate</strong> attribute.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p21152477539"><aname="p21152477539"></a><aname="p21152477539"></a>Motion path. The syntax is the same as that of the <strongid="b98551329133916"><aname="b98551329133916"></a><aname="b98551329133916"></a>d</strong> attribute of the <strongid="b031838113914"><aname="b031838113914"></a><aname="b031838113914"></a><path></strong> component.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p981164295716"><aname="p981164295716"></a><aname="p981164295716"></a>Rotation direction of an animation object.</p>
</td>
</tr>
</tbody>
</table>
## Example<a name="section360556124815"></a>
```
## Attributes
The **animate** attributes (**values** does not take effect) and the attributes in the following table are supported.
| keyPoints | string | - | Yes| Point position of a group of key frames. The value of each frame is the distance proportion of the object along the path. The function is the same as that of **values** in the **animate** attribute.|
| path | string | - | Yes| Motion path. The syntax is the same as that of the **d** attribute of the **\<path>** component. |
| rotate | [auto \| auto-reverse \|<number>] | auto | No| Rotation direction of an animation object.|
## Example
```html
<!-- xxx.hml -->
<!-- xxx.hml -->
<divclass="container">
<divclass="container">
<svgfill="white"width="400"height="400">
<svgfill="white"width="400"height="400">
...
@@ -90,5 +52,5 @@ The **animate** attributes \(**values** does not take effect\) and the attrib
...
@@ -90,5 +52,5 @@ The **animate** attributes \(**values** does not take effect\) and the attrib
>**OffscreenCanvasRenderingContext2D** is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on an **OffscreenCanvas**.
Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on an **OffscreenCanvas**.
## Attributes<a name="section661391987"></a>
In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
## Attributes
<aname="table67211828124016"></a>
In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the input image.<br>- **opacity**: sets the opacity of the image.<br>- **saturate**: sets the saturation of the image.<br>- **sepia**: converts the image to dark brown. |
<pid="p4505204453214"><aname="p4505204453214"></a><aname="p4505204453214"></a>Available options are as follows:</p>
```js
<aname="ul03421175334"></a><aname="ul03421175334"></a><ulid="ul03421175334"><li><strongid="b1977553414014"><aname="b1977553414014"></a><aname="b1977553414014"></a>blur</strong>: applies the Gaussian blur for the image.</li><li><strongid="b2316102518"><aname="b2316102518"></a><aname="b2316102518"></a>brightness</strong>: applies a linear multiplication to the image to make it look brighter or darker.</li><li><strongid="b133422021012"><aname="b133422021012"></a><aname="b133422021012"></a>contrast</strong>: adjusts the image contrast.</li><li><strongid="b1132513461314"><aname="b1132513461314"></a><aname="b1132513461314"></a>drop-shadow</strong>: sets a shadow effect for the image.</li><li><strongid="b6985195518111"><aname="b6985195518111"></a><aname="b6985195518111"></a>grayscale</strong>: converts the image to a grayscale image.</li><li><strongid="b1225361013210"><aname="b1225361013210"></a><aname="b1225361013210"></a>hue-rotate</strong>: applies hue rotation to the image.</li><li><strongid="b79537247218"><aname="b79537247218"></a><aname="b79537247218"></a>invert</strong>: inverts the input image.</li><li><strongid="b15492312217"><aname="b15492312217"></a><aname="b15492312217"></a>opacity</strong>: opacity of the converted image.</li><li><strongid="b720319540212"><aname="b720319540212"></a><aname="b720319540212"></a>saturate</strong>: saturation of the converted image.</li><li><strongid="b39940155312"><aname="b39940155312"></a><aname="b39940155312"></a>sepia</strong>: converts the image to dark brown.</li></ul>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p168291512124013"><a name="p168291512124013"></a><a name="p168291512124013"></a>Path used for checking. If this parameter is not set, the current path is used.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p6592518124911"><a name="p6592518124911"></a><a name="p6592518124911"></a>X-coordinate of the point used for checking.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p79061374406"><a name="p79061374406"></a><a name="p79061374406"></a>Y-coordinate of the point used for checking.</p>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1537310444489"><a name="p1537310444489"></a><a name="p1537310444489"></a>Whether a specified point is in the path area.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p91855319403"><a name="p91855319403"></a><a name="p91855319403"></a>Path used for checking. If this parameter is not set, the current path is used.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p518185344013"><a name="p518185344013"></a><a name="p518185344013"></a>X-coordinate of the point used for checking.</p>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p2018195312409"><a name="p2018195312409"></a><a name="p2018195312409"></a>Y-coordinate of the point used for checking.</p>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p12572186101919"><a name="p12572186101919"></a><a name="p12572186101919"></a>Whether a specified point is in the path area.</p>
