DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/element/button.vue

<template>
  <view>
    <l-title>按钮类型：</l-title>
    <view class="padding bg-white">
      <view class="flex flex-wrap justify-around">
        <l-button>默认</l-button>
        <l-button round>圆角 (round)</l-button>
        <l-button round>
          <l-icon type="likefill" class="margin-right-xs" />
          图标
        </l-button>
      </view>
    </view>
    <l-demo-description>按钮使用 l-button 标签，添加 round 属性即为圆角</l-demo-description>

    <l-title>禁用按钮：</l-title>
    <view class="padding bg-white">
      <view class="flex flex-wrap justify-around margin-top-sm">
        <l-button color="red" disabled>禁用按钮 (disabled)</l-button>
        <l-button color="red" disabled round>禁用圆角按钮</l-button>
      </view>
    </view>
    <l-demo-description>添加 disabled 属性即可禁用按钮</l-demo-description>

    <l-title>按钮尺寸：</l-title>
    <view class="padding bg-white">
      <view class="flex flex-wrap justify-around">
        <l-button size="sm">小尺寸 (sm)</l-button>
        <l-button>默认尺寸 (df)</l-button>
        <l-button size="lg">大尺寸 (lg)</l-button>
      </view>
    </view>
    <l-demo-description>
      添加 size="*" 属性，把*换成尺寸字符串(sm/df/lg)即可设置按钮大小
    </l-demo-description>

    <l-title>按钮颜色：</l-title>
    <view class="padding bg-white">
      <view class="flex flex-wrap">
        <l-button
          v-for="(item, index) of colors"
          :key="index"
          :color="item.name"
          class="margin-sm"
        >
          {{ item.title }} ({{ item.name }} | {{ item.color }})
        </l-button>
      </view>
    </view>
    <l-demo-description>添加 color="*" 属性，把*换成上述的颜色单词即可设置按钮颜色</l-demo-description>

    <l-title>镂空按钮：</l-title>
    <view class="padding bg-white">
      <view class="flex flex-wrap justify-around">
        <l-button color="red">普通按钮</l-button>
        <l-button line="red">镂空按钮</l-button>
        <l-button line="red" blod>加粗线条按钮</l-button>
      </view>
    </view>
    <l-demo-description>
      添加 line="*" 属性，把*换成颜色单词即可设置镂空按钮；
      添加blod属性即可使用粗线条型镂空按钮
    </l-demo-description>

    <l-title>按钮阴影：</l-title>
    <view class="padding bg-white">
      <view class="flex flex-wrap justify-around">
        <l-button color="red">普通按钮</l-button>
        <l-button color="red" shadow>带阴影按钮 (shadow)</l-button>
      </view>
    </view>
    <l-demo-description>添加 shadow 属性即可显示按钮阴影</l-demo-description>

    <l-title>块状按钮：</l-title>
    <view class="padding flex flex-direction">
      <l-button size="lg" color="blue" block>普通块状按钮 (block)</l-button>
      <l-button size="lg" color="blue" class="margin-top-sm" block>
        <l-icon color="white" type="likefill" class="margin-right-xs" />
        带图标
      </l-button>
      <l-button size="lg" line="red" class="margin-top-sm" block>镂空块状按钮</l-button>
      <l-button size="lg" color="blue" class="margin-top-sm" block disabled>
        禁用块状按钮
      </l-button>
      <l-button size="lg" line="red" class="margin-top-sm" block disabled>
        禁用镂空块状按钮
      </l-button>
    </view>
    <l-demo-description>添加 block 属性即可使用块状按钮</l-demo-description>
  </view>
</template>

<script>
export default {
  data() {
    return { colors: this.getUiColors() }
  }
}
</script>