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.
<!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:
Example 2: This example also demonstrates some of the Semantic UI Statistics classes.
<!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:
Reference: https://semantic-ui.com/views/statistic.html