# j-Drawer

> j-Drawer: NEW: bredd {Number} en standardbredd (default: 250); NEW: widthlg {Numer} valfritt, bredd för stora skärmar

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sv
Content-SHA256: 86a4eeff2ea258c7b54509102fe5962fa1ec1777ea8f315ea66b6e8719c28db7
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- `if {String}` villkor, det är jämfört med värdet inom `path`
- `align {String}` anpassning (default: `left`)
- __NEW__: `width {Number}` en standardbredd (default: `250`)
- __NEW__: `widthlg {Number}` valfritt, bredd för stora skärmar
- __NEW__: `widthmd {Number}` valfritt, bredd för medelstora skärmar
- __NEW__: `widthsm {Number}` valfritt, bredd för små skärmar
- __NEW__: `widthxs {Number}` valfritt, bredd för extra små skärmar

Använd den med `<ui-component name="drawer">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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