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.
122 lines
3.8 KiB
122 lines
3.8 KiB
---
|
|
layout : 'default'
|
|
css : 'reveal'
|
|
|
|
title : 'Reveal'
|
|
description : 'A reveal is an element that shows different content below it when hovered'
|
|
type : 'UI Module'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Types</a>
|
|
<a class="item">Variations</a>
|
|
<a class="item">States</a>
|
|
</div>
|
|
</div>
|
|
|
|
<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 red 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>
|