我正在vue中创建一个简单的步进器组件。我已经能够实现所需的功能,但即使在应用justify-content: center
之后,对齐也会向左移动
下面是我的代码https://codesandbox.io/s/awesome-sky-pj9p5x
<template>
<div class="flex justify-center full-width" style="border: 1px">
<div class="flex no-wrap justify-center full-width">
<div
class="flex full-width items-center q-pb-xl"
v-for="steps in data"
:key="steps.key"
>
<div
class="stepper-circle"
:class="{
'stepper-circle--filled': currentStep === steps.key,
'stepper-circle--unfilled': currentStep < steps.key,
}"
>
<q-icon
v-if="currentStep > steps.key"
name="check"
color="white"
size="xs"
/>
<div
v-else
class="stepper-circle__dot"
:class="{
'stepper-circle__dot--active': currentStep === steps.key,
}"
/>
<div
class="stepper-circle__label"
:class="{ 'text-grey fw3': currentStep < steps.key }"
>
{{ steps.name }}
</div>
</div>
<div
:class="{
'stepper-separator': steps.key < data.length,
'stepper-separator--active': steps.key < currentStep,
}"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Stepper",
data() {
return {
currentStep: 1,
data: [
{
name: "Step 1",
key: 1,
},
{
name: "Step 2",
key: 2,
},
{
name: "Step 3",
key: 3,
},
],
};
},
methods: {
getSeparatorWidth(stepKey) {
const totalSteps = this.data.length - 1;
const widthPercentage = (100 / totalSteps) * stepKey;
return widthPercentage;
},
},
};
</script>
<style lang="scss" scoped>
.items-center {
align-items: center;
}
.full-width {
width: 100%;
}
.justify-center {
justify-content: center;
}
.flex {
display: flex;
}
.stepper-separator {
height: 2px;
background: #d1d5db;
transition: width 2s;
flex-grow: 1;
}
.stepper-separator--active {
background: #08104d;
}
.stepper-circle {
position: relative;
width: 32px;
height: 32px;
border: 2px solid #08104d;
border-radius: 50%;
background-color: #08104d;
color: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
line-height: 15px;
}
.stepper-circle__dot {
background: #d1d5db !important;
border-radius: 50%;
height: 10px;
width: 10px;
}
.stepper-circle__dot--active {
background: #08104d !important;
}
.stepper-circle__label {
position: absolute;
top: 45px;
font-size: 10px;
color: #08104d;
font-weight: 600;
display: flex;
white-space: normal;
width: 80px;
justify-content: center;
text-align: center;
}
.stepper-circle--filled {
background: rgb(255, 255, 255) !important;
border: 2px solid #08104d !important;
}
.stepper-circle--unfilled {
background: white !important;
border: 2px solid #d1d5db !important;
}
</style>
字符串
2条答案
按热度按时间2izufjch1#
你必须最大化最后一个元素的宽度,并解决你对响应性的担忧,就像这样:
字符串
因为否则它会将内容向左拉伸。
whlutmcx2#
要使步进器居中,您可以将整个组件 Package 在另一个
div
中,并对其应用justify-content: center;
。举例说明;
字符串
但是,如果您还想垂直居中显示stepper组件,则可以使用
align-items: center;
属性将flex项沿着容器中心的垂直线对齐。举例说明;
型
注意,要使
align-items: center;
工作,flex容器的父容器的高度应该大于flex容器的高度。因此,将高度设置为最大值;型