https://github.com/sukima/ember-onsenui

Ember addon for Onsen UI component library
https://github.com/sukima/ember-onsenui

Last synced: about 2 months ago
JSON representation

Ember addon for Onsen UI component library

• Host: GitHub
• URL: https://github.com/sukima/ember-onsenui
• Owner: sukima
• License: mit
• Created: 2016-12-23T03:01:56.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-11T17:02:45.000Z (about 7 years ago)
• Last Synced: 2024-04-16T03:16:16.451Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 77.1 KB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-onsenui - ember-onsenui - Ember.js integration of Onsen UI. (Community Packages / Other Frameworks)

README

        
# Ember-onsenui

Experiment to get [Onsen UI](https://onsen.io/) into Ember. **This is very BETA right now**

Simply includes the JS and CSS for the [Vanilla JavaScript](https://onsen.io/v2/docs/guide/js/) version of the library.

**Unknown which Onsen UI components work or don't work at the moment.**

Once added to your Ember app you can use the web components directly and attach Ember bindings and actions like you would a normal HTML element.

This addon also exposes the `ons` JavaScript module as `ember-onsenui` (or simply `onsenui`; both work).

## Example

```handlebars

  

    
Onsen UI in Ember

    


      

        

      

    

  


  


    Click me!

  


```

```js

import Ember from 'ember';

import ons from 'ember-onsenui';

const { Controller } = Ember;

export default Controller.extend({

  actions: {

    alertMe() {

      ons.notification.alert('It works!');

    }

  }

});

```

## Options

You can adjust what gets imported into your app by using the following Ember app config in your `ember-cli-build.js`:

```js

var app = new EmberAddon(defaults, {

  // Add options here

  'ember-onsenui': {

    importOnsenuiCSS: true,

    importFontAwesome: true,

    importIonIcons: true,

    importMaterialDesignIcons: true,

    importTheme: 'default'

  }

});

```

`importTheme` can be one of `default`, `blue-basic`, `blue`, `dark`, `purple`, or `sunshine`.

## Installation

* `git clone ` this repository

* `cd ember-onsenui`

* `npm install`

* `bower install`

## Running

* `ember serve`

* Visit your app at [http://localhost:4200](http://localhost:4200).

## Running Tests

* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)

* `ember test`

* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).