ember-cli-lightning-design-system
An ember-cli
addon for using the salesforce lightning design system
in your ember applications.
Installation
Install the add-on
ember install ember-cli-lightning-design-system
Import the design system
// in your app.scss ;
Supported Components
You can use this add-on without any of the supplied components, however if you would like to save yourself some time the following components are supported.
Avatar
{{slds-avatar}} {{#slds-avatar}} <img src="/assets/images/avatar1.jpg" alt="default avatar" />{{/slds-avatar}} {{#slds-avatar}} <img src="/assets/images/avatar1.jpg" alt="default avatar" />{{/slds-avatar}} {{#slds-avatar type='circle'}} <img src="/assets/images/avatar1.jpg" alt="default avatar" />{{/slds-avatar}} {{#slds-avatar size='large'}} <img src="/assets/images/avatar1.jpg" alt="default avatar" />{{/slds-avatar}} {{slds-avatar name='Bobby Jenkins'}}{{slds-avatar name='Terrorcorp'}}{{slds-avatar name='Apache Helicopter' sprite='action' icon='announcement'}}
Badge
{{slds-badge text='badger'}} {{#slds-badge}} Badger badger{{/slds-badge}}
Button
{{slds-button text='click me'}} {{#slds-button clicked=(action 'doYourThing')}} Click Me{{/slds-button}} {{slds-button text='click me' type='brand'}} {{slds-button text='click me' type='brand' icon='user'}}{{slds-button text='click me' type='brand' icon='down' iconPosition='right'}}
Button Group
{{#slds-button-group as |group|}} {{group.button text='Option1' clicked=(action 'buttonClicked' 'option1')}} {{group.button text='Option2' clicked=(action 'buttonClicked' 'option2')}} {{group.button text='Option3' disabled=true clicked=(action 'buttonClicked' 'option3')}}{{/slds-button-group}} {{#slds-button-group as |group|}} {{group.button text='Option1' clicked=(action 'buttonClicked' 'option1')}} {{group.button text='Option2' clicked=(action 'buttonClicked' 'option2')}} {{group.button text='Option3' disabled=true clicked=(action 'buttonClicked' 'option3')}} {{#group.menu as |menu|}} {{menu.item text="Overflow 1" clicked=(action 'buttonClicked' 'overflow1')}} {{menu.item text="Overflow 3" clicked=(action 'buttonClicked' 'overflow3')}} {{menu.item text="Overflow 2" clicked=(action 'buttonClicked' 'overflow2')}} {{/group.menu}}{{/slds-button-group}}
Button Icon
{{slds-button-icon}}{{slds-button-icon icon='user'}}{{slds-button-icon icon='user' type='error'}}{{slds-button-icon icon='warning' type='error'}}{{slds-button-icon icon='warning' type='error' disabled=true}}{{slds-button-icon icon='warning' type='error' size='large'}}{{slds-button-icon icon='like' border='outline' clicked=(action 'liked')}}
Menu
{{#slds-menu isOpen=true as |dropdown|}} {{dropdown.header text="Heading"}} {{dropdown.item text='Menu Item 1' clicked=(action 'itemSelected' 'item1')}} {{dropdown.item text='Menu Item 2' clicked=(action 'itemSelected' 'item1')}} {{dropdown.item text='Menu Item 3' clicked=(action 'itemSelected' 'item1')}} {{dropdown.separator}} {{#dropdown.item clicked=(action 'itemSelected' 'item1')}} Menu Item 4 {{/dropdown.item}}{{/slds-menu}}
Spinner
{{slds-spinner}}{{slds-spinner size='large'}}{{slds-spinner color='brand'}} <div class="slds-spinner_container"> {{slds-spinner}}</div>
Contributing
Publishing
npm version <version>
git push origin master --follow-tags
npm publish