Skip to content

Instantly share code, notes, and snippets.

@green3g

green3g/index.html

Forked from bigopon/index.html
Last active October 2, 2020 01:39
Show Gist options
  • Save green3g/895e4e9d452e137e00eea80d26f0fa97 to your computer and use it in GitHub Desktop.
Save green3g/895e4e9d452e137e00eea80d26f0fa97 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia -ux example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.js.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
Raw
package.json
{
"dependencies": {
"aurelia-bootstrapper": "^2.3.3",
"@aurelia-ux/components": "0.18.1"
}
}
Raw
src\app.html
<template>
<!-- Try to create a css/scss/sass/less file then require it here -->
<h1>${message}</h1>
<ux-button>Hello</ux-button>
<ux-input value.bind="message"></ux-input>
<ux-card>
<ux-list type="two-line">
<ux-list-item>
<div class="list-content">
<span>project.project_name</span>
<div class="secondary-content">project.location</div>
</div>
</ux-list-item>
</ux-list>
</ux-card>
</template>
Raw
src\app.js
export class App {
message = 'Hello Aurelia!';
}
Raw
src\main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('@aurelia-ux/core')
.plugin('@aurelia-ux/components')
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment