Drawer

Using awe.drawer to open a drawer popup, from property is used to specify where from the drawer will slide from.
The size of the drawer depends on its content, but if the content is bigger than the viewport, the drawer popup will become scrollable.

PopupDemo/Drawer.cshtml

<div class="btn-cont">
<button type="button" class="awe-btn" onclick="openDrawer('left')">Drawer from left</button>
<button type="button" class="awe-btn" onclick="openDrawer('right')">Drawer from right</button>
<button type="button" class="awe-btn" onclick="openDrawer('bottom')">Drawer from bottom</button>
<button type="button" class="awe-btn" onclick="openDrawer('top')">Drawer from top</button>
</div>
<script>
    function openDrawer(from){
        awe.drawer({
            from,               
            init: function ({cont}) {
                const res = $('<h1>Drawer content</h1>')
                .css('width', 'min(calc(100vw - 100px), 500px)')
                .height(200);

                cont.html(res);
            },
        });
    }
</script>

Drawer with header, buttons

Using the drawer component with header and buttons defined.

PopupDemo/Drawer.cshtml

<div class="btn-cont">
    <button type="button" class="awe-btn" onclick="openDrawer2('left')">Drawer from left</button>
    <button type="button" class="awe-btn" onclick="openDrawer2('top')">Drawer from top</button>
</div>
<script>
    function openDrawer2(from){
        awe.drawer({
            from,
            showHeader: 1,
            title: 'My drawer',
            btns: [
                {
                    text: 'Yes',
                    ok: 1, // add okbtn class
                    action: function () {
                        $(this).data('api').close();
                    }
                },
                {
                    text: 'No',
                    action: function () {
                        $(this).data('api').close();
                    }
                }],
            init: function ({cont}) {                    
                const res = $('<h1>Drawer content</h1>').css('width', 'min(calc(100vw - 100px), 500px)').height(200);
                cont.html(res);
            },
        });
    }
</script>

PopupForm Drawer

Using the drawer component with header and buttons defined.

PopupDemo/Drawer.cshtml


<button type="button" class="awe-btn awe-btnp o-btnf" onclick="createDinnerDrawer()">Create Dinner @MyAweIcons.PlusIco()</button>
<script>
    function createDinnerDrawer() {
        awe.drawer({                                
                type: 'popupForm',                             
                success: () => awe.flash(awem.notif('created', 5000)),
                showHeader: 1,
                from: 'left',                
                url: '@Url.Action("Create", "DinnersGridCrud")',                
                title: 'Create Dinner',
            });
    }
</script>

Comments