Элемент меню PrimeVue3 для выравнивания по правому краю
У меня есть основная строка меню vue с 3 вкладками, которые выровнены по левому краю.
HTML
<Menubar :model = "items" />
.vue-файл
export default {
data() {
return {
items: [
{
label:'Users',
icon:'pi pi-fw pi-user',
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
},
{
label:'Settings',
icon:'pi pi-fw pi-cog'
}
]
}
}
}
Я хочу переместить вкладку настроек вправо, как мне это сделать? Я попытался добавить ниже ярлык настроек. В документах нет примеров
style:{'margin-right': 'auto'}
Ответы 1
Вы не могли использовать опцию шаблона:
<Menubar :model = "items">
<template #end>
Settings
</template>
</Menubar>
И уберите 'settings' из items, но тогда вам придется строить так, как вам нравится.
Может быть, кнопка, которая открывает меню при нажатии
вы можете использовать шаблон #item и изменить внешний вид так, как вам нравится. Там вы можете использовать родительский div с display flex и justify-content: space-between и rap ваши пункты меню в двух div, один для правой стороны, другой для левой. У меня была аналогичная проблема с компонентом MenuBar, поэтому я только что создал свой собственный компонент, используя компонент Menu, вот суть этого: gist.github.com/GypsyyCode/7f03dff4b86b54a965a2f84b9b631537
@Fabian_Lehmann Думаю, это решение. Я ожидал, что элементы будут выравниваться вправо/влево, как упрощенная версия панели навигации начальной загрузки в файле .vue.
Если это единственное решение, то ограничения — это отстой.