Last active
August 27, 2017 14:23
-
-
Save Finlandia/58ba6282ad54c1263eec3a141fe42183 to your computer and use it in GitHub Desktop.
aurelia SVG with custom element
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
<template> | |
<require from="./customelement"></require> | |
<require from="./withattr"></require> | |
customelement w/o compose: | |
<svg width="100%" height="150px"> | |
<customelement view-model.bind="customElementViewModel"/> | |
</svg> | |
svg w/o compose: | |
<svg width="100%" height="150px"> | |
<svg view-model.bind="customElementViewModel"/> | |
</svg> | |
customelement html containerless without @containerless: | |
<strong>Working!</strong> | |
<svg width="100%" height="150px"> | |
<customelement containerless as-element="compose" view-model.bind="customElementViewModel"/> | |
</svg> | |
customelement with @containerless: | |
<strong>Not Working!</strong> | |
<svg width="100%" height="150px"> | |
<withattr as-element="compose" view-model.bind="customElementViewModel"/> | |
</svg> | |
SVGElement svg: | |
<svg width="100%" height="150px"> | |
<svg as-element="compose" view-model.bind="customElementViewModel"/> | |
</svg> | |
SVGElement g: | |
<svg width="100%" height="150px"> | |
<g as-element="compose" view-model.bind="customElementViewModel"/> | |
</svg> | |
</template> |
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 {Customelement} from './customelement' | |
import {Withattr} from './withattr' | |
export class App { | |
customElementViewModel = new Customelement('blue') | |
withAttrViewModel = new Withattr('blue') | |
} | |
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
<template> | |
<svg> | |
<rect x="10" y="10" width="100" height="100" fill="${color}"/> | |
</svg> | |
</template> |
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 {containerless} from "aurelia-framework"; | |
//@containerless | |
export class Customelement { | |
constructor(color) { | |
this.color = color || 'lightgrey' | |
} | |
} | |
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
<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script> | |
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
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
/* todo: add styles */ |
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
<template> | |
<svg> | |
<rect x="10" y="10" width="100" height="100" fill="${color}"/> | |
</svg> | |
</template> |
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 {containerless} from "aurelia-framework"; | |
@containerless | |
export class Withattr { | |
constructor(color) { | |
this.color = color || 'lightgrey' | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment