<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlSteps 步骤条</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础用法</Title>
      <WlSteps :list="list" :onSelectIndex="2" />
      <Title>修改步骤圆文字</Title>
      <WlSteps :list="list" stepTextKey="key" />
      <Title>修改步骤文字</Title>
      <WlSteps :list="list" valueKey="text2" />
      <Title>修改主题色</Title>
      <WlSteps :list="list" themeColor="pink" />
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "WlSteps-Example",
  components: { Title, Container },
  data() {
    return {
      list: [
        {
          id: "1",
          key: "one",
          text: "步骤1",
          text2: "步骤One",
        },
        {
          id: "2",
          key: "two",
          text: "步骤2",
          text2: "步骤Two",
        },
        {
          id: "3",
          key: "three",
          text: "步骤3",
          text2: "步骤Three",
        },
      ],
    };
  },
};
</script>
