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
@import 'ember-cli-lightning-design-system/scss/index.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
• Badge
• Button
• Button Group
• Button Icon
• Menu
• Spinner

Avatar

• Component Documentation

{{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

• Component Documentation

{{slds-badge text='badger'}}

{{#slds-badge}}
  Badger badger
{{/slds-badge}}

Button

• Component Documentation

{{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

• Component Documentation

{{#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

• Component Documentation

{{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

• Component Documentation

{{#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

• Component Documentation

{{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