Semantic-UI Statistics Variations
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “statistics”. Statistics are used for various purposes on a web page. It is used to magnify particular data for your website. The user might need to show different statistics in different variations according to his requirements. To depict a statistics data significance, its variation can vary.
Semantic UI Statistics Variations:
- Horizontal: This variation is used to display statistics in the horizontal dimension.
- Colored: This variation is used to display statistics in different colors like red, orange, and so on.
- Inverted: This variation is used to make the statistics inverted(color-wise).
- Evenly divided: This variation is used to decide how many statistics you want to show in a row.
- Floated: This variation is used to make statistics float left or right of the content.
- Size: This variation is used to make statistics vary in size. The classes used are mini, tiny, small statistics.
Syntax:
<div class="ui Statistics-Variation">
<div class="ui ..">
.....
</div>
</div>
Example 1: This example demonstrates some of the Semantic-UI Statistics classes. Refer to the output for better understanding.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Statistics Variations</title> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Statistics Variations</p> </b> <hr><br /> <span>Horizontal Statistic : </span> <div class="ui horizontal statistic" style="margin-right:120px"> <div class="value"> 1 </div> <div class="label"> Label 1 </div> </div> <span>Colored Statistic : </span> <div class="ui green statistic"> <div class="value"> 2 </div> <div class="label"> Label 2 </div> </div> <div class="ui red statistic"> <div class="value"> 3 </div> <div class="label"> Label 3 </div> </div> <div class="ui orange statistic"> <div class="value"> 4 </div> <div class="label"> Label 4 </div> </div> <br /> <div class="ui inverted segment"> <p>Inverted Statistic : </p> <div class="ui inverted statistic"> <div class="value"> 5 </div> <div class="label"> Label 5 </div> </div> <div class="ui green inverted statistic"> <div class="value"> 6 </div> <div class="label"> Label 6 </div> </div> <div class="ui inverted statistic"> <div class="value"> 7 </div> <div class="label"> Label 7 </div> </div> </div> <br /> <p>Evenly Divided Statistic : </p> <div class="ui four statistics"> <div class="statistic"> <div class="value"> 8 </div> <div class="label"> Label 8 </div> </div> <div class="statistic"> <div class="value"> 9 </div> <div class="label"> Label 9 </div> </div> <div class="statistic"> <div class="value"> 10 </div> <div class="label"> Label 10 </div> </div> <div class="statistic"> <div class="value"> 11 </div> <div class="label"> Label 11 </div> </div> </div> <br /> <span>Floated Statistic : </span> <div class="ui segment"> <div class="ui left floated statistic"> <div class="value"> 12 </div> <div class="label"> Floated </div> </div> <p>As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews.You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <br /> <span>Size Statistic : </span> <div class="ui mini statistic"> <div class="value"> 13 </div> <div class="label"> Mini </div> </div> <div class="ui small statistic"> <div class="value"> 14 </div> <div class="label"> Small </div> </div> <div class="ui large statistic"> <div class="value"> 15 </div> <div class="label"> Large </div> </div> </div> </body> </html> |
Output:
Semantic-UI Statistics Variations
Example 2: This example also demonstrates some of the Semantic UI Statistics classes.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Statistics Variations</p> </b> <hr><br /> <span>Horizontal Statistic : </span> <div class="ui horizontal statistic" style="margin-right:120px"> <div class="value"> 1 </div> <div class="label"> One </div> </div> <span>Colored Statistic : </span> <div class="ui teal statistic"> <div class="value"> 2 </div> <div class="label"> Teal </div> </div> <div class="ui blue statistic"> <div class="value"> 3 </div> <div class="label"> Blue </div> </div> <div class="ui violet statistic"> <div class="value"> 4 </div> <div class="label"> Violet </div> </div> <br /> <div class="ui inverted segment"> <p>Inverted Statistic : </p> <div class="ui green inverted statistic"> <div class="value"> 5 </div> <div class="label"> Five </div> </div> <div class="ui white inverted statistic"> <div class="value"> 6 </div> <div class="label"> Six </div> </div> <div class="ui green inverted statistic"> <div class="value"> 7 </div> <div class="label"> Seven </div> </div> </div> <br /> <p>Evenly Divided Statistic : </p> <div class="ui two statistics"> <div class="statistic"> <div class="value"> 8 </div> <div class="label"> Eight </div> </div> <div class="statistic"> <div class="value"> 9 </div> <div class="label"> Nine </div> </div> <div class="statistic"> <div class="value"> 10 </div> <div class="label"> Ten </div> </div> <div class="statistic"> <div class="value"> 11 </div> <div class="label"> Eleven </div> </div> </div> <br /> <span>Floated Statistic : </span> <div class="ui segment" style="padding-bottom:20px"> <div class="ui right floated statistic"> <div class="value"> 12 </div> <div class="label"> Floated </div> </div> <p>As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews.You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <br /> <span>Size Statistic : </span> <div class="ui large statistic"> <div class="value"> 13 </div> <div class="label"> large </div> </div> <div class="ui huge statistic"> <div class="value"> 14 </div> <div class="label"> Huge </div> </div> </div> </body> </html> |
Output:
Semantic-UI Statistics Variations
Reference: https://semantic-ui.com/views/statistic.html
Please Login to comment...