Semantic-UI Reveal 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. In this article, we are going to learn about Reveal Disabled State. A reveal displays additional content in place of previous content when activated and it will not animate when hovered in a disabled state. The semantic UI Reveal States offers us Active and Disabled.
Semantic-UI Reveal States:
- Active: If it is used then an element can show its content without delay.
- Disabled: It is used to disabled reveal will not animate when hovered
Syntax:
<div class="ui Reveal-States move reveal">
...
</div>Below example illustrate the Semantic-UI Reveal States:
Example 1: In this example, we will use the Active state.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Reveal States</title> <link href= rel="stylesheet" /></head><body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Reveal States</strong> </center> <!-- Active class is used --> <strong>Reveal Active States:</strong> <div class="ui active move reveal"> <div class="visible content"> <img src= class="ui small image"> </div> <div class="hidden content"> <img src= class="ui small image"> </div> </div></body></html> |
Output:
Semantic-UI Reveal States
Example 2: In this example, we will use a disabled state.
HTML
<!DOCTYPE html><html><head> <title>Semantic-UI Reveal States</title> <link href= rel="stylesheet" /></head><body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Reveal States</strong> </center> <strong>Reveal States:</strong> <div class="ui move reveal"> <div class="visible content"> <img src= class="ui small image"> </div> <div class="hidden content"> <img src= class="ui small image"> </div> </div> <!--disabled class is used--> <strong>Reveal Disabled States:</strong> <div class="ui disabled move reveal"> <div class="visible content"> <img src= class="ui small image"> </div> <div class="hidden content"> <img src= class="ui small image"> </div> </div></body></html> |
Output:
Semantic-UI Reveal States
Reference: https://semantic-ui.com/elements/reveal.html
Please Login to comment...