ember-cli-transformicons v1.1.2

Installation

ember install ember-cli-transformicons

Demo

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

Transformicon Components

• t-menu
• t-grid
• t-add
• t-remove
• t-scroll
• t-mail
• t-form
• t-video
• t-loader

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/.