You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

119 lines
3.7 KiB

---
layout : 'default'
css : 'reveal'
element : 'reveal'
elementType : 'element'
title : 'Reveal'
description : 'A reveal displays additional content in place of previous content when activated'
type : 'UI Element'
themes : ['Default']
---
<%- @partial('header') %>
<div class="main container">
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Reveal</h4>
<p>A standard reveal has no special formatting</p>
<div class="ui ignored warning message">
A reveal will take no action unless a type of reveal is specified.
</div>
<div class="ui circular reveal">
<img class="visible content" src="/images/demo/stickfigure.jpg">
<img class="hidden content" src="/images/demo/photo2.jpg">
</div>
</div>
<div class="example">
<h4 class="ui header">Fade</h4>
<p>An element can disappear to reveal content below</p>
<div class="ui fade reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<div class="example">
<h4 class="ui header">Move</h4>
<p>An element can move in a direction to reveal content</p>
<div class="ui move reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<div class="another example">
<div class="ui move right reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<div class="another example">
<div class="ui move up reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<div class="another example">
<div class="ui move down reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<div class="example">
<h4 class="ui header">Rotate</h4>
<p>An element can rotate to reveal content below</p>
<div class="ui circular rotate reveal image">
<img class="visible content" src="/images/demo/stickfigure.jpg">
<img class="hidden content" src="/images/demo/photo2.jpg">
</div>
</div>
<div class="another example">
<div class="ui circular rotate left reveal image">
<img class="visible content" src="/images/demo/stickfigure.jpg">
<img class="hidden content" src="/images/demo/photo2.jpg">
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Masked</h4>
<p>An element can mask its content so that an element does not escape its parent</p>
<div class="ui masked move reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<div class="example">
<h4 class="ui header">Instant</h4>
<p>An element can show its content without delay</p>
<div class="ui instant masked move reveal">
<img class="visible content" src="/images/demo/invention.jpg">
<img class="hidden content" src="/images/demo/title.png">
</div>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>A disabled reveal will not animate when hovered</p>
<div class="ui circular disabled move reveal">
<img class="visible content" src="/images/demo/stickfigure.jpg">
<img class="hidden content" src="/images/demo/photo2.jpg">
</div>
</div>
</div>