Open In App

Semantic-UI Statistics Variations Size Variant

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic-UI Statistics offers us two types of statistics with the six types of variation like Horizontal, Coloured, Inverted, Evenly, Floating, and different sizes. In this article, we will learn about the Semantic-UI Statistics Variations Floated Variant.

Semantic-UI Statistics Variations Size Variant is used to define the size of the statistics element there are six different sizes that we can use on any statistics element.

Semantic-UI Statistics Variations Size Variant Classes: 

  • mini: This class is used to create mini statistics.
  • tiny: This class is used to create tiny statistics.
  • small: This class is used to create small statistics. 
  • normal: This class is used to create normal statistics.
  • large: This class is used to create large statistics.
  • huge: This class is used to create huge statistics.

Syntax: Add any one class of size for Size from the above different values to the container of Statistics as follows:

<div class="ui Size-Classes statistic">
    <div class="..">
        ...
    </div>
    <div class="..">
        ..
    </div>
</div>

Below example illustrate the Semantic-UI Statistics Variations Size Variant:

Example: In this example, we have six different buttons for different sizes which we can alternate using a javascript function to add and remove the classes for the Size Variation of Statistics.

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
              rel="stylesheet"/>
        <script src=
        </script>
        <script src=
        </script>
    </head>
    <body>
        <div class="ui container">
            <center>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
                <h2>
                    Semantic-UI Statistics Size Variation
                </h2>
                <div class="ui mini statistic" id="gfgstats">
                    <div class="value">
                        12,330
                    </div>
                    <div class="label">
                        Views
                    </div>
                </div>
                <div>
                    <button id="mini" 
                            class="active ui button"
                            onclick="changeSize('mini')">
                      mini
                    </button>
                    <button id="tiny" 
                            class=" ui button"
                            onclick="changeSize('tiny')">
                      tiny
                    </button>
                    <button id="small"
                            class=" ui button"
                            onclick="changeSize('small')">
                      small
                    </button>
                    <button id="normal"
                            class=" ui button"
                            onclick="changeSize('normal')">
                      Normal
                    </button>
                    <button id="large"
                            class=" ui button"
                            onclick="changeSize('large')">
                      large
                    </button>
                      
                    <button id="huge"
                            class="ui button"
                            onclick="changeSize('huge')">
                      huge
                    </button>
                </div>
            </center>
        </div>
        <script>
            function changeSize(size){
                var prevClass =$(".active").attr("id"); 
                $(".active").toggleClass("active");
                $("#"+size).toggleClass("active");
                $("#gfgstats").removeClass(prevClass);
                $("#gfgstats").addClass(size);
            }
        </script>
    </body>
</html>


Output:

Semantic-UI Statistics Variations Size Variant

Semantic-UI Statistics Variations Size Variant

Reference: https://semantic-ui.com/views/statistic.html#size



Last Updated : 02 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads