Тень Дом Стиль в Ваадин Флоу - PullRequest
Новая
       28

Тень Дом Стиль в Ваадин Флоу

0 голосов
/ 15 ноября 2018

Я написал упаковку потока Ваадина для этого полимерного элемента : 

@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
    ...
}

Это работает.Документация simple-dropdown говорит мне, что я могу стилизовать теневой дом с помощью этого CSS: 

simple-dropdown {
    --simple-dropdown-toggle: {
        justify-content: right;
    }
}

Однако я не могу найти подходящее место для этого CSS в потоке Vaadin.Куда мне его положить?

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

WebApp / интерфейс / стили / разделяемой styles.html 

<custom-style>
    <style>
        simple-dropdown {
            --simple-dropdown-toggle: {
                justify-content: right;
            };
        }
    </style>
</custom-style>

Затем на макете верхнего уровня (не обертка потока!) 

@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}
0 голосов
/ 16 ноября 2018

Вы можете использовать его там, где стиль родителя, что-то вроде:

мой-element.html 

 <link rel="import" href="polymer/polymer.html"> 
 <dom-module id='my-element'>
 <template>
    <style>
        :host {
          display:block;
        }
        simple-dropdown {
           --simple-dropdown-toggle: {
                  justify-content: right;
            }
        }

    </style>

    <simple-dropdown origin="top right" label="menu" arrow>
          <a href="#">item</a>
    </simple-dropdown>
 </template>

...