Open In App

Semantic-UI Segment States

Improve
Improve
Like Article
Like
Save
Share
Report

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



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