0.0.2 • Published 5 years ago
actor-layout v0.0.2
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