Comment puis-je utiliser CSS pour le style de mes composants?

Comment Vaadin utiliser les CSS qui a été écrit à titre purement éléments HTML (par exemple, le style et la disposition des corps, h1, etc éléments) et l'utilisation exacte de style CSS dans Vaadin?

- T-on besoin de faire des changements sur le CSS de la carte correspondant à l'Vaadin éléments, ou peut-on l'utiliser CSS?

OriginalL'auteur Obakeng | 2011-09-22

  1. 6

    Vous pouvez utiliser le CSS est, mais vous aurez (naturellement) ont à dire Vaadin qui classes CSS à utiliser en appelant

    myComponent.setStyleName("myStyleClass");

    ou

    myComponent.addStyleName("myStyleClass");

    La différence entre les deux est que setStyleName remplace tous les styles existants avec la condition que l'un et addStyleName ne remplace rien, mais ajoute le style fournies par le composant.

    Vous pouvez également modifier votre CSS pour remplacer défaut Vaadin styles, par exemple

    .v-panel .v-panel-content {
    background: yellow;
}

    allait changer tous les panneaux de couleur jaune.

    Je vous recommande de créer un nouveau thème qui est basé sur un Vaadin thème. Voici comment:

    1. Créer un répertoire dans le VAADIN/thèmes/répertoire (par exemple. VAADIN/thèmes/myTheme).
    2. Créer des styles.css dans votre répertoire de thème.
    3. Ajouter @import "../runo/styles.css"; le début de vos styles.css (vous pouvez remplacer les eaux de ruissellement par tout autre thème).
    4. Appel setTheme(myTheme); dans votre Vaadin classe d'application.
    5. Si vous souhaitez appliquer l'échelle de l'application des styles, remplacer la Vaadin composant définitions de CSS dans vos styles.css. Si vous ne connaissez pas les noms de classes CSS, vous pouvez utiliser firebug et vérifier les éléments HTML de classes.
    6. Si vous souhaitez créer un composant spécifique du style, de définir les styles.la css et de l'appel setStyleName ou addStyleName méthodes.

    Voir le CSS entrée dans le Livre de Vaadin ici.

    Pouvez-vous utiliser @Theme("myTheme") au lieu de setTheme(myTheme);?

    OriginalL'auteur miq

  2. 0

    Aussi loin que je peux dire en regardant les démos, Vaadin juste génère du code HTML, donc oui.

    OriginalL'auteur Quentin

  3. 0

    - T-on besoin de faire des changements sur le CSS de la carte correspondant à l'Vaadin éléments, ou peut-on l'utiliser CSS?

    Vous pouvez utiliser vos propres styles CSS (tout comme elle est) et il peut utiliser pour les composants individuels (comme dit par "miq*" plus haut) ou de la totalité de la page. `

    Voici un lien pour plus d'info:

    https://vaadin.com/book/-/page/themes.css.html

    OriginalL'auteur UnP