ember-cli-lightning-design-system
An ember-cli
addon for using the salesforce lightning design system
in your ember applications.
ember install ember-cli-lightning-design-system
// in your app.scss
@import ' ember-cli-lightning-design-system/scss/index.scss' ;
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.
{{ 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' }}
{{ slds-badge text =' badger' }}
{{ #slds-badge }}
Badger badger
{{ /slds-badge }}
{{ 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' }}
{{ #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 }}
{{ 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 }}
{{ slds-spinner }}
{{ slds-spinner size =' large' }}
{{ slds-spinner color =' brand' }}
<div class =" slds-spinner_container" >
{{ slds-spinner }}
</div >
npm version <version>
git push origin master --follow-tags
npm publish