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
Last Updated :
20 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...