-
-
Save cristoferdomingues/0f6dab9534b0c68a65ddecc428096c19 to your computer and use it in GitHub Desktop.
Using Aphrodite in Angular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<main> | |
<h1 class="title">Hello from Angular-Aphrodite !</h1> | |
<!-- Images (and assets) are parsed and loaded from within the public directory --> | |
<img src="/img/logo.png"> | |
<div> | |
<span ng-class="app.css(app.styles.red)"> | |
This is red. | |
</span> | |
<span ng-class="app.css(app.styles.hover)"> | |
This turns red on hover. | |
</span> | |
<span ng-class="app.css(app.styles.small)"> | |
This turns red when the browser is less than 600px width. | |
</span> | |
<span ng-class="app.css(app.styles.red, app.styles.blue)"> | |
This is blue. | |
</span> | |
<span ng-class="app.css(app.styles.blue, app.styles.small)"> | |
This is blue and turns red when the browser is less than | |
600px width. | |
</span> | |
</div> | |
</main> | |
<footer> | |
<a ng-href="{{app.url}}">Angular using Aphrodite for Styles</a> | |
</footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import angular from 'angular'; | |
import { StyleSheet, css } from 'aphrodite'; | |
import '../style/app.css'; | |
const styles = StyleSheet.create({ | |
red: { | |
backgroundColor: 'red' | |
}, | |
blue: { | |
backgroundColor: 'blue' | |
}, | |
hover: { | |
':hover': { | |
backgroundColor: 'red' | |
} | |
}, | |
small: { | |
'@media (max-width: 600px)': { | |
backgroundColor: 'red', | |
} | |
} | |
}); | |
class AppCtrl { | |
constructor() { | |
this.url = 'https://github.com/Khan/aphrodite'; | |
} | |
get styles() { return styles; } | |
css(...styles) { | |
return css(...styles); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment