Semantic-UI Message States
Last Updated :
22 Apr, 2022
Semantic UI offers many components for users to design their interface. One of them is “Message”. There are different states of messages. You can use them as per your requirement.
Semantic-UI Message States will let you hide or make the message visible to the user. We can create a UI to show the different states of messages.
Semantic UI Message States Class:
- hidden: You can hide a message from your UI. It is useful where you need to hide a message with certain conditions. Hide some messages as per your requirements.
- visible: You can set a message to visible to force itself to be shown as per the requirement. It can be very useful in scenarios where you want to highlight a notice every time your website is opened or show some message permanently.
Syntax:
<div class="ui hidden message">
....
</div>
Example 1: The following example demonstrates the hidden message class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Message states</p>
</b>
<p>No messages shown.</p>
<div class="ui hidden message">
<p>Please hide this message</p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Message States
Example 2: The following example demonstrates the visible message class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Message states</p>
</b>
<p>Messages shown .</p>
<div class="ui visible message">
<p>Please show this message . </p>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Message States
Reference: https://semantic-ui.com/collections/message.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...