Semantic-UI Dropdown States
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 dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3 types of content Header, divider, and icon. In this article, we will learn about all the states of the dropdown.
Semantic-UI Dropdown States:
- Loading: This is used to create a dropdown that shows its data is currently loading.
- Error: This is used to specify the error in the dropdown.
- Active: This is used to create an active dropdown that is having its menu open.
- Disabled: This is used to specify that the dropdown is not accessible by the user.
Syntax:
<div class="ui Dropdown-States dropdown.">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
.......
</div>
</div>Example 1: Below example demonstrates the use of Semantic-UI Dropdown loading States Class.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Dropdown Loading State</title> <link rel="stylesheet" href= <script src= </script> <script src= </script></head><body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Loading State</h3> <div class="ui loading dropdown"> Company <i class="dropdown icon"></i> <div class="menu"> <div class="item">GFG</div> <div class="item">gfg</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center></body></html> |
Output:
Semantic-UI Dropdown States
Example 2: Below example demonstrates the use of Semantic-UI Dropdown error States Class.
HTML
<!DOCTYPE html><html><head> <link href= rel="stylesheet"/> <script src= </script> <script src= </script></head><body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Dropdown error State</p> </b> <hr><br/> <strong>Dropdown with error option:</strong> <br/><br/> <div class="ui error dropdown"> Error Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Error option 1</div> <div class="item">Error option 2</div> <div class="item">Error option 3</div> <div class="item">Error option 4</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script></body></html> |
Output:
Semantic-UI Dropdown States
Example 3: Below example demonstrates the use of Semantic-UI Dropdown active States Class.
HTML
<!DOCTYPE html><html> <head> <title>Semantic-UI Dropdown Active State</title> <link href= rel="stylesheet"/> <script src= </script> <script src= </script></head><body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Active State</h3> <div class="ui simple active dropdown"> Options <i class="dropdown icon"></i> <div class="menu"> <div class="item">Option 1</div> <div class="item">Option 2</div> <div class="item">Option 3</div> <div class="item">Option 4</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center></body></html> |
Output:
Semantic-UI Dropdown States
Example 4: Below example demonstrates the use of Semantic-UI Dropdown disabled States Class.
HTML
<!DOCTYPE html><html> <head> <title>Semantic-UI Dropdown Disabled State</title> <link href= rel="stylesheet"/> <script src= </script> <script src= </script></head><body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Disabled State</h3> <div class="ui disabled dropdown"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Item-A</div> <div class="item">Item-B</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center></body></html> |
Output:
Semantic-UI Dropdown States
Reference: https://semantic-ui.com/modules/dropdown.html
Please Login to comment...