This is the official Ember library for the Semantic-UI modules. The code was original built for CrowdOx and other projects that we were building for clients. We would appreciate any feedback that you have.
We feel that the Semantic-UI-Ember project should be an extension of Semantic-UI and not a complete rewrite. With that in mind, we will always be a very lightweight layer on top to make the integration a first-class Ember experience. Please follow the official documentation for futher information.
Include the library as an NPM dependency, from within an ember-cli app.
ember install semantic-ui-ember
If using ember-cli 0.1.5 – 0.2.3
ember install:addon semantic-ui-ember
If using ember-cli < 0.1.5
npm install --save-dev Semantic-Org/Semantic-UI-Ember
Run the library's blueprint to pull in its Bower dependencies. This only needs to be done once.
ember generate semantic-ui-ember
- Documentation: Official Documentation
- Class:
ui accordion - Component:
ui-accordion
Replace <div class="ui accordion"> with {{#ui-accordion}} and fill the inside content with standard Semantic-UI.
Variations can be used with {{#ui-accordion class="styled"}}.
- Documentation: Official Documentation
- Class:
ui checkbox - Component:
ui-checkbox
Replace <div class="ui checkbox"> with {{ui-checkbox}} and bind to a property on your model/controller/component.
export default Ember.Controller.extend({
havingFun: false
});- Class:
ui radio - Component:
ui-radio
Replace <div class="ui radio"> with {{ui-radio}} and bind to a property on your model/controller/component.
export default Ember.Controller.extend({
fruit: null
});- Documentation: Official Documentation
There isn't a corresponding Ember component for this since it isn't rendered to the screen but instead invoked.
- Documentation: Official Documentation
- Class:
ui dropdown - Component:
ui-dropdown - Parameters
- value: Bound value that is set to
optionValuePath - onChange: Event to bind changes too
- value: Bound value that is set to
Replace <div class="ui dropdown"> with {{ui-dropdown}} and fill in your content
export default Ember.Controller.extend({
itemActions: [ "Edit", "Remove", "Hide"],
selectedAction: null,
actions: {
update_selected: function(component, id, value) {
this.set('selectedAction', id);
}
}
});- Documentation: Official Documentation
- Class:
ui embed - Parameters
- data-id: The id of the video you wanted embedded
- data-source: The source provider of the video (youtube for example)
- data-icon: Icon to show for the play button
- data-place: Placeholder image to show before the video starts
- Documentation: Official Documentation
- Class:
ui modal - View:
ui-modal
Embed the Modal within your page's template, similar to the semantic-ui master documentation.
Except instead of using <div class='ui modal'> you can use {{ui-modal}}. Each
modal MUST include a name so it knows which one you are referring too.
In order to open the modal you just need to execute the show command.
export default Ember.Controller.extend({
actions: {
openModal: function(name) {
$('.ui.modal').modal('show');
}
}
});- Documentation: Official Documentation
- Class:
ui nag
- Documentation: Official Documentation
- Class:
ui popup - Component:
ui-popup
Replace <div class="ui popup"> with {{ui-popup}} and fill the inside content with standard Semantic-UI.
You can also create an icon version by specifying the tagName
- Documentation: Official Documentation
- Class:
ui progress
- Documentation: Official Documentation
- Class:
ui rating
- Documentation: Official Documentation
- Class:
ui search - Parameters
- url: The url used for searching
- Documentation: Official Documentation
- Class:
ui shape
You control the shape through semantic's regular javascript code
import Ember from 'ember';
export default Ember.Controller.extend(Ember.Evented, {
actions: {
flip: function(direction) {
$('.ui.shape').shape('flip ' + direction);
}
}
});- Documentation: Official Documentation
- Class:
ui sidebar
The sidebar, as per Semantic-UI's documentation, will need to be directly below the body element. Since Ember by default renders a container element you need to utilize a little trick to get rid of it.
export default Ember.Component.extend({
tagName: ''
});When you want to invoke the sidebar you simply use the semantic methods.
import Ember from 'ember';
export default Ember.Controller.extend(Ember.Evented, {
actions: {
toggle: function(direction) {
$('.ui.sidebar').sidebar('toggle');
}
}
});Not implemented. Better suited to use routes through Ember. If you disagree please open an issue with how you would see it used.
- Documentation: Official Documentation
- Class:
ui transition
You can invoke the semantic javascript directly.
import Ember from 'ember';
export default Ember.Controller.extend(Ember.Evented, {
actions: {
transition: function() {
$('img').transition('horizontal flip', '500ms');
}
}
});