Commit ff026c1a authored by Lucas Serrano's avatar Lucas Serrano

[doc] Barres de progression

parent 980575dc
......@@ -167,6 +167,67 @@ Il existe 4 classe de bouton déjà stylisés pour les `<bouton>` ou les `<input
* La classe `button-del` qui indique que l'appuie sur le bouton va entraîner une suppression.
* La classe `button-cancel` qui indique que l'appuie sur le bouton va annuler les changements.
### Barres de progression ###
Le CSS intégre des barres de progressions qui permettent de mettre en valeur
les données de taux d'utilisation.
#### Classes ####
Pour utiliser ces barres il suffit de créer un div containeur de classe
`progress-container` ainsi qu'un div pour la barre à afficher de classe
`progress-bar` et d'une classe de statut parmis:
* `overflow`
* `alert`
* `warning`
* `ok`
* `good`
```html
<div class="progress-container">
<div class="progress-bar good">
Bravo tu n'as pas dépassé ton quota !
</div>
</div>
```
Note: Comme souvent on ne connais pas la largeur à l'avance
on peut s'autoriser **exceptionnellement** à utiliser l'attribut
`style` dans le code html:
```html
<div class="progress-bar good" style="width: {{ ma_largeur }}%;">
Tu utilises {{ mon_quota }}% de ton quota
<div>
```
#### Raccourcis ####
En pratique il est utile de pouvoir adapter la classe de statut de la
barre de progression en fonction du pourcentage afficher.
Afin d'éviter la duplication de code il existe des filtres dans l'intranet
pour pouvoir choisir la classe de statut automatiquement.
Il faut d'abord pour cela charger les filtres supplémentaire de l'intranet
à l'aide de la balise: `{% load custom_filters %}`.
Puis l'on peut utiliser un des deux filtres disponibles:
* `progress_class`:`max`, qui vaut `good` à `max` et `alert` à 0.
* `progress_class_reverse`:`max`, qui vaut `alert` à `max` et `good` à 0.
`max` est le maximum que notre valeur filtrée peut atteindre.
En cas de dépassement nos filtres vaudront `overflow`.
Si `max` n'est pas précisé la valeur 100 sera utilisé.
Exemple d'utilisation des barres de progression (extrait d'impression)
```html
{% load custom_filters %}
<div class="progress-container">
<div class="progress-bar {{ tray.count|progress_class:tray.max_capacity }}"
style="width:{% widthratio tray.count tray.max_capacity 100 %}%;">
{{ tray.count }}/{{ tray.max_capacity }}
</div>
</div>
```
Dans les cas où la valeur calculée n'est pas un pourcentage, on peut faire une
mise à l'échelle à l'aide de la balise Django [widthratio](https://docs.djangoproject.com/fr/1.7/ref/templates/builtins/#widthratio)
Cas particulier des formulaires
-------------------------------
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment