如何增加 vuetify stepper 组件中的可点击区域？

Question

我正在使用步进组件，我想增加 v-stepper-header 中 present 的可点击区域

  <div id="app">
  <v-app id="inspire">
    <div>
      <v-stepper>
        <v-stepper-header>
          <v-stepper-step
            editable
            step="1"
          >
            My clickable area ends here
          </v-stepper-step>
  
          <v-stepper-step
            editable
            step="2"
          >
            My clickable area ends here
          </v-stepper-step>
          <v-stepper-step
            step="3"
            editable
          >
            Comparatively smaller
          </v-stepper-step>
          <v-stepper-step
            step="4"
            editable
          >
            Summary
          </v-stepper-step>
        </v-stepper-header>
      </v-stepper>
    </div>
  </v-app>
</div>

如果有帮助，这是我的代码笔 https://codepen.io/justforvue/pen/dyvRGaG

Answer 1

我找不到任何支持此功能的 API。 https://vuetifyjs.com/en/api/v-stepper/

然而，这似乎是可以实现的 CSS。

为步进器组件添加一个class名称

  <v-stepper class="my-stepper">

为相关断点应用CSS。

@media (min-width: 960px) {
  .my-stepper .v-stepper__step {
    flex-grow: 1;
  }
}

演示 https://codepen.io/kunukn/pen/017aee3ea77b3db560a25aa7617c4a27?editors=1100

如何增加 vuetify stepper 组件中的可点击区域？

How to increase the clickable area in vuetify stepper component?

css

vue.js

vuetify.js