| <template> |
| <scroller> |
| <wxc-panel title="color" type="primary"> |
| <text class="txt">default is black</text> |
| <text class="txt" style="color:#286090">#286090</text> |
| <text class="txt" style="color:#0f0">#0f0</text> |
| <text class="txt" style="color:red">keyword</text> |
| <text class="txt" style="color:rgb(238, 162, 54)">rgb(238, 162, 54)</text> |
| <text class="txt" style="color:rgba(238, 162, 54, 0.5)">rgba(238, 162, 54, 0.5)</text> |
| </wxc-panel> |
| |
| <wxc-panel title="font-size" type="primary"> |
| <!--<div style="flex-direction: row">--> |
| <text class="txt" style="font-size: 32px;">32</text> |
| <text class="txt" style="font-size: 64px;">64</text> |
| <text class="txt" style="font-size: 100px;">100</text> |
| <!--</div>--> |
| </wxc-panel> |
| |
| <wxc-panel title="font-style" type="primary"> |
| <text class="txt" style="font-style: normal">normal</text> |
| <text class="txt" style="font-style: italic">italic</text> |
| </wxc-panel> |
| |
| <wxc-panel title="font-weight" type="primary"> |
| <text class="txt" style="font-weight: normal">normal</text> |
| <text class="txt" style="font-weight: bold">bold</text> |
| <text class="txt" style="font-weight: 100">100</text> |
| <text class="txt" style="font-weight: 200">200</text> |
| <text class="txt" style="font-weight: 300">300</text> |
| <text class="txt" style="font-weight: 400">400</text> |
| <text class="txt" style="font-weight: 500">500</text> |
| <text class="txt" style="font-weight: 600">600</text> |
| <text class="txt" style="font-weight: 700">700</text> |
| <text class="txt" style="font-weight: 800">800</text> |
| <text class="txt" style="font-weight: 900">900</text> |
| </wxc-panel> |
| |
| <wxc-panel title="text-decoration" type="primary"> |
| <text class="txt" style="text-decoration: none">none</text> |
| <text class="txt" style="text-decoration: underline">underline</text> |
| <text class="txt" style="text-decoration: line-through">line-through</text> |
| </wxc-panel> |
| |
| <wxc-panel title="text-align" type="primary"> |
| <text class="txt" style="text-align: left">left</text> |
| <text class="txt" style="text-align: center">center</text> |
| <text class="txt" style="text-align: right">right</text> |
| </wxc-panel> |
| |
| <wxc-panel title="text-overflow" type="primary"> |
| <text class="txt" style="lines:1">no text-overflow, no text-overflow</text> |
| <text class="txt" style="text-overflow:clip;width: 450px;lines:1">text-overflow: clip, text-overflow: clip</text> |
| <text class="txt" style="text-overflow:ellipsis;width: 450px;lines:1">text-overflow: ellipsis, text-overflow: ellipsis</text> |
| </wxc-panel> |
| <wxc-panel title="line-height" type="primary"> |
| <text class="txt">no lineheight setting</text> |
| <text class="txt" style="line-height: 50">lineheight 50</text> |
| <text class="txt" style="line-height: 80"> lineheight 80</text> |
| </wxc-panel> |
| </scroller> |
| </template> |
| |
| <style> |
| .txt { |
| margin-bottom: 12px; |
| font-size: 40px; |
| } |
| </style> |
| |
| <script> |
| require('weex-components'); |
| </script> |