Semantic-UI Segment Disabled State

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 the Segments component. Segments are used to display different sections of relatable content. Depending on the requirements of the usage of segments there are different states of it. One of them is the disabled state.

Semantic UI Segment Disabled State: The user might need to show a disabled segment by default. The user might need to display some segments in UI whose values are not to be changed or the person does not have the access to interact with it. In that case, a disabled state comes in handy.

Semantic UI Segment Disabled State Class:

• disabled: This class is used to specify the disabled state of segments.

Syntax:

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

These examples demonstrate a segment or group of segments in a disabled state by using the disabled class.

Example 1 :

Output:

Semantic-UI Segment Disabled State

Example 2:

Output :

Semantic-UI Segment Disabled State

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