# ember-slots

> Named slots for Ember.js apps

Latest version **0.1.0** (published 2019-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-slots
pnpm add ember-slots
yarn add ember-slots
bun add ember-slots
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-02-24 |
| First published | 2019-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 6.* \|\| 8.* \|\| >= 10.* |
| Dependencies | 2 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | exelord |
| Keywords | ember-addon, slots, template, named blocks |

## Links

- npm: https://www.npmjs.com/package/ember-slots
- npm.io page: https://npm.io/package/ember-slots

## Dependencies (2)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.1.2
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^3.0.0

## Recent versions

- 0.1.0 (latest) — 2019-02-24

## README

ember-slots
==============================================================================

Named slots for Ember.js apps.


Compatibility
------------------------------------------------------------------------------

* Ember.js v2.18 or above
* Ember CLI v2.13 or above

Installation
------------------------------------------------------------------------------

```
ember install ember-slots
```


Usage
------------------------------------------------------------------------------

### Define slots in your component template

```hbs
<!-- components/card-panel/template.hbs -->

<div class="card">
  <div class="card-header">
    <Slot @name="header" />
  </div>
  
  <div class="card-body">
    {{yield}}
  </div>

  <div class="card-footer">
    <Slot @name="footer">
      This is default footer - please replace it!
    </Slot>
  </div>
</div>
```

### Use Template component to render content inside of slots

```hbs
<!-- templates/dashboard.hbs -->

<CardPanel>
  <Template @slot="header">
    This content will land in header slot
  </Template>

  <Template @slot="footer">
    Created with love ♥
  </Template>

  <p>Here is a card body content</p>
</CardPanel>
```


License
------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).

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