<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>