<template>
  <div>
    <wxc-panel title="Box Model" padding-body="0" type="primary">
      <text class="box">Box</text>
    </wxc-panel>

    <wxc-panel title="border" type="primary">
      <wxc-panel title="border-width" type="">
        <div style="flex-direction: row;">
          <style-item style="border-style: solid;border-width: 2px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-width: 10px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-left-width: 4px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-bottom-width: 4px;border-color: #333;" value=""></style-item>
        </div>
      </wxc-panel>
      <wxc-panel title="border-color" type="">
        <div style="flex-direction: row;">
          <style-item style="border-style: solid;border-width: 4px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-width: 4px;border-color: #ddd;" value=""></style-item>
          <style-item style="border-style: solid;border-width: 4px;border-color: red;" value=""></style-item>
        </div>
      </wxc-panel>
      <wxc-panel title="border-style" type="">
        <wxc-tip type="warning" value="just support four edges" style="margin-bottom: 10px;"></wxc-tip>
        <div style="flex-direction: row;">
          <style-item style="border-style: solid;border-width: 4px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: dashed;border-width: 4px;border-color: #333;" value="" type=""></style-item>
          <style-item style="border-style: dotted;border-width: 4px;border-color: #333;" value=""></style-item>
        </div>
      </wxc-panel>
      <wxc-panel title="border-radius" type="">
        <div style="flex-direction: row;">
          <style-item style="width: 75px;border-radius:38px" value=""></style-item>
          <style-item style="border-radius:20px" value=""></style-item>
          <style-item style="border-top-left-radius:20px;border-top-right-radius:20px" value=""></style-item>
          <style-item style="border-bottom-left-radius:20px;border-bottom-right-radius:20px" value=""></style-item>
        </div>
      </wxc-panel>
    </wxc-panel>
  </div>
</template>

<style>
  .box {
    background-color: #f5f5f5;
    width: 260px;
    height: 260px;
    padding-left: 40px;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-left: 40px;
    margin-top: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
    border-width: 40px;
    border-color: #333;
    border-style: solid;
  }
</style>

<script>
  require('weex-components');
  module.exports = {
    data: {
      size: 40
    }
  }
</script>