<template>
  <div class='tuitui-divider'>
    <div class='item'>
      <div class="title">基本用法</div>
      <BKDivider></BKDivider>
    </div>
    <div class='item'>
      <div class="title">内容</div>
      <div class='text-wrap'><BKDivider :textAlign="'left'"><span class='text'>居左</span></BKDivider></div>
      <div class='text-wrap'><BKDivider :textAlign="'right'"><span class='text'>居右</span></BKDivider></div>
      <div class='text-wrap'><BKDivider><span class='text'>居中</span></BKDivider></div>
    </div>

    <div class='item'>
      <div class="title">样式变化</div>
      <div class='text-wrap'><BKDivider :color="'rgb(25, 137, 250)'" :textColor="'rgb(25, 137, 250)'"><span class='text'>颜色</span></BKDivider></div>
      <div class='text-wrap'><BKDivider :textSize="'30'"><span class='text'>字体大小</span></BKDivider></div>
      <div class='text-wrap'><BKDivider :height="'4'"><span class='text'>线条粗细</span></BKDivider></div>
      <div class='text-wrap'><BKDivider :line="'dashed'"><span class='text'>虚线</span></BKDivider></div>
      <div class='text-wrap'><BKDivider :line="'dot'"><span class='text'>点</span></BKDivider></div>
    </div>
  </div>
</template>
<script>
import BKDivider from '@/components/BKDivider'

export default {
  components: {
    BKDivider
  },
  data () {
    return {}
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKDivider 分割线'
    })
  },
  methods: {
  }
}
</script>
<style scoped>
.tuitui-divider {
  overflow-x: hidden;
}
.title {
  padding: 40px;
  font-size: 26px;
  color: #ccc;
  font-weight: 600;
}
.text-wrap {
  padding-bottom: 60px;
}
.text {
  padding: 0 20px;
}
</style>
