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
});- 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
- selected: Bound value that is set to
optionValuePath - onChange: Event to bind changes too
- selected: 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: {
updateSelected: 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
- 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
- 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: ''
});If you need to have the sidebar under a specific scope or can't have it directly under the body element, you can also specify the context in which the sidebar will exist.
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');
}
}
});- Documentation: Official Documentation
- Class:
ui sticky
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');
}
}
});