# j-Drawer

> j-Drawer: NUEVO: ancho {Número} un ancho predeterminado (predeterminado: 250); NUEVO: widthlg {Number} opcional, ancho para pantallas grandes

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 729e246aada34c9b887de41110926e938e8ae8914f1b88698cbe1cd1973c1d54
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Condición `if {String}`, se compara con el valor dentro de `path`.
- Alineación `align {String}` (predeterminado: `left`)
- __NUEVO__: `width {Number}` un ancho predeterminado (predeterminado: `250`)
- __NUEVO__: `widthlg {Number}` opcional, ancho para pantallas grandes
- __NUEVO__: `widthmd {Number}` opcional, ancho para pantallas medianas
- __NUEVO__: `widthsm {Number}` opcional, ancho para pantallas pequeñas
- __NUEVO__: `widthxs {Number}` opcional, ancho para pantallas extra pequeñas

Úselo con `<ui-component name="drawer">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```