packages/docs/src/examples/v-stepper/misc-vertical-error.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-stepper/misc-vertical-error.vue

116 строк2 KB

John Leider

chore: add vue/attributes-order eslint rule

29 фев 2024, 07:06

29 фев 2024, 07:0665aff8f

<template>
  <v-stepper
    v-model="e13"
    vertical
  >
    <v-stepper-step
      step="1"
      complete
    >
      Name of step 1
    </v-stepper-step>

    <v-stepper-content step="1">
      <v-card
        class="mb-12"
        color="grey-lighten-1"
        height="200px"
      ></v-card>
      <v-btn
        color="primary"
        @click="e13 = 2"
      >
        Continue
      </v-btn>
      <v-btn variant="text">
        Cancel
      </v-btn>
    </v-stepper-content>

    <v-stepper-step
      step="2"
      complete
    >
      Name of step 2
    </v-stepper-step>

    <v-stepper-content step="2">
      <v-card
        class="mb-12"
        color="grey-lighten-1"
        height="200px"
      ></v-card>
      <v-btn
        color="primary"
        @click="e13 = 3"
      >
        Continue
      </v-btn>
      <v-btn variant="text">
        Cancel
      </v-btn>
    </v-stepper-content>

    <v-stepper-step
      :rules="[() => false]"
      step="3"
    >
      Ad templates
      <small>Alert message</small>
    </v-stepper-step>

    <v-stepper-content step="3">
      <v-card
        class="mb-12"
        color="grey-lighten-1"
        height="200px"
      ></v-card>
      <v-btn
        color="primary"
        @click="e13 = 4"
      >
        Continue
      </v-btn>
      <v-btn variant="text">
        Cancel
      </v-btn>
    </v-stepper-content>

    <v-stepper-step step="4">
      View setup instructions
    </v-stepper-step>

    <v-stepper-content step="4">
      <v-card
        class="mb-12"
        color="grey-lighten-1"
        height="200px"
      ></v-card>
      <v-btn
        color="primary"
        @click="e13 = 1"
      >
        Continue
      </v-btn>
      <v-btn variant="text">
        Cancel
      </v-btn>
    </v-stepper-content>
  </v-stepper>
</template>

<script setup>
  import { ref } from 'vue'

  const e13 = ref(2)
</script>

<script>
  export default {
    data () {
      return {
        e13: 2,
      }
    },
  }
</script>