npm.io
0.0.2 • Published 7 years ago

actor-layout

Licence
MIT
Version
0.0.2
Deps
0
Size
207 kB
Vulns
0
Weekly
0
Stars
1
SummaryDependencyVersions

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

Keywords

layoutwebcomponentsdashboardstencil