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');
}
}
});