| <template> |
| <scoller style='padding:30'> |
| <div class='direction'> |
| <text>role:button text btn </text> |
| <text class='box' role='button' aria-label='I am a button with text' >text button</text> |
| </div> |
| <div class='direction'> |
| <text>role:button div btn </text> |
| <div class='box' role='button' aria-label='I am a button with div' > |
| </div> |
| </div> |
| |
| <div class='direction'> |
| <text>role:input </text> |
| <input class='box' aria-label='I am a input' placeholder='please input'></input> |
| </div> |
| <div class='direction'> |
| <text>role:search </text> |
| <input class='box' role='search' aria-label='I am a search item' placeholder='please input something to search'></input> |
| </div> |
| |
| <div class='direction'> |
| <text>role:link </text> |
| <a class='box' role='link' href='http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js' aria-label='I am a link'></a> |
| </div> |
| |
| <div class='direction'> |
| <text>role:img </text> |
| <image class='box' role='img' src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5f234c7e0d7b020818c437b303b099b6/d4628535e5dde711a1ca272da0efce1b9c1661d4.jpg" |
| aria-label='I am a image, a little dog with brown hair'></image> |
| </div> |
| |
| <div class='direction'> |
| <text aria-hidden='true'>hidden from voice-over/talkback </text> |
| <image class='box' aria-hidden='true' role='img' src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5f234c7e0d7b020818c437b303b099b6/d4628535e5dde711a1ca272da0efce1b9c1661d4.jpg" aria-label='I am a image'></image> |
| </div> |
| |
| </scroller> |
| </template> |
| |
| <style> |
| .box { |
| border-width:2; |
| border-color:red; |
| width:200; |
| height:50; |
| margin-left:20; |
| } |
| .direction { |
| flex-direction:row; |
| padding:20; |
| margin:10; |
| border-bottom-width:2; |
| border-color:black; |
| } |
| |
| </style> |