Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
248 lines (246 sloc) 7.95 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../button/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="../cover/style.css">
<link rel="stylesheet" href="../grid/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content-lab {
margin-left: 50px
}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body class="content-lab">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Progress Circle</h2>
<p>
Progress circle is a simple component widely used to inform metrics about a given.
You can create it either by the HTML element or programmed via javascript.
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>progressbarjs</code>.
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<p>
To use this component you need install with the command:
</p>
<pre>mobileui install progress-circle</pre>
<table class="tableDoc">
<tbody>
<tr>
<th>Atribute/property</th>
<th>Description</th>
</tr>
<tr>
<td><code>value</code></td>
<td>Initial value for component</td>
</tr>
<tr>
<td><code>title</code></td>
<td>Title for component</td>
</tr>
<tr>
<td><code>subTitle</code></td>
<td>Subtitle for component</td>
</tr>
<tr>
<td><code>text</code></td>
<td>Info of the value, example: 65%, the simbol (%) is the text</td>
</tr>
<tr>
<td><code>color</code></td>
<td>Color of external line</td>
</tr>
<tr>
<td><code>textColor</code></td>
<td>Color of text. Use name <a href="#colors">theme colors</a></td>
</tr>
<tr>
<td><code>textWeight</code></td>
<td>Weight of text (bold, 300, normal, 800, etc)</td>
</tr>
<tr>
<td><code>titleWeight</code></td>
<td>Weight of title (bold, 300, normal, 800, etc)</td>
</tr>
<tr>
<td><code>subTitleWeight</code></td>
<td>Weight of subtitle (bold, 300, normal, 800, etc)</td>
</tr>
<tr>
<td><code>titleColor</code></td>
<td>Color of title. Use name <a href="#colors">theme colors</a></td>
</tr>
<tr>
<td><code>subTitleColor</code></td>
<td>Color of subtitle. Use name <a href="#colors">theme colors</a></td>
</tr>
<tr>
<td><code>width</code></td>
<td>Size canvas size area</td>
</tr>
<tr>
<td><code>height</code></td>
<td>Size canvas size area</td>
</tr>
<tr>
<td><code>trailColor</code></td>
<td>Color of trail line. Use name <a href="#colors">theme colors</a></td>
</tr>
<tr>
<td><code>strokeWidth</code></td>
<td>Size stroke line.</td>
</tr>
<tr>
<td><code>trailWidth</code></td>
<td>Size stroke line.</td>
</tr>
<tr>
<td><code>textSize</code></td>
<td>Size font text. Example textSize="25px"</td>
</tr>
<tr>
<td><code>titleSize</code></td>
<td>Size font text. Example textSize="25px"</td>
</tr>
<tr>
<td><code>subTitleSize</code></td>
<td>Size font text. Example textSize="25px"</td>
</tr>
<tr>
<td><code>fill</code></td>
<td>...</td>
</tr>
<tr>
<td><code>padding</code></td>
<td>...</td>
</tr>
<tr>
<td><code>durationAnimate</code></td>
<td>...</td>
</tr>
</tbody>
</table>
<textarea class="bind-code" mode="text/html">
<div class="padding black-opacity-90 align-center">
<div id="progressProfile" class="progress-circle"
title="PROFILE"
color="blue"
textColor="white"
padding="20px"
width="200px"
height="200px"
trailColor="white-opacity-10"
textSize="40px"
titleSize="16px"
textWeight="300"
value="65"
text="%"
strokeWidth="4"
trailWidth="2">
</div>
<div class="row">
<div class="col">
<div id="progressSteps" class="progress-circle"
color="red"
textColor="red-100"
subTitle="steps"
value="44"
text="%"
height="100px"
padding="10px"
strokeWidth="4"
trailWidth="4"
trailColor="white-opacity-10">
</div>
</div>
<div class="col">
<div id="progressRunning" class="progress-circle"
color="purple"
textColor="purple-100"
subTitle="running"
value="23"
text="km"
height="100px"
padding="10px"
strokeWidth="4"
trailWidth="4"
trailColor="white-opacity-10">
</div>
</div>
<div class="col">
<div id="progressTasks" class="progress-circle"
color="green"
textColor="green-100"
subTitle="tasks"
value="79"
text="/100"
height="100px"
padding="10px"
strokeWidth="4"
trailWidth="4"
trailColor="white-opacity-10">
</div>
</div>
</div>
<button class="margin opacity-40 border-white text-white radius" onclick="updateValuesProgressCircle()">UPDATE VALUES</button>
<button class="margin opacity-40 border-white text-white radius" onclick="ProgressCircle.rebind()">REBIND VALUES</button>
</div>
<script type="text/javascript">
function updateValuesProgressCircle(){
//random values
document.getElementById('progressProfile').progressCircle.update(Math.floor(Math.random() * 100) + 1);
document.getElementById('progressSteps').progressCircle.update(Math.floor(Math.random() * 100) + 1);
document.getElementById('progressRunning').progressCircle.update(Math.floor(Math.random() * 100) + 1);
document.getElementById('progressTasks').progressCircle.update(Math.floor(Math.random() * 100) + 1);
}
</script></textarea>
<p>
You can create a progress circle by JavaScript:
</p>
<textarea class="bind-code" mode="text/html" height-preview="400px">
<div class="padding blue-800 align-center">
<button class="margin opacity-40 border-white text-white radius" onclick="showProgressUser()">CREATE PROGRESS CIRCLE</button>
<div id="progressUserKM"></div>
</div>
<script type="text/javascript">
function showProgressUser(){
var config = {
value: 55,
subTitle: 'km/h',
durationAnimate: 3000,
padding: '3px',
color: 'white',
trailColor: 'black-opacity-10',
textSize: '50px',
textColor: 'white',
width:'200px',
strokeWidth: '2',
trailWidth:'8'
}
ProgressCircle.create(document.getElementById('progressUserKM'), config);
}
</script></textarea>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
<script type="text/javascript" src="../mobileui-colors/script.js"></script>
<script type="text/javascript" src="../progressbarjs/script.js"></script>
</body>
</html>