# j-Drawer

> j-Drawer : NOUVEAU : largeur {Nombre} une largeur par défaut (par défaut : 250) ; NOUVEAU : widthlg {Number} facultatif, largeur pour les grands écrans

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 682c8f5b78a6d3deff194f54e8ff3b4b6bd28a517a721b1f7bc0856d26a81448
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Condition `if {String}`, elle est comparée à la valeur comprise dans `path`
- Alignement `align {String}` (par défaut : `left`)
- __NOUVEAU__ : `width {Number}` une largeur par défaut (par défaut : `250`)
- __NOUVEAU__ : `widthlg {Number}` en option, largeur pour grands écrans
- __NOUVEAU__ : `widthmd {Number}` en option, largeur pour écrans moyens
- __NOUVEAU__ : `widthsm {Number}` en option, largeur pour petits écrans
- __NOUVEAU__ : `widthxs {Number}` en option, largeur pour les très petits écrans

Utilisez-le avec `<ui-component name="drawer">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

```html example.html
<ui-component name="drawer" path="common.menu" config="if:main;align:left" class="hidden">
	<button><i class="ti ti-inbox"></i>Inbox</button>
	<button class="selected"><i class="ti ti-star"></i>Starred</button>
	<button><i class="ti ti-envelope"></i>Send mail</button>
	<hr />
	<a href="#"><i class="ti ti-trash"></i>Trash</a>
</ui-component>

<script>
	var common = { menu: 'main' };
</script>
```