# actor-layout

> An application layout component

Latest version **0.0.2** (published 2019-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install actor-layout
pnpm add actor-layout
yarn add actor-layout
bun add actor-layout
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-05-12 |
| First published | 2019-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 207.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | nesterow |
| Keywords | layout, webcomponents, dashboard, stencil |

## Links

- npm: https://www.npmjs.com/package/actor-layout
- Repository: https://github.com/nesterow/actor
- Homepage: https://github.com/nesterow/actor#readme
- Issues: https://github.com/nesterow/actor/issues
- npm.io page: https://npm.io/package/actor-layout

## Recent versions

- 0.0.2 (latest) — 2019-05-12
- 0.0.1 — 2019-05-12

## README

# 1. Layout Web Component
```html
<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. <br> Can be used with alert-styled components like bootstrap's '.alert'. <br><br> Possible values: <br> <pre>'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center', 'top-center', 'bottom-center'</pre> | `string` | `null`  |
| `footer`  | `footer`  | Add a footer slot. <br><br> Possible values: <pre>'fixed', 'full', 'default'</pre> When footer is 'full' it assumes 100% window width and moves sidebar atop footer                                                                                           | `string` | `null`  |
| `header`  | `header`  | Add a header slot. <br><br> Possible values: <pre>'fixed', 'full', 'default'</pre> 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. <br><br> Accepts: <pre>a css color value, i.e. #CCCCCC </pre>                                                                                                                                       | `string` | `null`  |
| `sidebar` | `sidebar` | Add a sidebar slot. <br><br> Possible values: <pre>'fixed', 'default'</pre>                                                                                                                                                                                   | `string` | `null`  |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*

---
_Source: https://npm.io/package/actor-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._