如何更改步骤中的 v-stepper 图标大小？

Posted 2023-02-22

【中文标题】如何更改步骤中的 v-stepper 图标大小？

【英文标题】：How to change the v-stepper icon size inside the steps?

【发布时间】：2022-01-16 09:10:23

【问题描述】：

我想更改 v-stepper 步骤中的图标大小。我可以设法改变步长。但找不到改变图标大小的方法。

            <v-stepper
          v-model="final_step"
          alt-labels
          elevation="0"
          :
        >
          <v-stepper-header>
            <template v-for="(step, index) in steps">
              <v-stepper-step
                :color="GetStepColor(index + 1)"
                :complete-icon="GetCompleteIcon(index + 1)"
                style=""
                :key="`$index + 1-step`"
                :complete="final_step > index"
                step=""
              >
                <span :class="GetTextColor(index + 1)">
                  GetTextDescription(step)
                </span>
              </v-stepper-step>

              <v-divider
                :class="GetStepperLineClass(index + 1)"
                v-if="index + 1 !== steps.length"
                :key="index"
              ></v-divider>
            </template>
          </v-stepper-header>
        </v-stepper>

如您所见，我从函数调用中获得了 :complete-icon。因此，它返回一个字符串。像“mdi-plus”。但是没有办法增加图标大小...

CSS...

.v-stepper__step__step.success  width: 60px;height: 60px; margin: -14px; 
.v-stepper__step__step.primary width: 60px;height: 60px;margin: -14px;  
.v-stepper__step__step.grey width: 60px;height: 60px;margin: -14px;

This is my stepper.

【问题讨论】：

你能显示代码吗？

@MuXeD 我添加了上面的代码。 :)

如果代码不清楚，你能告诉我一种在普通默认 v-stepper 中更改图标大小的方法吗？我可以根据我的代码需要更改它。 :-)

【参考方案1】：

尝试添加这个 css，根据自己的喜好更改高度/宽度

.v-stepper__step__step.primary .v-icon__svg 
  height: 42px; //height and width
  width: 42px;

.v-stepper__step__step.success .v-icon__svg 
  height: 42px; //height and width
  width: 42px;

.v-stepper__step__step.grey .v-icon__svg 
  height: 42px; //height and width
  width: 42px;

【讨论】：

这不行:(

【参考方案2】：

我想出了一个临时答案。虽然这不是理想的解决方案。 通过这个，我可以改变图标的​​大小。但不是特定于步进器！ 检查所有图标和文本框检查图标大小将是30px。

.mdi-text-box-check-outline::before ,
.mdi-check-all::before 

  font-size: 30px;

【讨论】：

作者指定此答案是临时的。因此，当他/她学习永久答案时，她必须更新此答案。