Skip to content

Instantly share code, notes, and snippets.

@mattduffield

mattduffield/app.html

Forked from jwx/app.html
Last active February 6, 2017 19:42
Show Gist options
  • Save mattduffield/a12b0fdfcb7b12169fdd3b833e1f0c74 to your computer and use it in GitHub Desktop.
Save mattduffield/a12b0fdfcb7b12169fdd3b833e1f0c74 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Sample
Raw
app.html
<template>
<require from="styles.css"></require>
<require from="flexbox"></require>
<flexbox flex-class="full-height" flex-direction="column">
<flexbox flex="none">header</flexbox>
<flexbox flex="1">main content...</flexbox>
</flexbox>
</template>
Raw
app.js
export class App {
message = 'Hello World!';
}
Raw
flexbox.html
<template>
<div class="flex ${flexClass}"
css="flex-direction: ${flexDirection}; flex-wrap: ${flexWrap}; justify-content: ${justifyContent}; align-items: ${alignItems}; align-content: ${alignContent}; order: ${order}; flex: ${flex}; background: ${background}; color: ${color}; width: ${width};">
<slot></slot>
</div>
</template>
Raw
flexbox.js
import {customElement, bindable} from 'aurelia-framework';
@customElement('flexbox')
@bindable({
name:'flexClass',
defaultValue: ''
})
@bindable({
name:'display',
defaultValue: 'flex'
})
@bindable({
name: 'flexDirection',
defaultValue: 'row'
})
@bindable({
name: 'flexWrap',
defaultValue: 'nowrap'
})
@bindable({
name:'justifyContent',
defaultValue: 'flex-start'
})
@bindable({
name:'alignItems',
defaultValue: 'stretch'
})
@bindable({
name:'alignContent',
defaultValue: 'stretch'
})
@bindable({
name:'order',
defaultValue: ''
})
@bindable({
name:'flex',
defaultValue: '0 1 auto'
})
@bindable({
name:'height',
defaultValue: ''
})
@bindable({
name:'width',
defaultValue: ''
})
@bindable({
name:'background',
defaultValue: ''
})
@bindable({
name:'color',
defaultValue: 'black'
})
export class Flexbox {
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
styles.css
html, body { height: 100%; }
.full-height { height: 100%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment