Я пытаюсь использовать app-layout-addon (https://vaadin.com/directory/component/app-layout-add-on) в vaadin. До сих пор аддон работает довольно хорошо, за исключением того факта, что написанная мной таблица стилей работает только в Firefox, а не в ChromeЯ создал еще что-то сложное, но я также новичок в работе веб-компонентов. Может кто-нибудь объяснить мне, как должна быть настроена таблица стилей для работы с Chrome.
Пакет класса MainView com.test.style.applayout.content.views;
import com.github.appreciated.app.layout.behaviour.AppLayout;
import com.github.appreciated.app.layout.behaviour.Behaviour;
import com.github.appreciated.app.layout.builder.AppLayoutBuilder;
import com.github.appreciated.app.layout.component.appmenu.left.LeftNavigationComponent;
import com.github.appreciated.app.layout.component.appmenu.left.builder.LeftAppMenuBuilder;
import com.github.appreciated.app.layout.design.AppLayoutDesign;
import com.github.appreciated.app.layout.router.AppLayoutRouterLayout;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.page.Push;
import com.vaadin.flow.component.page.Viewport;
@StyleSheet(value = "frontend://style.css")
@Push
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class MainView extends AppLayoutRouterLayout {
private Behaviour variant;
@Override
public AppLayout getAppLayout() {
if (variant == null) {
variant = Behaviour.LEFT_HYBRID;
}
return AppLayoutBuilder.get(variant).withTitle("App Layout").withDesign(AppLayoutDesign.CUSTOM)
.withAppMenu(LeftAppMenuBuilder.get()
.add(new LeftNavigationComponent("Assets", VaadinIcon.ABACUS.create(), AssetsView.class))
.build())
.build();
}
}
Класс актива содержит простой div с текстом и цветом фона, определенным в таблице стилей. package com.test.style.applayout.content.views;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
@Route(value = "testgrid", layout = MainView.class)
public class AssetsView extends Div {
public AssetsView() {
setWidth("100%");
GridDiv gridDiv = new GridDiv();
add(gridDiv);
}
public class GridDiv extends Div {
public GridDiv() {
setClassName("browse-components__grid");
setText(GridDiv.class.getSimpleName());
setSizeFull();
}
}
}
style.css
.browse-components__grid {
background-color: red;
}
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.test</groupId>
<artifactId>style.applayout.content</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>style.applayout.content</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<vaadin.version>10.0.5</vaadin.version>
</properties>
<repositories>
<repository>
<id>vaadin-addons</id>
<url>http://maven.vaadin.com/vaadin-addons</url>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- https://vaadin.com/directory/component/app-layout-add-on -->
<dependency>
<groupId>com.github.appreciated</groupId>
<artifactId>app-layout-addon</artifactId>
<version>2.0.0</version>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
Настройка приложения
![application structure](https://i.stack.imgur.com/Leszz.png)
Скриншот Firefox ![firefox screenshot](https://i.stack.imgur.com/wpNHm.png)
Скриншот Chrome ![chrome screenshot](https://i.stack.imgur.com/D282G.png)