Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ember-cli-transformicons with all npm packages installed. Try it out:

var emberCliTransformicons = require("ember-cli-transformicons")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ember-cli-transformicons v1.1.2

Transformicons addon for your Ember CLI project

Transformicons Logo
ember-cli-transformicons

Build Status NPM Version Greenkeeper Badge Ember Versions

Ember Observer Score Known Vulnerabilities Known Vulnerabilities

Transformicons for Ember

ember-cli-transformicons demo gif

Installation

ember install ember-cli-transformicons

Demo

https://alexdiliberto.com/ember-cli-transformicons

Transformicon Components

Component API

Add your favorite transformicon component to any template in your application.

Global optional parameters:

  • animation string - Set the menu animation type. If you do not provide a specific type for an icon category, then a default type will simply be provided for you. Aliases: a

Menu

Menu optional parameters:

  • is-open boolean - Set initial open menu state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isOpen, which is a boolean type indicating if the current state is open or closed.

animation

{{t-menu}}
{{t-menu animation="butterfly"}}
{{t-menu a="minus"}}
{{t-menu a="x-cross"}}
{{t-menu a="arrow-up"}}
{{t-menu a="arrow-360-left"}}
{{t-menu a="arrow-left"}}

is-open

{{t-menu is-open=true}}
{{t-menu is-open=someBoundProperty}}

action

{{t-menu onclick=(action "updateMenuAction")}}

⬆️ back to top

Grid

Grid optional parameters:

  • is-open boolean - Set initial open grid state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isOpen, which is a boolean type indicating if the current state is open or closed.

animation

{{t-grid}}
{{t-grid animation="rearrange"}}
{{t-grid a="collapse"}}

is-open

{{t-grid is-open=true}}
{{t-grid is-open=someBoundProperty}}

action

{{t-grid onclick=(action "updateGridAction")}}

⬆️ back to top

Add

Add optional parameters:

  • is-added boolean - Set initial open add state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isAdded, which is a boolean type indicating if the current state is pending add.

animation

{{t-add}}
{{t-add animation="minus"}}
{{t-add a="check"}}

is-added

{{t-add is-added=true}}
{{t-add is-added=someBoundProperty}}

action

{{t-add onclick=(action "updateAddAction")}}

⬆️ back to top

Remove

Remove optional parameters:

  • is-removed boolean - Set initial open removed state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isRemoved, which is a boolean type indicating if the current state is pending remove.

animation

{{t-remove}}
{{t-remove animation="check"}}
{{t-remove a="chevron-left"}}
{{t-remove a="chevron-right"}}
{{t-remove a="chevron-down"}}
{{t-remove a="chevron-up"}}

is-removed

{{t-remove is-removed=true}}
{{t-remove is-removed=someBoundProperty}}

action

{{t-remove onclick=(action "updateRemoveAction")}}

⬆️ back to top

Scroll

{{t-scroll}}

⬆️ back to top

Mail

Mail optional parameters:

  • is-open boolean - Set initial open mail state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isOpen, which is a boolean type indicating if the current state is open or closed.
{{t-mail}}

is-open

{{t-mail is-open=false}}
{{t-mail is-open=someBoundProperty}}

action

{{t-mail onclick=(action "updateMailAction")}}

⬆️ back to top

Form

Form optional parameters:

  • is-searching boolean - Set initial searching state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isSearching, which is a boolean type indicating if the current state is searching or not searching.
{{t-form}}

is-searching

{{t-form is-searching=false}}
{{t-form is-searching=someBoundProperty}}

action

{{t-form onclick=(action "updateFormAction")}}

⬆️ back to top

Video

Video optional parameters:

  • is-playing boolean - Set initial playing state.
  • onclick closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter isPlaying, which is a boolean type indicating if the current state is playing or stopped.
{{t-video}}

is-playing

{{t-video is-playing=true}}
{{t-video is-playing=someBoundProperty}}

action

{{t-video onclick=(action "updateVideoAction")}}

⬆️ back to top

Loader

{{t-loader}}

⬆️ back to top

Contributing

Please contribute! You can help code, design, update documentation, fix typos, raise issues and so much more.

Any help is welcome and appreciated!

Development

Setup

git clone git@github.com:alexdiliberto/ember-cli-transformicons.git
cd ember-cli-transformicons
yarn

Server

ember s

Test Suite

yarn test # ember try:each
yarn mocha # cross-env DEBUG=ember-cli-addon-tests mocha
yarn test:all # ember try:each && mocha test/*-test.js

Update Demo App

git checkout gh-pages
rm -rf assets/
git commit

git checkout master
ember github-pages:commit --message "Release v<release_num>"
git push origin gh-pages:gh-pages

For more information on using ember-cli, visit https://ember-cli.com/.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free