To see which issues are currently being worked on or are scheduled to be worked on next, visit https://huboard.com/softlayer/sl-ember-components/#/

Is currently in BETA

What sl-ember-components is

A UI components library compatible with Ember.js

Examples and documentation on how to use each component can be viewed at http://softlayer.github.io/sl-ember-components/ which is served from the gh-pages branch of this repository.

Components

sl-alert
sl-button
sl-calendar
sl-chart (only free for non-commercial use without a Highcharts license)
sl-checkbox
sl-date-picker
sl-date-range-picker
sl-date-time
sl-dialog
sl-drop-button
sl-grid system
sl-input
sl-loading-icon
sl-menu
sl-pagination-controls
sl-pagination-info
sl-pagination-per-page-select
sl-panel
sl-progress-bar
sl-radio
sl-radio-group
sl-select
sl-span
sl-tab-panel
sl-textarea
sl-tooltip

The sl-grid system isn't an Ember Component in the sense that you can use it with the traditional Ember Component syntax in your template, but rather is an offering of components, controllers and partials to provide a fully-featured Grid. The documentation for this "component" is viewable by launching the demo application bundled with this addon and visiting the /sl-grid route.

Mixins

sl-modal-manager

Provides an advanced implemention of the modal component.

The documentation is viewable at addon/mixins/docs/modal.md

sl-modal

Provides an advanced implemention of the modal component.

The documentation is viewable at addon/mixins/docs/modal.md

sl-notify-view

Use this mixin on a view when you need to notify its controller of any of the following events:

didInsertElement
willClearRender
willDestroyElement
willInsertElement

sl-pagination-controller

Most usually employed by a controller being used to back an implementation of the sl-grid system, this mixin should be used whenever pagination support for a data set is desired.

Requires either the use of sl-ember-store or the use of a metaData property on your Array Controller's model data for the mixin to work correctly.

Helpers

get-key

arguments: an object, a key, a default key

The key is resolved on the object, to be returned. If it is falsy, and a default key is supplied, the default key is resolved on the object and that result is returned.

render-component

arguments: component name, optional bound properties

Render the component referenced by name. Bound properties can be passed to the component in the normal fashion.

Utility Classes

sl-grid-key-adapter

Provides an abstraction between the events the sl-grid component listens for and the ability to associate any keyboard shortcuts in your application to trigger them.

sl-menu-key-adapter

Provides an abstraction between the events the sl-menu component listens for and the ability to associate any keyboard shortcuts in your application to trigger them.

All of this functionality is provided through a combination of leveraging the best-of-breed of other component offerings as well as our own implementations when the existing offerings were deficient. Existing offerings that were leveraged include:

LICENSE WARNING

While this library is MIT licensed not all of the third-party component libraries are. Specifically, Highcharts is only free for non-commercial use and requires a license for any other use. See this FAQ page for more information.

Other libraries that are not MIT licensed, though it should not pose a problem, are:

Supported browsers

See http://softlayer.github.io/sl-ember-components/browsers.html

Demo

Live

http://softlayer.github.io/sl-ember-components/#/demos

Development Environment

Installation

git clone this repository
npm install
bower install

Running

ember server
View the demo at http://localhost:4200

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

How to use this addon in your application

ember install:addon sl-ember-components

npm install --save-dev ember-cli-less

Modify Brocfile.js file to add:

app.import({
    development : 'bower_components/bootstrap/dist/js/bootstrap.js',
    production  : 'bower_components/bootstrap/dist/js/bootstrap.min.js'
});

Create app/styles/app.less file. Then add to it:

@import 'sl-ember-components';

Examples and documentation on how to use each component

Examples and documentation on how to use each component can be viewed at http://softlayer.github.io/sl-ember-components

Versioning

Employs Semantic Versioning 2.0.0

Contribution

See CONTRIBUTING.md

Copyright and License

sl-ember-components leverages several third-party libraries which are not all MIT licensed. Specifically, Highcharts is only free for non-commercial use and requires a license for any other use. See this FAQ page for more information.