<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlButton 按钮</WlHeader>
    </template>
    <template v-slot:main>
      <Title :needPadding="false">按钮类型</Title>
      <div class="wrap">
        <WlButton type="default">默认按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton type="primary">主要按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton type="warning">警告按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton type="danger">危险按钮</WlButton>
      </div>
      <Title>按钮尺寸</Title>
      <div class="wrap">
        <WlButton size="large">大号按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton>默认按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton size="small">小号按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton size="mini">迷你按钮</WlButton>
      </div>
      <Title>按钮形状</Title>
      <div class="wrap">
        <WlButton shape="circle">圆</WlButton>
      </div>
      <div class="wrap">
        <WlButton shape="round">半圆按钮</WlButton>
      </div>
      <Title>朴素按钮</Title>
      <div class="wrap">
        <WlButton plain>默认按钮</WlButton>
      </div>
      <Title :needPadding="false">块级按钮</Title>
      <WlButton block>块级按钮</WlButton>
      <Title :needPadding="false">自定义颜色</Title>
      <div class="wrap">
        <WlButton color="#07c160">单色按钮</WlButton>
      </div>
      <div class="wrap">
        <WlButton color="#07c160" plain>单色按钮</WlButton>
      </div>
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "Example",
  components: { Title, Container },
};
</script>

<style lang="scss" scoped>
.wrap {
  display: inline-block;
  margin: 0 j(10) j(10) 0;
}
</style>
