Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@freshcutdevelopment

freshcutdevelopment/app.html

Last active January 23, 2018 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save freshcutdevelopment/fe235a6dcdcdd9e90999c8845f35b135 to your computer and use it in GitHub Desktop.
Save freshcutdevelopment/fe235a6dcdcdd9e90999c8845f35b135 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist - Dynamic composition (step 1)
Raw
app.html
<template>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>${message}</h1>
<hr/>
<compose view="info-card.html"></compose>
</template>
Raw
app.js
import {bindable} from 'aurelia-framework';
export class App {
@bindable description = "In this example we create a form dynamically at run-time using a combination of dynamic-composition and the template repeater.";
constructor(){
this.message = 'Aurelia - Dynamic Composition';
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/config.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
info-card.html
<template>
<section class="card info">
<p>
The <code>&lt;compose&gt;</code> element can be used to dynamically determine which component to load at run-time. This allows you to build truely flexible UIs.
</p>
<p>
${description}
</p>
</section>
</template>
Raw
main.js
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
Raw
style.css
section{
margin-left:10px;
margin-right:10px;
}
.card.info{
border-left:1px solid #70519E;
padding:20px;
border-left-width: .25rem;
border-radius: .25rem;
}
.notification {
bottom: 5px;
position: fixed;
right: 5px;
background-color:#0d904f;
color:white;
padding:20px;
width:300px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment