Barre de progrès et mesure
Nous travaillons présentement à traduire ce contenu en français et à le reconcevoir.
Table of contents
Related
Design guide
Progress bar
Provide up-to-date feedback on the progress of a workflow or action with progress bars. The HTML5 progress
element can be used to display progress.
Value | Max | Result |
---|---|---|
22 | 100 | |
198 | 300 | |
500 | 500 | |
View code
HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Max</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>22</td>
<td>100</td>
<td><progress value="22" max="100"><span class="wb-inv">22%</span></progress></td>
</tr>
<tr>
<td>198</td>
<td>300</td>
<td><progress value="198" max="300"><span class="wb-inv">66%</span></progress></td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td><progress value="500" max="500"><span class="wb-inv">100%</span></progress></td>
</tr>
<tr>
<td colspan="2"><button class="btn btn-default" id="updateProgress">Update</button></td>
<td><progress id="updateTest" value="82" max="100"><span class="wb-inv">82%</span></progress></td>
</tr>
</tbody>
</table>
JavaScript (demo only)
(function( $, wb ) {
"use strict";
$( document ).on( "click vclick", "#updateProgress", function() {
var $elm = $( "#updateTest" ),
valuenow = parseInt( $elm.attr( "value" ), 10 ),
newValue = valuenow === parseInt( $elm.attr( "max" ), 10 ) ? 0 : valuenow + 1;
$elm
.attr( "value", newValue )
.find( "span" )
.text( newValue + "%" );
// Update the visuals
$elm.trigger( "wb-update.wb-progress" );
});
})( jQuery, wb );
Use when
(Info goes here)
Do not use when
(Info goes here)
Meter
The HTML5 meter
element displays a scalar measurement within a known range.
Description | Min | Low | Value | Max | High | Result |
---|---|---|---|---|---|---|
Normal (75%) | 20 | n/a | 65 | 80 | n/a | |
Too high (90%) | 0 | n/a | 90 | 100 | 80 | |
Too low (15%) | 100 | 120 | 115 | 200 | 180 | |
View code
HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Min</th>
<th scope="col">Low</th>
<th scope="col">Value</th>
<th scope="col">Max</th>
<th scope="col">High</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normal (75%)</td>
<td>20</td>
<td>n/a</td>
<td>65</td>
<td>80</td>
<td>n/a</td>
<td><meter min="20" value="65" max="80">75% (normal)</meter></td>
</tr>
<tr>
<td>Too high (90%)</td>
<td>0</td>
<td>n/a</td>
<td>90</td>
<td>100</td>
<td>80</td>
<td><meter min="0" value="90" max="100" high="80">90% (too high)</meter></td>
</tr>
<tr>
<td>Too low (15%)</td>
<td>100</td>
<td>120</td>
<td>115</td>
<td>200</td>
<td>180</td>
<td><meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter></td>
</tr>
<tr>
<td colspan="3"><button class="btn btn-default" id="decreaseMeter">Decrease</button></td>
<td colspan="3"><button class="btn btn-default" id="increaseMeter">Increase</button></td>
<td><meter id="updateTest" min="100" low="120" value="150" max="200" high="180"><span class="wb-inv">150</span></meter>
</tr>
</tbody>
</table>
JavaScript (demo only)
(function( $, wb ) {
"use strict";
$( document ).on( "click vclick", "#increaseMeter, #decreaseMeter", function( event ) {
var $elm = $( "#updateTest" ),
increase = event.currentTarget.id === "increaseMeter",
valuenow = parseInt( $elm.attr( "value" ), 10 ),
limit = parseInt( $elm.attr( increase ? "max" : "min" ), 10 ),
change = increase ? 1 : -1,
newValue = valuenow === limit ? 0 : valuenow + change;
$elm
.attr( "value", newValue )
.find( "span" )
.text( newValue );
// Update the visuals
$elm.trigger( "wb-update.wb-meter" );
});
})( jQuery, wb );
Use when
(Info goes here)
Do not use when
(Info goes here)
- Date de modification :