1. Layout Web Component

<actor-layout id="layout" header="fixed" sidebar="fixed" overlay="#eee" alerts="top-right">
    <div slot="header">
        <!-- always atop-->
    </div>
    <div slot="sidebar">
        <!-- always aside-->
    </div>
    <div slot="footer">
        <!-- always bottom-->
    </div>
    <div slot="overlay">
        <!-- will overlay page content if there is markup here, it can be a modal or a page -->
    </div>
    <div slot="alerts">
        <!-- this content will be in corners showing meesages or toasts -->
    </div>
</actor-layout>

Properties

| Property | Attribute | Description | Type | Default | | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | | alerts | alerts | Add a notification slot at given position. Can be used with alert-styled components like bootstrap's '.alert'. Possible values: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center', 'top-center', 'bottom-center' | string | null | | footer | footer | Add a footer slot. Possible values: 'fixed', 'full', 'default' When footer is 'full' it assumes 100% window width and moves sidebar atop footer | string | null | | header | header | Add a header slot. Possible values: 'fixed', 'full', 'default' When header is 'full' it assumes 100% window width and moves sidebar under header | string | null | | overlay | overlay | Add an overlay slot. Can be used to show modal dialogues. Accepts: a css color value, i.e. #CCCCCC | string | null | | sidebar | sidebar | Add a sidebar slot. Possible values: 'fixed', 'default' | string | null |

Built with StencilJS