<commit_before># Bar d'application

La bar d'application doit être utilisé comme conteneur pour le menu, le titre, les infos utilisateur et l'entête.
Trois états par défaut
- tall
- medium
- small
En fonction de la position de la scroll bar dans l'écran, la barre peut s'afficher de différente manière.



## Inspiration

- [Google Material](http://www.google.com/design/spec/material-design/introduction.html#)
- [AirBnb](https://www.airbnb.fr/rooms/5601059?s=2nS7) , pas utilisé au final mais utile dans la réflexion.



## Technical Configuration


## Properties

Attribute                     | Options     | Possible               | Default       | Description
---                           | ---         | ---                    | ---           | ---
`scrollTargetSelector`        | *string*    | `#container` | undefined       | Définit  quel élément va notifier la bar avec l'évènement de type scroll.
`sizeMap`                     | *object*    | `{mediumm: {sizeBorder: 150}}` | {'small': {'sizeBorder': 800},'medium': {'sizeBorder': 500}, ...}| Map de taille par défaut.
`size`                        | *string*    | `tall,medium or an element of sizeMap` | tall       | Taille de la bar par défaut.
`processSize`                 | *function*    | `function(){//traitement}` | undefined       | Surcharge le calcul par défaut de la taille.
`notifySizeChange`            | *function*    | `function(){//traitement}` | undefined       | Notifie les autres éléments que la taille a changée.

## Structure

Le schéma.pdf présent dans les sources du composant a pour but d'expliquer les éléments de la page.


## Example
```html
<Bar>content as you want</Bar>
```



## Demo

[Application bar](http://kleegroup.github.io/focus-components/application/bar/example/)<commit_msg>[application-bar] Add documentation. #27<commit_after># Bar d'application

La bar d'application doit être utilisé comme conteneur pour le menu, le titre, les infos utilisateur et l'entête.
Trois états par défaut
- tall
- medium
- small
En fonction de la position de la scroll bar dans l'écran, la barre peut s'afficher de différente manière.



## Inspiration

- [Google Material](http://www.google.com/design/spec/material-design/introduction.html#)
- [AirBnb](https://www.airbnb.fr/rooms/5601059?s=2nS7) , pas utilisé au final mais utile dans la réflexion.



## Technical Configuration


## Properties

Attribute                     | Options     | Possible               | Default       | Description
---                           | ---         | ---                    | ---           | ---
`scrollTargetSelector`        | *string*    | `#container` | undefined       | Définit  quel élément va notifier la bar avec l'évènement de type scroll.
`sizeMap`                     | *object*    | `{mediumm: {sizeBorder: 150}}` | {'small': {'sizeBorder': 800},'medium': {'sizeBorder': 500}, ...}| Map de taille par défaut.
`size`                        | *string*    | `tall,medium or an element of sizeMap` | tall       | Taille de la bar par défaut.
`processSize`                 | *function*    | `function(){//traitement}` | undefined       | Surcharge le calcul par défaut de la taille.
`notifySizeChange`            | *function*    | `function(){//traitement}` | undefined       | Notifie les autres éléments que la taille a changée.

## Structure

Le [schéma.pdf](https://github.com/KleeGroup/focus-components/blob/master/application/bar/schema.pdf) présent dans les sources du composant a pour but d'expliquer les éléments de la page.


## Example
```html
<Bar>content as you want</Bar>
```



## Demo

[Application bar](http://kleegroup.github.io/focus-components/application/bar/example/)
{'fraction_non_alphanumeric': 0.1218384552624422, 'fraction_numerical': 0.010334511830296437, 'mean_word_length': 2.4961977186311786, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 3, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1747807', 'n_tokens_mistral': 1111, 'n_tokens_neox': 1070, 'n_words': 332}