jose-hamilton-mota/my-starter-project-teste

Skeleton Starter for Vaadin Flow

This project can be used as a starting point to create your own Vaadin Flow application. It has the necessary dependencies and files to help you get started.

The best way to use it by via vaadin.com/start - you can get only the necessary parts and choose the package naming you want to use. There is also a getting started tutorial based on this project.

To access it directly from github, clone the repository and import the project to the IDE of your choice as a Maven project. You need to have Java 8 installed.

Run using mvn jetty:run and open http://localhost:8080 in browser.

For a full Vaadin Flow application example, there is the Beverage Buddy App Starter for Flow available also from vaadin.com/start page.

Branching information:

• master the latest version of the starter, using latest platform snapshot
• v10 the version for Vaadin 10
• v11 the version for Vaadin 11
• v12 the version for Vaadin 12
• v13 the version for Vaadin 13

my-starter-project-teste's Issues

Fixing style import issue

In order to make your styles work you need to change your styles.html to next code.

<!-- That is how you can style vaadin components in shared-styles -->
<!-- Id here can be anything but it should be unique-->
<!-- theme-for is a tab name of component that we want to style, in our case its vaadin-button but it can be anything-->
<dom-module id="my-button-theme" theme-for="vaadin-button">
    <template>
        <style>
            /* .green is a class that you whant to use */
            :host(.bgg) {
                background-color: green !important;
                color:white;
                fill:white;
            }

            /*if you use it like this then all buttons will be styled*/
            /*:host {*/
            /*background-color: deeppink;*/
            /*}*/
        </style>
    </template>
</dom-module>

<!--<custom-style>-->
    <!--<style>-->
		<!--.bgg{-->
			<!--background-color: green !important;-->
			<!--color:white;-->
			<!--fill:white;-->
		<!--}-->
    <!--</style>-->
<!--</custom-style>-->

P.S: It is because of shadow dom, styling is not that easy but in the same time it is a protection from accidental brecking of styles by some component