问题
I'm trying to migrate an existing Vaadin 8 application to Vaadin 12 and need to know how to recreate the functionality of Vaadin 8's GridLayout in Vaadin 12.
According to Vaadin Docs a GridLayout can be replaced in Vaadin 12 by: "Use Div together with the new CSS Grid functionality that is supported in most browsers"
Unfortunately it's not totally clear how exactly this can be done.
Lets assume that I have a Vaadin composite "HelloGrid":
@StyleSheet("styles/hello-grid.css")
public class HelloGrid extends Composite<Div> {
public HelloGrid(){
// EDIT: This line is my solution to the question
getElement().getClassList().add("hello-grid");
Label labelOne = new Label();
labelOne.addClassName("label-one");
Label labelTwo = new Label();
labelTwo.addClassName("label-two");
add(labelOne);
add(labelTwo);
}
}
And a css file "hello-grid.css":
.hello-grid {
display: grid !important;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.label-one {
grid-column: 1;
}
.label-two {
grid-column: 2;
}
- How can I associate the ".hello-grid" css class with the HelloGrid Composite.
- Is this the right/preferred way to use a css grid in Vaadin 12 at all
回答1:
It's a bit too late, but maybe answers someone else question.
It depends where exactly you have placed your css
styles. I would suggest to place under webapp\frontend\styles
, then you would be able to access them using @StyleSheet("frontend://styles/hello-grid.css")
. As it also noted in official documentation, here Including Style Sheets it's
Relative to Servlet URL
Using your example with this set-up:
and styles like those (basically just adding colors to your stylesheet to verify, it works )
this was the output:
I haven't found any exact guides on Vaadin page, how you could use Grid styles, but this tutorial looks quite promising A Complete Guide to Grid. Otherwise, there shouldn't be anything special regarding Vaadin.
Also, it seems that there is an add-on in directory, which might help Css Grid Layout (Through, I haven't tried it out myself)
来源:https://stackoverflow.com/questions/54421131/how-to-use-a-css-grid-in-vaadin-flow-as-replacement-for-framework-8s-gridlayout