Строка меню Vaadin, пробел между заголовком и значком элемента

У меня есть строка меню с некоторыми элементами. Каждый элемент имеет заголовок и значок. Проблема в том, что заголовок и значок расположены очень близко друг к другу. Вот:

image
Как установить расстояние между заголовком и значком?

Это мой простой код:

MenuBar menuBar = new MenuBar();
menuBar.setSizeFull();
menuBar.addStyleName(CSS.commom-menu-bar);
menuBar.addItem("import", VaadinIcons.DOCTOR,(selectedItem) ->  importDocs());
HorizontalLayout menuBarLayout = new HorizontalLayout(menuBar);
menuBarLayout.setWidth("100%");
setContent(menuBarLayout)

и CSS:

.v-menubar-common-menu-bar{
direction: rtl;
text-align: right !important;
}

menubar css menuitem vaadin vaadin8
person HoseinPanahi    schedule 09.09.2017    source источник
comment
Можете ли вы предоставить свой рабочий код ..?   -  person ankita patel    schedule 09.09.2017
comment
Код @ankitapatel уже предоставлен! :)   -  person HoseinPanahi    schedule 09.09.2017
comment
Этот код бесполезен. Можете ли вы поделиться рабочим кодом фрагмента ..?   -  person ankita patel    schedule 09.09.2017
comment
добавить отступы справа к тексту или отступы слева к изображению?   -  person Ballard    schedule 09.09.2017
comment
Вы пробовали: menuBar.addItem("import", action).setIcon(icon) ?   -  person Dawid Fieluba    schedule 09.09.2017
comment
Так каковы ваши фактические требования? Если вы посмотрите на демонстрацию Valo, между значками пунктов меню есть пробел. значок и текст. Или вы хотите поставить значок справа от текста?   -  person Steffen Harbich    schedule 11.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно добавить немного больше CSS для вашего элемента Icon:

.v-menubar-commom-menu-bar{
    direction: rtl;
    text-align: right !important;
}

.v-menubar-commom-menu-bar .v-icon
{
    padding-left: 10px;     
}

Если вы используете SASS, вам также придется перекомпилировать тему и, возможно, перезагрузить Browser-Cache, чтобы изменения вступили в силу.

Скриншот моего локального рабочего примера

person Pesse    schedule 11.09.2017