firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show the last sale price in the stocks app

Browse Source 
TBR=abarth@chromium.org

Review URL: https://codereview.chromium.org/953593002
This commit is contained in:
Eric Seidel 2015-02-23 14:51:22 -08:00
parent 457c78f742
commit 377cd1bea7
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
examples/stocks/stock.sky
View File

@ -5,7 +5,7 @@
--> -->
<import src="/sky/framework/sky-element.sky" /> <import src="/sky/framework/sky-element.sky" />
<sky-element attributes="ticker:string"> <sky-element>
<template> <template>
<style> <style>
:host { :host {
@ -18,10 +18,13 @@
padding: 10px; padding: 10px;
flex-grow: 1; flex-grow: 1;
} }
#last-sale {
padding: 10px;
}
#change { #change {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
min-width: 60px; min-width: 70px;
text-align: right; text-align: right;
} }
.positive { .positive {
@ -32,6 +35,7 @@
} }
</style> </style>
<div id="ticker" /> <div id="ticker" />
<div id="last-sale" />
<div id="change" /> <div id="change" />
</template> </template>
<script> <script>
@ -42,11 +46,16 @@ class Stock extends SkyElement {
var model; // model.Stock var model; // model.Stock
void shadowRootReady() { void shadowRootReady() {
Element ticker = shadowRoot.getElementById('ticker'); shadowRoot.getElementById('ticker').textContent = model.symbol;
ticker.textContent = model.symbol;
Element lastSale = shadowRoot.getElementById('last-sale');
lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}";
Element change = shadowRoot.getElementById('change'); Element change = shadowRoot.getElementById('change');
change.textContent = "${model.percentChange.toStringAsFixed(2)}%"; String changeString = "${model.percentChange.toStringAsFixed(2)}%";
if (model.percentChange > 0)
changeString = "+" + changeString;
change.textContent = changeString;
change.classList.add((model.percentChange < 0) ? 'negative' : 'positive'); change.classList.add((model.percentChange < 0) ? 'negative' : 'positive');
} }
} }