Semantic-UI Message
Semantic UI is an open-source framework that uses CSS and jQuery to build a great user interface. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A message shows information related to some content.
Example 1:
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /></head><body> <div class="ui container"> <div class="ui message"> <div class="header"> w3wiki </div> <p>A computer science Portal.</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script></body></html> |
Output: Example 2: List Message
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /></head><body> <div class="ui container"> <div class="ui message"> <div class="header"> New Courses </div> <ul> <li>Data Structure</li> <li>AngularJS</li> <li>NodeJS</li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script></body></html> |
Output: Example 3: This example creating a Dismissible Message. This requires the jQuery library to be imported.
Syntax:
$('.message .close').on('click', function() {
$(this).closest('.message').transition('fade');
});
Complete code:
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script></head><body> <div class="ui container"> <div class="ui message"> <i class="close icon"></i> <div class="header"> Thank you for Choosing w3wiki! </div> <p>Hope you have great learning here.</p> </div> </div> <script> $('.message .close').on('click', function () { $(this).closest('.message').transition('fade'); }); </script></body></html> |
Output:
Note:
- You can add class info, error, success, positive, and warning to change the look of the message. For example: To display the warning message: class=’ui warning message’.
- You can write any color or size class to change the color or size of class respectively.