SIPRES Classes CSS - TecostNetwork/Network GitHub Wiki

Pour obtenir des tables de données read-only avec les valeurs soulignées, on utilise les classes suivantes sur les <table> ou <h:panelGrid> : 

• table-label-value : table avec label et valeur soulignée.
• table-label-value-2 : table avec label et valeur soulignée + label et valeur soulignée + ...
• table-label-value-info : table avec label, valeur soulignée et icône avec tooltip.

Exemples : 

.table-label-value affiche une table avec : 

• label + valeur
• label + valeur + valeur
• on peut avoir une colonne label et autant de colonnes valeurs que souhaitées.

.table-label-value-info affiche une table avec : 

• label + valeur + info
• label + valeur + valeur + info
• on peut avoir une colonne label, autant de colonnes valeurs que souhaitées, et une colonne info

.table-label-value-2 affiche une table avec : 

• label + valeur + label + valeur
• on peut avoir autant de "duos" que souhaités, mais avec une seule colonne label et une seule colonne valeur chacun.

La classe ui-inputgroup permet de grouper visuellement plusieurs composants, comme un select avec un bouton d'action. 

Dans le cas où on a un <h:panelGrid columns="2">, il faut wrapper les composants qui vont ensemble avec un <h:panelGroup styleClass="ui-inputgroup">. Ainsi, on a une colonne pour le label, et une colonne de la grille pour les deux composants.

<h:panelGrid columns="2" styleClass="editor-grid">
   <t:label for="mySelect" value="_[/Organization]" />
   <h:panelGroup styleClass="ui-inputgroup">
      <p:selectOneMenu id="mySelect" value="#{controller.value}">
         <f:selectItems value="#{controller.availableValues}" />
      </p:selectOneMenu>
      <p:commandButton id="myButton" actionListener="#{controller.action}" />
   </h:panelGroup>
</h:panelGrid>

<t:icon icon="#{​​​icons.generic.edit}​​​​​​​​​​" styleClass="fa-10x"/> fait une icône taille x10

Les règles possibles sont :

• fa-lg (large)
• fa-sm (small)
• fa-xs (extra-small)
• fa-2x  jusqu'à  fa-10x  (pour le facteur de taille)

à utiliser avec parcimonie par contre car on veut des icônes de taille standard dans la plupart des cas. On ne devrait appliquer ces règles que dans des cas très spéciaux comme une landing page ou page d'accueil avec de grosses icônes.

Pour mettre des marges à un élément, on peut utiliser les classes : 

• p-mt (margin top)
• p-mr (margin right)
• p-mb (margin bottom)
• p-ml (margin left)

Cela met une marge de 1rem qui convient dans la plupart des cas. ça permet de remplacer les style="margin-top: 20px" et cie. Il est également possible de spécifier la taille de la marge via p-mt-1 p-mt-2... mais il convient d'utiliser la version sans nombre par défaut afin d'avoir des marges similaires dans la plupart des cas.

Pour cacher des éléments lorsque l'écran est grand, moyen ou petit, on utilise les classes suivantes : 

• p-sm-hide (caché sur petit écran comme un mobile)
• p-md-hide (caché sur un écran moyen comme un iPad portrait)
• p-lg-hide (caché sur un écran large comme un iPad paysage ou un petit moniteur)
• Aucune classe pour cacher sur un écran large, car sinon, bin autant ne jamais l'afficher :-)

Il est possible de synchroniser les largeurs de colonnes entre plusieurs tables. Attention ça ne synchronise que les tables d'une même itération : 

• En utilisant la classe sync-cols sur les tables concernées.
• En utilisant la classe innertable-container une <p:column> contenant une table imbriquée, afin de synchroniser les sous-tables.

Il est possible de synchroniser des tables ou <h:panelGrid> ne faisant pas partie de la même itération, simplement situées à la suite les unes des autres : 

• En utilisant une classe sync-cols-xyz où xyz correspond à un identifiant commun aux tables à synchroniser. Si on souhaite synchroniser deux groupes de tables différents, on utilisera des xyz différents. Attention à mettre un identifiant "assez unique" pour que ça n'entre pas en conflit avec d'autres tables ailleurs sur la page, même si c'est peu probable. 

Exemple ci-dessous avec deux panelGrids frères avec l'identifiant "appointment" :