DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add svg demo

This commit is contained in:
kmdjs 2017-02-21 21:11:50 +08:00
parent b8c3b85bee
commit 2aff690cb6
6 changed files with 2250 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/hello/hello.js
View File

@ -26,6 +26,5 @@ class Hello extends Omi.Component {
}
}
Omi.makeHTML('Hello', Hello);
export default Hello;

2172
example/svg/bundler.js Normal file
View File

File diff suppressed because it is too large Load Diff

14
example/svg/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

21
example/svg/main.js Normal file
View File

@ -0,0 +1,21 @@
import Pie from './pie.js';
Omi.makeHTML('Pie', Pie);
class App extends Omi.Component {
constructor(data) {
super(data);
}
render() {
return `
<div>
<Pie data-percent="30" />
</div>
`;
}
}
Omi.render(new App(),"#container");

42
example/svg/pie.js Normal file
View File

@ -0,0 +1,42 @@
import Omi from '../../src/index.js';
class Pie extends Omi.Component {
constructor(data) {
data = Object.assign({
percent : 0
},data);
super(data);
}
render() {
//from http://web.jobbole.com/83148/
return `
<svg viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16" stroke-dasharray="${this.data.percent} 100"></circle>
</svg>
`;
}
style () {
return `
svg {
width: 100px;
height: 100px;
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
}
`;
}
}
export default Pie;

1
package.json
View File

@ -9,6 +9,7 @@
"nest": "webpack -w",
"curd": "webpack -w",
"textarea": "webpack -w",
"svg": "webpack -w",
"hello": "webpack -w",
"group_data": "webpack -w",
"loop": "webpack -w",