https://github.com/jonnii/ember-cli-lightning-design-system
Ember add-on for the lightning design system
https://github.com/jonnii/ember-cli-lightning-design-system
ember ember-addon ember-cli lightning-design-system
Last synced: 11 months ago
JSON representation
Ember add-on for the lightning design system
- Host: GitHub
- URL: https://github.com/jonnii/ember-cli-lightning-design-system
- Owner: jonnii
- License: mit
- Created: 2017-04-01T01:10:37.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T16:40:32.000Z (over 3 years ago)
- Last Synced: 2024-04-14T19:53:50.006Z (about 2 years ago)
- Topics: ember, ember-addon, ember-cli, lightning-design-system
- Language: HTML
- Homepage:
- Size: 5.88 MB
- Stars: 5
- Watchers: 3
- Forks: 3
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-cli-lightning-design-system
[](https://travis-ci.org/jonnii/ember-cli-lightning-design-system) [](https://emberobserver.com/addons/ember-cli-lightning-design-system)
An `ember-cli` addon for using the [salesforce lightning design system](https://www.lightningdesignsystem.com)
in your ember applications.
## Installation
#### Install the add-on
```
ember install ember-cli-lightning-design-system
```
#### Import the design system
```scss
// 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](#avatar)
* [Badge](#badge)
* [Button](#button)
* [Button Group](#button-group)
* [Button Icon](#button-icon)
* [Menu](#menu)
* [Spinner](#spinner)
#### Avatar
- [Component Documentation](https://www.lightningdesignsystem.com/components/images/)
```hbs
{{slds-avatar}}
{{#slds-avatar}}
{{/slds-avatar}}
{{#slds-avatar}}
{{/slds-avatar}}
{{#slds-avatar type='circle'}}
{{/slds-avatar}}
{{#slds-avatar size='large'}}
{{/slds-avatar}}
{{slds-avatar name='Bobby Jenkins'}}
{{slds-avatar name='Terrorcorp'}}
{{slds-avatar name='Apache Helicopter' sprite='action' icon='announcement'}}
```
#### Badge
- [Component Documentation](https://www.lightningdesignsystem.com/components/badges)
```hbs
{{slds-badge text='badger'}}
{{#slds-badge}}
Badger badger
{{/slds-badge}}
```
#### Button
- [Component Documentation](https://www.lightningdesignsystem.com/components/buttons)
```hbs
{{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](https://www.lightningdesignsystem.com/components/button-groups)
```hbs
{{#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](https://www.lightningdesignsystem.com/components/button-icons)
```hbs
{{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](https://www.lightningdesignsystem.com/components/menus)
```hbs
{{#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](https://www.lightningdesignsystem.com/components/spinners)
```hbs
{{slds-spinner}}
{{slds-spinner size='large'}}
{{slds-spinner color='brand'}}
{{slds-spinner}}
```
## Contributing
### Publishing
```
npm version
git push origin master --follow-tags
npm publish
```