Skip to content
Related Articles

Related Articles

Semantic-UI Segment States

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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 provides us with a very easy way to style the web app instead of using CSS. To create a grouping of content that is related, we use segments. It offers segments in different variations, type groups, and states.

In this article, we will learn about the Semantic-UI Segment States along with implementation using the example code.

Semantic-UI Segment States: Semantic-UI provides us ways to create a grouping of related content in two states which are as follows:

1. Disabled: The segment which is used to group related content shows its content in the disabled state. We can observe the content in the segment in the lighter version than usual.

Syntax:

<div class="ui disabled segment">
  ...
</div>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Segment Disabled State</title>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div class="ui container">
            <h2 class="ui header green">Geeksforgeeks</h2>
            <strong>Semantic-UI Segment Disabled State</strong>
            <br /><br />
            <div class="ui disabled segment">
                 
<p>
                    As the placement season is back,
                    GeeksforGeeks is here to help you
                    crack the interview.
                </p>
 
            </div>
        </div>
    </center>
</body>
 
</html>


Output:

2.Loading: The segment which is used to group related content shows its content in the loading state . We can observe a loader and the content cannot be seen .

Syntax:

<div class="ui loading segment">
   ...
</div>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Segment Loading State</title>
    <link href=
        rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
        <div class="ui container">
            <h2 class="ui header green">Geeksforgeeks</h2>
            <strong>Semantic-UI Segment Loading State</strong>
            <br /><br />
            <div class="ui loading segment">
                 
<p>
                    As the placement season is back,
                    GeeksforGeeks is here to help you
                    crack the interview.
                </p>
 
            </div>
        </div>
    </center>
</body>
 
</html>


Output: We can observe that the content cannot be seen and a loader is shown instead.

Reference: https://semantic-ui.com/elements/segment.html#states


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!