| <!DOCTYPE html> |
| <html lang="en-US"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Common Styles | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/81.03d1925e.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/113.b1c17feb.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/160.2a970224.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/25.e9877e57.js"><link rel="prefetch" href="/assets/js/26.8905d6a0.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/61.b54b9195.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/88.e9171a32.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/styles/common-styles.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/styles/common-styles.html" class="nav-link">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/styles/common-styles.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/styles/common-styles.html" class="nav-link">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>API</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/api/weex-variable.html" class="sidebar-link">Weex Variable</a></li><li><a href="/docs/api/android-apis.html" class="sidebar-link">Android APIs</a></li><li><a href="/docs/api/ios-apis.html" class="sidebar-link">iOS APIs</a></li><li><a href="/docs/api/js-service.html" class="sidebar-link">JS Service</a></li><li><a href="/docs/api/broadcast-channel.html" class="sidebar-link">BroadcastChannel</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Built-in Components</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/components/a.html" class="sidebar-link"><a></a></li><li><a href="/docs/components/div.html" class="sidebar-link"><div></a></li><li><a href="/docs/components/text.html" class="sidebar-link"><text></a></li><li><a href="/docs/components/image.html" class="sidebar-link"><image></a></li><li><a href="/docs/components/list.html" class="sidebar-link"><list></a></li><li><a href="/docs/components/cell.html" class="sidebar-link"><cell></a></li><li><a href="/docs/components/loading.html" class="sidebar-link"><loading></a></li><li><a href="/docs/components/refresh.html" class="sidebar-link"><refresh></a></li><li><a href="/docs/components/recycle-list.html" class="sidebar-link"><recycle-list></a></li><li><a href="/docs/components/scroller.html" class="sidebar-link"><scroller></a></li><li><a href="/docs/components/slider.html" class="sidebar-link"><slider></a></li><li><a href="/docs/components/indicator.html" class="sidebar-link"><indicator></a></li><li><a href="/docs/components/textarea.html" class="sidebar-link"><textarea></a></li><li><a href="/docs/components/input.html" class="sidebar-link"><input></a></li><li><a href="/docs/components/waterfall.html" class="sidebar-link"><waterfall></a></li><li><a href="/docs/components/video.html" class="sidebar-link"><video></a></li><li><a href="/docs/components/web.html" class="sidebar-link"><web></a></li><li><a href="/docs/components/richtext.html" class="sidebar-link"><richtext></a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Built-in Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/animation.html" class="sidebar-link">animation</a></li><li><a href="/docs/modules/clipboard.html" class="sidebar-link">clipboard</a></li><li><a href="/docs/modules/dom.html" class="sidebar-link">dom</a></li><li><a href="/docs/modules/globalEvent.html" class="sidebar-link">globalEvent</a></li><li><a href="/docs/modules/meta.html" class="sidebar-link">meta</a></li><li><a href="/docs/modules/modal.html" class="sidebar-link">modal</a></li><li><a href="/docs/modules/navigator.html" class="sidebar-link">navigator</a></li><li><a href="/docs/modules/picker.html" class="sidebar-link">picker</a></li><li><a href="/docs/modules/storage.html" class="sidebar-link">storage</a></li><li><a href="/docs/modules/stream.html" class="sidebar-link">stream</a></li><li><a href="/docs/modules/webview.html" class="sidebar-link">webview</a></li><li><a href="/docs/modules/websockets.html" class="sidebar-link">webSockets</a></li><li><a href="/docs/modules/deviceInfo.html" class="sidebar-link">deviceInfo</a></li><li><a href="/docs/modules/console-log.html" class="sidebar-link">console-log</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Styles</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/styles/common-styles.html" class="active sidebar-link">Common Styles</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#box-model" class="sidebar-link">Box Model</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#flexbox" class="sidebar-link">Flexbox</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#position" class="sidebar-link">Position</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#transition" class="sidebar-link">Transition</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#transform" class="sidebar-link">Transform</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#pseudo-class-v0-9-5" class="sidebar-link">Pseudo class</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#linear-gradient-v0-10" class="sidebar-link">Linear-gradient</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#box-shadow-v0-11" class="sidebar-link">Box-shadow</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#accessibility" class="sidebar-link">Accessibility</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#other-common-style" class="sidebar-link">Other Common Style</a></li><li class="sidebar-sub-header"><a href="/docs/styles/common-styles.html#simple-step" class="sidebar-link">Simple Step</a></li></ul></li><li><a href="/docs/styles/text-styles.html" class="sidebar-link">Text Styles</a></li><li><a href="/docs/styles/css-units.html" class="sidebar-link">CSS Units</a></li><li><a href="/docs/styles/color-name.html" class="sidebar-link">Color name</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Events</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/events/common-events.html" class="sidebar-link">Common Events</a></li><li><a href="/docs/events/event-bubbling.html" class="sidebar-link">Event Bubble</a></li><li><a href="/docs/events/gesture.html" class="sidebar-link">Gesture</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="common-styles"><a href="#common-styles" class="header-anchor">#</a> Common Styles</h1><p>All of weex tags share some common style rules</p><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>The supported styles is listed below, and some component may support custom style, which you can check in the component's doc. Except for this, other styles are not supported.</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Weex supports <code>px</code>and <code>wx</code>(not affected by screen width and viewPortWidth) as length unit, <code>%</code>, <code>rem</code>, <code>em</code> are not supported.</p></div><h2 id="box-model"><a href="#box-model" class="header-anchor">#</a> Box Model</h2><p>Weex box model based on the <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_mode" target="_blank" rel="noopener noreferrer">CSS box model<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, all of weex elements can be considered as boxes.</p><p><img src="https://img.alicdn.com/tfs/TB13u.4n5rpK1RjSZFhXXXSdXXa-377-340.png" alt></p><p>The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Weex only supports <code>box-sizing:border-box</code>, in which box size includes <code>content</code>, <code>padding</code> and <code>border-width</code> and excludes <code>margin</code></p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><ul><li>On Android, Weex only supports <code>overflow:hidden</code>.</li><li>On iOS, Weex supports <code>overflow:hidden</code> and <code>overflow:visible</code> and by default, it is <code>overflow:visible</code>.</li></ul></div><p>The following code snippets shows the basic usage of box model</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 20<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| </code></pre></div><h3 id="width"><a href="#width" class="header-anchor">#</a> width</h3><p><code>width</code>: <code>length</code> type, default value <code>auto</code></p><h3 id="height"><a href="#height" class="header-anchor">#</a> height</h3><p><code>height</code>: <code>length</code> type, default value <code>auto</code></p><h3 id="padding"><a href="#padding" class="header-anchor">#</a> padding</h3><p><code>padding</code> specifies the space between element content and the element border. One can use shorthand for four edges or specify the padding for one edge:</p><ul><li><code>padding: {length}</code>: padding for four edges, default value <code>0</code>,</li><li><code>padding-left {length}</code>: default value <code>0</code></li><li><code>padding-right {length}</code>: default value <code>0</code></li><li><code>padding-top {length}</code>: default value <code>0</code></li><li><code>padding-bottom {length}</code>: default value <code>0</code></li></ul><h3 id="border"><a href="#border" class="header-anchor">#</a> border</h3><div class="warning custom-block"><p class="custom-block-title">Only for Android</p><p>It may cause crash with exception <strong>Unable to create layer for xxx</strong> if the length of border exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.</p><p>The maximum of the border length is device dependent, but you are in the danger zone if the length of your border is longer than the screen height.</p></div><h4 id="border-style"><a href="#border-style" class="header-anchor">#</a> border-style</h4><p>The <code>border-style</code> CSS property is a shorthand property that sets the line style for all four sides of an element's border. One can use shorthand for four edges or specify the style for one edge:</p><ul><li><code>border-style</code>: values <code>solid</code> | <code>dashed</code> | <code>dotted</code>, default value <code>solid</code></li><li><code>border-left-style</code>: values <code>solid</code> | <code>dashed</code> | <code>dotted</code>, default value <code>solid</code></li><li><code>border-top-style</code>: values <code>solid</code> | <code>dashed</code> | <code>dotted</code>, default value <code>solid</code></li><li><code>border-right-style</code>: values <code>solid</code> | <code>dashed</code> | <code>dotted</code>, default value <code>solid</code></li><li><code>border-bottom-style</code>: values <code>solid</code> | <code>dashed</code> | <code>dotted</code>, default value <code>solid</code></li></ul><h4 id="border-width"><a href="#border-width" class="header-anchor">#</a> border-width</h4><p>The border-width shorthand CSS property sets the widths of all four sides of an element's border. One can use shorthand for four edges or specify the width for one edge:</p><ul><li><code>border-width</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-left-width</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-top-width</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-right-width</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-bottom-width</code>: <code>length</code> type, non-negative, default value <code>0</code></li></ul><h4 id="border-color"><a href="#border-color" class="header-anchor">#</a> border-color</h4><p>The border-color shorthand CSS property sets the color of all sides of an element's border. One can use shorthand for four edges or specify the color for one edge:</p><ul><li><code>border-color</code>: <code>color</code> type, default value <code>#000000</code></li><li><code>border-left-color</code>: <code>color</code> type, default value <code>#000000</code></li><li><code>border-top-color</code>: <code>color</code> type, default value <code>#000000</code></li><li><code>border-right-color</code>: <code>color</code> type, default value <code>#000000</code></li><li><code>border-bottom-color</code>: <code>color</code> type, default value <code>#000000</code></li></ul><h4 id="border-radius"><a href="#border-radius" class="header-anchor">#</a> border-radius</h4><p><code>border-radius</code> property rounds the corners of an element's outer border edge. One can use shorthand for four corners or specify the radius for one corner:</p><ul><li><code>border-radius</code>: <code>length</code> type, default value <code>0</code> which means the corner is a right angle.</li><li><code>border-bottom-left-radius</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-bottom-right-radius</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-top-left-radius</code>: <code>length</code> type, non-negative, default value <code>0</code></li><li><code>border-top-right-radius</code>: <code>length</code> type, non-negative, default value <code>0</code></li></ul><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p><code>border-radius</code> defines the radius of a quarter ellipse that defines the shape of the corner of the outer border edge by definition, but weex may not render as expected if you need a smooth transition between different <code>border-radius</code> or <code>border-width</code> on adjoining sides.</p></div><div class="danger custom-block"><p class="custom-block-title">Only for Android</p><p>Although <code>overflow:hidden</code> is default on Android, a view <strong>will not</strong> clip its children according to <code>border-radius</code> unless all the following conditions meet.</p><ul><li>The view type is <code>div</code>, <code>a</code>, <code>cell</code>, <code>refresh</code> or <code>loading</code>.</li><li>OS version is Android 4.3 or higher.</li><li>OS version is <strong>not</strong> Android 7.0</li><li>A view <strong>does not</strong> have <code>background-image</code> property nor OS version is Android 5.0 or higher.</li></ul></div><h3 id="margin"><a href="#margin" class="header-anchor">#</a> margin</h3><p><code>margin</code> specifies the space around elements which is outside the border. One can use shorthand for four edges or specify the margin for one edge:</p><ul><li><code>margin: {length}</code>: margin for four edges, default value <code>0</code>,</li><li><code>margin-left {length}</code>: margin for left edge, default value <code>0</code></li><li><code>margin-right {length}</code>: margin for left edge, default value <code>0</code></li><li><code>margin-top {length}</code>: margin for left edge, default value <code>0</code></li><li><code>margin-bottom {length}</code>: margin for bottom edge, default value <code>0</code></li></ul><h2 id="flexbox"><a href="#flexbox" class="header-anchor">#</a> Flexbox</h2><p>Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.</p><p>Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Only styles listed below is supported, other style like <code>order</code> and <code>flex-flow</code> are not supported.</p></div><h3 id="flex-container"><a href="#flex-container" class="header-anchor">#</a> Flex container</h3><p>Flexbox is the default and only style model in Weex, so you don't have to add <code>display: flex;</code> in a container.</p><h4 id="direction"><a href="#direction" class="header-anchor">#</a> direction</h4><p>The <code>direction</code> CSS property sets the direction of text, flex-container. The default value is <code>lrt</code></p><ul><li><code>ltr</code>: Text and other elements go from left to right. This is the default value.</li><li><code>rtl</code>: Text and other elements go from right to left.</li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Thought <code>direction</code> is not part of flexbox but have huge impact on flexbox.</p></div><h4 id="flex-direction"><a href="#flex-direction" class="header-anchor">#</a> flex-direction</h4><p>The <code>flex-direction</code> CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).</p><ul><li><code>row</code>: The flex container's main-axis is horizontal and defined to be the same as <code>direction</code>. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <code>direction</code>.</li><li><code>row-reverse</code>: Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted</li><li><code>column</code>: The flex container's main-axis is vertical. The <strong>main-start</strong> and <strong>main-end</strong> points is top and bottom.</li><li><code>column-reverse</code>: Behaves the same as column but the <strong>main-start</strong> and <strong>main-end</strong> are permuted.</li></ul><h4 id="flex-wrap"><a href="#flex-wrap" class="header-anchor">#</a> flex-wrap</h4><p>The <code>flex-wrap</code> CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. The default value is <code>nowrap</code></p><ul><li><code>nowrap</code>:The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value. This is the default value.</li><li><code>wrap</code>:The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.</li><li><code>wrap-reverse</code>:Behaves the same as wrap but cross-start and cross-end are permuted.</li></ul><h4 id="justify-content"><a href="#justify-content" class="header-anchor">#</a> justify-content</h4><p>The CSS <code>justify-content</code> property defines how Weex distributes space between and around content items along the main-axis of a flex container. The default value is <code>flex-start</code>.</p><ul><li><p><code>flex-start</code>: The items are packed flush to each other toward the edge of the alignment container depending on the flex container's <strong>main-start</strong> side.</p></li><li><p><code>flex-end</code>:The items are packed flush to each other toward the edge of the alignment container depending on the flex container's <strong>main-end</strong> side.</p></li><li><p><code>center</code>:The items are packed flush to each other toward the center of the alignment container along the main axis.</p></li><li><p><code>space-between</code>: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the <strong>main-start</strong> edge, and the last item is flush with the <strong>main-end</strong> edge.</p><div style="width: 400px; margin: 20px 0;"><img width="400px" src="https://img.alicdn.com/tfs/TB1fQRmohnaK1RjSZFBXXcW7VXa-504-270.svg"></div></li></ul><h4 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h4><p>The CSS align-items property sets the align-self value on all direct children as a group. It controls the alignment of items on the cross Axis. The default value is <code>stretch</code>.</p><ul><li><code>stretch</code>: Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.</li><li><code>flex-start</code>: The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.</li><li><code>flex-end</code>: The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.</li><li><code>center</code>: The flex items' margin boxes are centered within the line on the cross-axis.</li></ul><ul><li><p><code>align-items</code>: values <code>stretch</code> | <code>flex-start</code> | <code>center</code> | <code>flex-end</code>, default value <code>stretch</code></p><div style="width: 400px; margin: 20px 0;"><img width="400px" src="https://img.alicdn.com/tfs/TB1AM8oohnaK1RjSZFtXXbC2VXa-1018-502.jpg"></div></li></ul><h3 id="flex-item"><a href="#flex-item" class="header-anchor">#</a> Flex item</h3><h4 id="flex"><a href="#flex" class="header-anchor">#</a> flex</h4><p>The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.</p><p>If all of the flex items set <code>flex: 1</code>, they will have equal width or height on direction of flex container's <code>flex-direction</code>. If there are two flex items, with one setting <code>flex: 1</code>, and the other setting <code>flex: 2</code>, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set <code>flex</code>, they will be aligned depending on the container's <code>justify-content</code> property.</p><p>The following code snippet show three <code>div</code> with the same <code>height</code></p><div class="language-html extra-class"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>blue</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>red</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| </code></pre></div><ul><li><code>flex</code>: <code>number</code> type, default value <code>0</code></li></ul><h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3><ul><li><a href="http://dotwe.org/vue/505b5e8bdb6774bccb597a30f74492af" target="_blank" rel="noopener noreferrer">Vertical and horizontal alignment<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="http://dotwe.org/vue/4e1dcb58b31c266c4979fcbed04bb25b" target="_blank" rel="noopener noreferrer">Grid layout<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="http://dotwe.org/vue/5aa2fa9a1ed5ea250e553683ca710f7a" target="_blank" rel="noopener noreferrer">The same height div<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul><h2 id="position"><a href="#position" class="header-anchor">#</a> Position</h2><p>we can use properties below to control placement of weex tag</p><ul><li><code>position</code>: values <code>relative</code> | <code>absolute</code> | <code>fixed</code> | <code>sticky</code>, default value <code>relative</code></li></ul><p><code>relative</code> means the item is positioned relative to its normal position. <code>absolute</code> means the item is positioned relative to its container. <code>fixed</code> keeps the elements position fixed when the page is scrolling. <code>sticky</code> keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.</p><ul><li><code>top</code>: <code>number</code> type, default value <code>0</code>, upward offset value</li><li><code>bottom</code>: <code>number</code> type, default value <code>0</code>, downward offset value</li><li><code>left</code>: <code>number</code> type, default value <code>0</code>, leftward offset value</li><li><code>right</code>: <code>number</code> type, default value <code>0</code>, rightward offset value</li></ul><div class="warning custom-block"><p class="custom-block-title">Only for Android</p><p>If your <code>component</code> is bigger than its parent, it will be <strong>partial</strong> invisible as Weex on Android only supports <code>overflow:hidden</code>.</p><p>Ref the <a href="http://dotwe.org/vue/cb3436ea65283d2ab456641ba30133a4" target="_blank" rel="noopener noreferrer">demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to see more detail.</p></div><h3 id="examples-2"><a href="#examples-2" class="header-anchor">#</a> Examples</h3><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">height</span><span class="token punctuation">:</span> 3000<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">top</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">height</span><span class="token punctuation">:</span> 3000<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">height</span><span class="token punctuation">:</span> 3000<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| </code></pre></div><h2 id="transition"><a href="#transition" class="header-anchor">#</a> Transition</h2><p>Now you can use the transition attribute in CSS to enhance the interactivity and visual experience of your application. The transition includes the layout animation, that is, LayoutAnimation, which now changes the layout and uses the fluent animation of the transition. Transition allows the CSS attribute values to transition smoothly over a certain time interval.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Supported for v0.17.0 and higher.</p></div><div class="warning custom-block"><p class="custom-block-title">Only for Android</p><p>It may cause crash with exception <strong>Unable to create layer for xxx</strong> if the size ( <em>width or height</em> ) of your component with <code>transition-property</code> exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.</p><p>The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.</p></div><h3 id="property"><a href="#property" class="header-anchor">#</a> Property</h3><ul><li><code>transition-property</code>:Allows the name of the transitional animation to set the value of the different styles transition effect, the default value is empty, that does not perform any transition, the following table lists all the legitimate parameters of the property:</li></ul><table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td>width</td><td>The transition is performed when the width of the component is involved in the animation</td></tr><tr><td>height</td><td>The transition is performed when the height of the component is involved in the animation</td></tr><tr><td>top</td><td>The transition is performed when the top of the component is involved in the animation</td></tr><tr><td>bottom</td><td>The transition is performed when the bottom of the component is involved in the animation</td></tr><tr><td>left</td><td>The transition is performed when the left of the component is involved in the animation</td></tr><tr><td>right</td><td>The transition is performed when the right of the component is involved in the animation</td></tr><tr><td>backgroundColor</td><td>The transition is performed when the backgroundColor of the component is involved in the animation</td></tr><tr><td>opacity</td><td>The transition is performed when the opacity of the component is involved in the animation</td></tr><tr><td>transform</td><td>The transition is performed when the transform of the component is involved in the animation</td></tr></tbody></table><ul><li><p><code>transition-duration</code>:Specifies the duration of the transition transition (in milliseconds). The default value is 0, indicating that there is no animation.</p></li><li><p><code>transition-delay</code>:Specifies the time interval (in milliseconds or seconds) between the request transition transition and the transition transition. The default value is 0, indicating that there is no delay, and the transition transition is performed immediately after the request.</p></li><li><p><code>transition-timing-function</code>:Describes the velocity curve of the transition transition, which is used to make the transition transition smoother. The default is ease. The following table lists all the valid attributes:</p></li></ul><table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td>ease</td><td>The transition gradually slow down the transition effect</td></tr><tr><td>ease-in</td><td>The transition starts slowly and then becomes faster for the transition effect</td></tr><tr><td>ease-out</td><td>The transition starts quickly and then slows the transition effect</td></tr><tr><td>ease-in-out</td><td>The transition starts slowly, then goes fast and then slowly ends the transition effect</td></tr><tr><td>linear</td><td>The transition changes at constant speed</td></tr><tr><td>cubic-bezier(x1, y1, x2, y2)</td><td>Using the custom transition in the third-order Bessel function, the parameter values of the function must be between 0 and 1. For more information on three times Bessel, see <a href="http://cubic-bezier.com/" target="_blank" rel="noopener noreferrer">cubic-bezier<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve" target="_blank" rel="noopener noreferrer">Bézier curve<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</td></tr></tbody></table><h3 id="example"><a href="#example" class="header-anchor">#</a> Example</h3><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.panel</span> <span class="token punctuation">{</span> |
| <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token property">top</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">border</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> |
| <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| |
| <span class="token property">transition-property</span><span class="token punctuation">:</span> width<span class="token punctuation">,</span>height<span class="token punctuation">,</span>backgroundColor<span class="token punctuation">;</span> |
| <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.3s<span class="token punctuation">;</span> |
| <span class="token property">transition-delay</span><span class="token punctuation">:</span> 0s<span class="token punctuation">;</span> |
| <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.25<span class="token punctuation">,</span> 0.1<span class="token punctuation">,</span> 0.25<span class="token punctuation">,</span> 1.0<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| </code></pre></div><h2 id="transform"><a href="#transform" class="header-anchor">#</a> Transform</h2><div class="warning custom-block"><p class="custom-block-title">Only for Android</p><p>It may cause crash with exception <strong>Unable to create layer for xxx</strong> if the size ( <em>width or height</em> ) of your component with <code>transform</code> exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.</p><p>The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Consider use <code>transition</code> instead, which supports all the style that <code>transform</code> supports except for <code>transform-origin</code> and <code>perspective</code><code>rotate</code> is the same as <code>rotateZ</code></p></div><p>The CSS <strong>transform</strong> property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated and scaled.</p><p>Currently supported format:</p><ul><li>translate( {<length/percentage>} [, {<length/percentage>}]?)</li><li>translateX( {<length/percentage>})</li><li>translateY( {<length/percentage>})</li><li>scale: <code>number</code></li><li>scaleX: <code>number</code></li><li>scaleY: <code>number</code></li><li>rotate: <code>degree</code></li><li>rotateX: <code>degree</code><strong>v0.14+</strong></li><li>rotateY: <code>degree</code><strong>v0.14+</strong></li><li>rotateZ: <code>degree</code><strong>v0.26+</strong></li><li>perspective: <code>number</code>, supported for Android 4.1 and above. <strong>v0.16+</strong></li><li>transform-origin: number, percentage, keyword (top/left/right/bottom)</li></ul><h3 id="example-2"><a href="#example-2" class="header-anchor">#</a> Example</h3><div class="language-HTML extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Transformed element<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.transform</span> <span class="token punctuation">{</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>150px<span class="token punctuation">,</span>200px<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>20deg<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 -250px<span class="token punctuation">;</span> |
| <span class="token property">border-color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span> |
| <span class="token property">border-width</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token selector">.title</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span><span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| </code></pre></div><h2 id="pseudo-class-v0-9-5"><a href="#pseudo-class-v0-9-5" class="header-anchor">#</a> Pseudo class <span class="api-version">v0.9.5+</span></h2><p>Weex support four pseudo-classes: <code>active</code>, <code>focus</code>, <code>disabled</code>, <code>enabled</code></p><p>All components support <code>active</code>, but only the input component and the textarea component support <code>focus</code>, <code>enabled</code>, <code>diabled</code>.</p><h3 id="rule"><a href="#rule" class="header-anchor">#</a> Rule</h3><ul><li><p>the high priority override low priority when rules take effect at the same time</p><ul><li>such as: "input:active:enabled" will override "input:active"</li></ul></li><li><p>the interconnection rule as follow</p><p><img src="https://img.alicdn.com/tps/TB1KGwIPpXXXXbxXFXXXXXXXXXX-400-205.png" alt="rule"></p></li></ul><h3 id="example-3"><a href="#example-3" class="header-anchor">#</a> Example</h3><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logoUrl<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>image</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.wrapper</span> <span class="token punctuation">{</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">margin-top</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token selector">.title</span> <span class="token punctuation">{</span> |
| <span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token selector">.logo</span> <span class="token punctuation">{</span> |
| <span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span> |
| <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span> |
| <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token selector">.logo:active</span> <span class="token punctuation">{</span> |
| <span class="token property">width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span> |
| <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span> |
| <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> |
| <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> |
| props<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
| logoUrl<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
| <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token string">'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| target<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
| <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token string">'World'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> |
| <span class="token function">update</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">this</span><span class="token punctuation">.</span>target <span class="token operator">=</span> <span class="token string">'Weex'</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
| </code></pre></div><p><a href="http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99" target="_blank" rel="noopener noreferrer">Try it<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2 id="linear-gradient-v0-10"><a href="#linear-gradient-v0-10" class="header-anchor">#</a> Linear-gradient <span class="api-version">v0.10+</span></h2><p>Weex support linear-gradient background, You can see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients" target="_blank" rel="noopener noreferrer">W3C description of the gradient<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p><div class="warning custom-block"><p class="custom-block-title">Only for Android</p><p>It may cause crash with exception <strong>Unable to create layer for xxx</strong> if the size ( <em>width or height</em> ) of your component with <code>background-image: linear-gradient</code> exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.</p><p>The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.</p></div><h3 id="supported-components"><a href="#supported-components" class="header-anchor">#</a> Supported components</h3><p>All components in Weex support gradients</p><h3 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h3><p>You can use linear gradient by <code>background-image</code> property.</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><p><code>radial-gradient</code> is not currently supported, do not use it.</p><p>Weex currently supports two color gradients. The direction of the gradient is as follows:</p><ul><li>to right |
| From left to right</li><li>to left |
| From right to left</li><li>to bottom |
| From top to bottom</li><li>to top |
| From bottom to top</li><li>to bottom right |
| From the upper left corner to the lower right corner</li><li>to top left |
| From the lower right corner to the upper left corner</li></ul><h3 id="note"><a href="#note" class="header-anchor">#</a> Note</h3><ul><li><code>background-image</code> and <code>background-color</code> are set at the same time, <code>background-image</code> precedes <code>background-color</code>.</li><li>Do not use shorthand property such as <code>background</code>.</li></ul><h3 id="example-4"><a href="#example-4" class="header-anchor">#</a> Example</h3><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>scroller</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-color</span><span class="token punctuation">:</span> #3a3a3a</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container1<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>to right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container1<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to left<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>to left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container1<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>to bottom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container1<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>to top<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span><span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><span class="token property">justify-content</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container2<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom right<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>to bottom right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container2<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top left<span class="token punctuation">,</span>#a80077<span class="token punctuation">,</span>#66ff00<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>to top left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>scroller</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.container1</span> <span class="token punctuation">{</span> |
| <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token property">width</span><span class="token punctuation">:</span> 730px<span class="token punctuation">;</span> |
| <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">border</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> |
| <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| |
| <span class="token selector">.container2</span> <span class="token punctuation">{</span> |
| <span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> |
| <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> |
| <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> |
| <span class="token property">border</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> |
| <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| |
| <span class="token selector">.direction</span> <span class="token punctuation">{</span> |
| <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> |
| <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| </code></pre></div><h2 id="box-shadow-v0-11"><a href="#box-shadow-v0-11" class="header-anchor">#</a> Box-shadow <span class="api-version">v0.11+</span></h2><p>Weex supports box-shadow in iOS： <code>inset</code>,<code>offset-x</code>,<code>offset-y</code>, <code>blur-radius</code>,<code>color</code></p><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>box-shadow takes no effect on Android</p></div><h3 id="example-5"><a href="#example-5" class="header-anchor">#</a> Example</h3><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFE4C4<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span>20px 10px <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 69<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello {{target}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">margin-top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFE4C4<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 20px 10px 5px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 69<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello {{target}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">margin-top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFE4C4<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span>inset 20px 10px 5px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 69<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello {{target}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">margin-top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFE4C4<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span>inset 20px 10px 5px <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 69<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello {{target}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">margin-top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFE4C4<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span>20px 10px 5px black<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello {{target}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">margin-top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFE4C4<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span>20px 10px 5px #008B00<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello {{target}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> |
| <span class="token selector">.wrapper</span> <span class="token punctuation">{</span><span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span><span class="token punctuation">}</span> |
| <span class="token selector">.title</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span><span class="token punctuation">}</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> |
| module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">{</span> |
| logoUrl<span class="token punctuation">:</span> <span class="token string">'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'</span><span class="token punctuation">,</span> |
| target<span class="token punctuation">:</span> <span class="token string">'World'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
| </code></pre></div><h2 id="accessibility"><a href="#accessibility" class="header-anchor">#</a> Accessibility</h2><ul><li>role: show compoent‘s role <a href="https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties" target="_blank" rel="noopener noreferrer">web define<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><ul><li>button</li><li>input <code>input</code>compoent default role is input</li><li>img <code>image</code> compoent default role is image</li><li>link</li><li>search</li><li>tab</li><li>text <code>text</code>compoent default role is text</li></ul></li><li>aria-hidden :hide compoent which is unnecessary for user</li><li>aria-label : configure the msg after the current element is focused</li></ul><h3 id="example-6"><a href="#example-6" class="header-anchor">#</a> Example</h3><div class="language- extra-class"><pre class="language-text"><code><text class='txt' role='text' aria-label='I am a text'>text</text> |
| |
| <a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a link'></a> |
| |
| |
| <image class='img' aria-hidden='true' role='img' src="http://xxx.png" aria-label='I am a image，but you can not see me'></image> |
| |
| </code></pre></div><h2 id="other-common-style"><a href="#other-common-style" class="header-anchor">#</a> Other Common Style</h2><ul><li><code>opacity {number}</code>:Set the transparency of an element or the degree to which content behind an element is visible. The {number} range is <strong>0</strong> to <strong>1</strong>, <strong>0</strong> for fully transparent and <strong>1</strong> for fully opaque.</li><li><code>background-color {color}</code>: Set the background color of an element. The following color format is supported. |
| <ul><li>RGB, e.g. <code>rgb(250, 0, 0)</code></li><li>RGBA, e.g. <code>rgba(255, 0, 0, 0.5)</code></li><li>Hexadecimal color e.g. <code>#ff0000</code> or <code>#f00</code></li><li>Keywords, include <a href="https://drafts.csswg.org/css-color-3/#html4" target="_blank" rel="noopener noreferrer">basic keywords<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and <a href="https://drafts.csswg.org/css-color-3/#svg-color" target="_blank" rel="noopener noreferrer">extends keywords<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><div class="warning custom-block"><p class="custom-block-title">Only for Android</p><p>It may cause crash with exception <strong>Unable to create layer for xxx</strong> if the size ( <em>width or height</em> ) of your component with <code>background-color</code> exceeds the maximum as your component makes the OpenGL memory zone OutOfMemory.</p><p>The maximum of the size for your component is device dependent, but you are in the danger zone if the size is bigger than screen's size.</p></div><h2 id="simple-step"><a href="#simple-step" class="header-anchor">#</a> Simple Step</h2><p>These up-to-down steps may help you to plan the whole style of weex pages.</p><ol><li>overall style: divide the whole page to different parts</li><li>flex alignment: align boxes in every part of page</li><li>position box: place box, set offset</li><li>element specific style: set styles for certain element if needed</li></ol></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/docs/modules/console-log.html" class="prev"> |
| console-log |
| </a></span><span class="next"><a href="/docs/styles/text-styles.html"> |
| Text Styles |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">12/10/2020</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/docs/styles/common-styles.md" target="_blank" rel="noopener noreferrer">Edit this page</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">Suggest</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">Excellent doc</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">Unusable doc</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/81.03d1925e.js" defer></script> |
| </body> |
| </html> |
