# j-Drawer

> j-Drawer: NEU: width {Number} eine Standardbreite (Standard: 250); NEU: widthlg {Number} optional, Breite für große Displays

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 9443467073cdab0caa403dee219fddf3574f3b77206e1df01a5a6d9d39532e2a
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Bedingung `if {String}`, es wird mit dem Wert innerhalb von `path` verglichen
- `align {String}`-Ausrichtung (Standard: `left`)
- __NEU__: `width {Number}` eine Standardbreite (Standard: `250`)
- __NEU__: `widthlg {Number}` optional, Breite für große Displays
- __NEU__: `widthmd {Number}` optional, Breite für mittlere Displays
- __NEU__: `widthsm {Number}` optional, Breite für kleine Displays
- __NEU__: `widthxs {Number}` optional, Breite für besonders kleine Displays

Verwenden Sie es mit `<ui-component name="drawer">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```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>
```