<template>
  <scroller>
    <wxc-panel title="Dialog" type="primary">
      <wxc-tip type="success" value="It's a weex example template." style="margin-bottom: 20px;"></wxc-tip>
      <wxc-hn level="1" value="H1"></wxc-hn>
      <wxc-button type="primary" onclick="{{toast}}" value="Toast"></wxc-button>
      <wxc-hn level="2" value="H3"></wxc-hn>
      <wxc-button type="warning" onclick="{{toast}}" value="Toast"></wxc-button>
    </wxc-panel>

    <wxc-panel title="Image" type="primary">
      <wxc-tip type="warning" value="Weex screen width is 750" style="margin-bottom: 20px;"></wxc-tip>
      <image class="img" style=" width: 400px; height: 400px;" src="{{img}}"></image>

      <wxc-panel title="Image" type="default">
        <text>sub info</text>
      </wxc-panel>
    </wxc-panel>
  </scroller>
</template>

<script>
  require('weex-components');
  module.exports = {
    data: {
      img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
    },
    methods: {
      toast: function() {
        this.$call('modal', 'toast', {'message': 'a toast', 'duration': 2});
      }
    }
  }
</script>

<style>
</style>