Skip to content

Commit 3a47170

Browse files
committed
Add ember-emotion as third party library
1 parent 8c4fb1e commit 3a47170

File tree

2 files changed

+53
-0
lines changed

2 files changed

+53
-0
lines changed

docs/docs.yaml

+4
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,7 @@
4343
- create-emotion-styled
4444
- create-emotion-server
4545
- preact-emotion
46+
47+
- title: Third Party Packages
48+
items:
49+
- ember-emotion

docs/ember-emotion.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# ember-emotion
2+
3+
> Use emotion in Ember.js
4+
5+
[![Build Status](https://travis-ci.org/alexlafroscia/ember-emotion.svg?branch=master)](https://travis-ci.org/alexlafroscia/ember-emotion)
6+
[![Ember Observer Score](https://emberobserver.com/badges/ember-emotion.svg)](https://emberobserver.com/addons/ember-emotion)
7+
[![npm version](https://badge.fury.io/js/ember-emotion.svg)](https://www.npmjs.com/package/ember-emotion)
8+
9+
This addon
10+
11+
- 👩‍🎤 Exposes `emotion` as a module that can be imported in Ember
12+
- 📦 Adds the ability to define styles scoped to a pod
13+
- 🚀 Supports FastBoot out-of-the-box
14+
- ⚡️ Allows for dynamically defining CSS values
15+
16+
## Installation
17+
18+
```bash
19+
ember install ember-emotion
20+
```
21+
22+
## Usage
23+
24+
To start using `ember-emotion`, add a `style.js` file within a `Component` or `Controller` pod. Each named export can be accessed through the `emotion-class` helper in the pod's template. The default export, for `Component` pods, is merged into the `classNames` property automatically
25+
26+
```javascript
27+
// components/foo-bar/style.js
28+
import { css } from 'emotion';
29+
30+
export default css`
31+
background: grey;
32+
`;
33+
34+
export const paragraph = css`
35+
color: blue;
36+
`;
37+
```
38+
39+
```handlebars
40+
{{! components/foo-bar/template.hbs }}
41+
The component background will be grey.
42+
<p class={{emotion-class 'paragraph'}}>
43+
Just this text will be blue.
44+
</p>
45+
```
46+
47+
For more information, check out the [project `README`][ember-emotion].
48+
49+
[ember-emotion]: https://github.com/alexlafroscia/ember-emotion

0 commit comments

Comments
 (0)