ember-csz
Ember template helpers for csz a runtime CSS-Modules with SASS like preprocessing.
Last updated 2 months ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-csz 
SYNC missed versions from official npm registry.

ember-csz

Build and Deploy Coverage Status semantic-release npm version EmberObserver

Ember template helpers for csz, a Runtime CSS-Modules with SASS like pre-processing.

Installation

ember install ember-csz

Usage

CSS-in-JS with components

component.js

import Component from "@glimmer/component";
import csz from "csz";

export default class MyButtonComponent extends Component {
  styles = csz`
    background: ${this.args.primary ? "palevioletred" : "white"};
    color: ${this.args.primary ? "white" : "palevioletred"};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`;
}

template.hbs

<button class={{this.styles}} type="button">
  {{yield}}
</button>

Using the component

<MyButton @primary=true>Primary</MyButton>
<MyButton>Normal</MyButton>

Inline usage in templates

<div class={{ csz "text-align:center;"}}>Hello World</div>

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Current Tags

  • 1.0.0                                ...           latest (2 months ago)

1 Versions

  • 1.0.0                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |