Semantic-UI Reveal States
Last Updated :
22 Apr, 2022
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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...