<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlRadioIcon 选择框</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础用法</Title>
      <div class="items-wrap">
        <div class="item">
          <p>选中：</p>
          <WlRadioIcon :isChoosed="true" />
        </div>
        <div class="item">
          <p>未选中：</p>
          <WlRadioIcon :isChoosed="true" />
        </div>
      </div>
      <Title>展示类型</Title>
      <div class="items-wrap">
        <div class="item">
          <p>对勾模式：</p>
          <WlRadioIcon :isChoosed="true" :isHookType="true" />
        </div>
        <div class="item">
          <p>圆点模式：</p>
          <WlRadioIcon :isChoosed="true" :isHookType="false" />
        </div>
      </div>
      <Title>组件大小</Title>
      <div class="items-wrap">
        <div class="item">
          <p>整体大小：</p>
          <WlRadioIcon :isChoosed="true" :size="30" />
        </div>
        <div class="item">
          <p>圆点模式中心大小：</p>
          <WlRadioIcon :isChoosed="true" :isHookType="false" :hookSelectPointSize="10" />
        </div>
      </div>
      <Title>组件颜色</Title>
      <div class="items-wrap">
        <div class="item">
          <p>选中：</p>
          <WlRadioIcon :isChoosed="true" chosedColor="#4fc08d" />
        </div>
        <div class="item">
          <p>未选中：</p>
          <WlRadioIcon :isChoosed="false" unChosedColor="#4fc08d" />
        </div>
      </div>
    </template>
  </Container>
</template>

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

<style scoped lang="scss">
.pic-wrap {
  width: 100%;
}
.pic-tx-wrap {
  width: j(100);
  height: j(100);
}
.items-wrap {
  @extend %flex-middle-center;
  .item {
    flex: 1;
    @extend %flex-middle;
    p {
      margin-right: j(10);
    }
  }
}
</style>
