1
0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 12:01:57 +08:00
Sofia Calderon 7bba8dafee
Bugreport918 vertical spacing in side menu (#926)
* fixed vertical spacing issue in firefox

* removed unnecessary important tag from css

* bugfix - sidebar only shows icons if collapsed

* fixed styling for hover sidebar

* removed unnecessary height property + linting

* fixed item-wrapper styling

* linting fix
2021-06-18 19:04:07 -04:00

69 lines
1.1 KiB
Vue

<template>
<el-row class="item-wrapper">
<el-col :span="3" :style="iconMargin">
<i v-if="icon.includes('el-icon')" class="icon sub-el-icon" />
<svg-icon v-else :icon-class="icon" />
</el-col>
<el-col :span="21">
<p class="item-title">{{ title }}</p>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'MenuItem',
props: {
icon: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
addMargin: {
type: Boolean,
default: false
}
},
computed: {
iconMargin() {
if (this.addMargin) {
return 'margin-left: -20px;'
}
}
}
}
</script>
<style scoped>
.sub-el-icon {
width: 1em;
height: 1em;
}
.item-wrapper {
white-space: break-spaces;
line-height: 20px;
height: auto;
padding: 18px 23px 18px 0;
}
.item-title {
margin: 0 0 0 7px;
}
</style>
<style>
.el-row::before {
display: block;
height: 0;
}
.el-row::after {
display: block;
height: 0;
}
</style>