6 changed files with 415 additions and 23 deletions
Split View
Diff Options
-
2server/documents/elements/segment.html.eco
-
18server/documents/index.html.eco
-
203server/documents/views/statistic.html.eco
-
BINserver/files/images/demo/transparent-dog.png
-
168src/definitions/views/statistic.less
-
47src/themes/packages/default/views/statistic.variables
@ -0,0 +1,203 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'stat' |
|||
|
|||
title : 'Statistic' |
|||
description : 'A statistic is used to present a single value measurement of an attribute' |
|||
type : 'UI View' |
|||
|
|||
element : 'statistic' |
|||
elementType : 'view' |
|||
|
|||
themes : ['Default'] |
|||
--- |
|||
|
|||
<%- @partial('header') %> |
|||
|
|||
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/statistic.less" /> |
|||
<script src="/javascript/card.js"></script> |
|||
|
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">Content</a> |
|||
<a class="card">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Statistic</h4> |
|||
<p>A statistic</p> |
|||
<div class="ui statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Statistic</h4> |
|||
<p>A group of statistics</p> |
|||
<div class="ui statistics"> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
31 |
|||
</div> |
|||
<div class="label"> |
|||
Famous Dogs in Films |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
US Presidents Owned Dogs |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Content</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Value</h4> |
|||
<p>A statistic can contain a numeric, icon, image, or text value</p> |
|||
<div class="ui statistics"> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="text value"> |
|||
Two Hundred |
|||
</div> |
|||
<div class="label"> |
|||
Dogs I've Owned |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
<i class="smile icon"></i> |
|||
</div> |
|||
<div class="label"> |
|||
Current Mood |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
<img src="/images/demo/transparent-dog.png"> |
|||
11 |
|||
</div> |
|||
<div class="label"> |
|||
Puppies |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Label</h4> |
|||
<p>A statistic can contain a label to help provide context for the presented value</p> |
|||
<div class="ui statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Horizontal Statistic</h4> |
|||
<p>A statistic can present its measurement horizontally</p> |
|||
<div class="ui horizontal statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui horizontal statistics"> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
31 |
|||
</div> |
|||
<div class="label"> |
|||
Famous Dogs in Films |
|||
</div> |
|||
</div> |
|||
<div class="statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
US Presidents Owned Dogs |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A statistic can be formatted to fit on a dark background</p> |
|||
<div class="ui inverted segment"> |
|||
<div class="ui inverted statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Floated</h4> |
|||
<p>An statistic can sit to the left or right of other content</p> |
|||
<div class="ui statistic"> |
|||
<div class="value"> |
|||
22 |
|||
</div> |
|||
<div class="label"> |
|||
Breeds of Dog |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
Write
Preview
Loading…
Cancel
Save