|
|
---layout : 'default'css : 'shape'
title : 'Shape'description : 'A shape is a three dimensional object displayed on a two dimensional plane'type : 'UI Module'---
<script src="/javascript/shape.js"></script><link rel="stylesheet" type="text/css" class="ui" href="/stylesheets/shape.css">
<%- @partial('header', { tabs: 'module' }) %>
<div class="main container">
<div class="ui tab" data-tab="definition">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">States</a> </div> </div>
<h2 class="ui dividing header">Types</h2>
<div class="example"> <h4 class="ui header">Shape</h4> <p>A standard shape</p>
<div class="ui warning icon message"> <i class="info letter icon"></i> <div class="content"> <div class="header">Using Shapes</div> <ul class="list"> <li>A shape must have defined width and heights for each side or else text flow may change during animation</li> <li>The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.</li> </ul> </div> </div>
<div class="code" data-type="html"> <div class="ui shape"> <div class="sides"> <div class="active side">This side starts visible.</div> <div class="side">This is yet another side</div> <div class="side">This is the last side</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Cube</h4> <p>A cube shape is formatted so that each side is the face of a cube</p> <div class="ui ignored info message">Content must be included inside <code>.content .center</code> to display centered on a cube's side</div> <div class="ui cube shape"> <div class="sides"> <div class="active side"> <div class="content"> <div class="center"> 1 </div> </div> </div> <div class="side"> <div class="content"> <div class="center"> 2 </div> </div> </div> <div class="side"> <div class="content"> <div class="center"> 3 </div> </div> </div> <div class="side"> <div class="content"> <div class="center"> 4 </div> </div> </div> <div class="side"> <div class="content"> <div class="center"> 5 </div> </div> </div> <div class="side"> <div class="content"> <div class="center"> 6 </div> </div> </div> </div> </div>
<div class="ui divider"></div> <div class="ui icon direction buttons"> <div class="ui button" data-animation="flip" title="Flip Left" data-direction="left"><i class="left long arrow icon"></i></div> <div class="ui button" data-animation="flip" title="Flip Up" data-direction="up"><i class="up long arrow icon"></i></div> <div class="ui icon button" data-animation="flip" title="Flip Down" data-direction="down"><i class="down long arrow icon"></i></div> <div class="ui icon button" data-animation="flip" title="Flip Right" data-direction="right"><i class="right long arrow icon"></i></div> </div> <div class="ui icon direction buttons"> <div class="ui button" title="Flip Over" data-animation="flip" data-direction="over"><i class="retweet icon"></i></div> <div class="ui button" title="Flip Back" data-animation="flip" data-direction="back"><i class="flipped retweet icon"></i></div> </div>
</div>
<div class="example"> <h4 class="ui header">Text</h4> <p>A text shape is formatted to allow for sides of text to be displayed</p>
<div class="ui text shape"> <div class="sides"> <div class="active ui header side">Did you know? This side starts visible.</div> <div class="ui header side">Help, its another side!</div> <div class="ui header side">This is the last side</div> </div> </div>
<div class="ui divider"></div> <div class="ui icon direction buttons"> <div class="ui button" data-animation="flip" title="Flip Left" data-direction="left"><i class="left long arrow icon"></i></div> <div class="ui button" data-animation="flip" title="Flip Up" data-direction="up"><i class="up long arrow icon"></i></div> <div class="ui icon button" data-animation="flip" title="Flip Down" data-direction="down"><i class="down long arrow icon"></i></div> <div class="ui icon button" data-animation="flip" title="Flip Right" data-direction="right"><i class="right long arrow icon"></i></div> </div> <div class="ui icon direction buttons"> <div class="ui button" title="Flip Over" data-animation="flip" data-direction="over"><i class="retweet icon"></i></div> <div class="ui button" title="Flip Back" data-animation="flip" data-direction="back"><i class="flipped retweet icon"></i></div> </div> </div> </div>
<div class="ui tab" data-tab="examples">
<div class="no example"> <h3 class="ui header">Shape Types</h3> <p>Shapes do not have to be regular or have its sides match up in length and width to animate correctly.</p>
<h3 class="ui header">Shape</h3> <div class="ui type buttons"> <div class="active ui button" data-shape="rectangle">Rectangle</div> <div class="ui button" data-shape="square">Square</div> <div class="ui button" data-shape="irregular">Irregular</div> </div> <div class="ui divider"></div> <div class="demo rectangle ui shape"> <div class="sides"> <div class="active jira side"> <img src="/images/shape/jira.png"> </div> <div class="heroku side"> <img src="/images/shape/heroku.png"> </div> <div class="quirky side"> <img src="/images/shape/quirky.png"> </div> </div> </div>
<div class="ui divider"></div> <div class="ui icon direction buttons"> <div class="ui button" data-animation="flip" title="Flip Left" data-direction="left"><i class="left long arrow icon"></i></div> <div class="ui button" data-animation="flip" title="Flip Up" data-direction="up"><i class="up long arrow icon"></i></div> <div class="ui icon button" data-animation="flip" title="Flip Down" data-direction="down"><i class="down long arrow icon"></i></div> <div class="ui icon button" data-animation="flip" title="Flip Right" data-direction="right"><i class="right long arrow icon"></i></div> </div> <div class="ui icon direction buttons"> <div class="ui button" title="Flip Over" data-animation="flip" data-direction="over"><i class="retweet icon"></i></div> <div class="ui button" title="Flip Back" data-animation="flip" data-direction="back"><i class="flipped retweet icon"></i></div> </div> </div>
<div class="ui clearing section divider"></div>
<h3 class="ui header">Shape with Content</h3> <p>Any type of element can be used as a side of a shape.</p> <div class="dog ui shape"> <div class="sides"> <div class="active side"> <div class="ui items"> <div class="item"> <div class="image"> <a class="ui like corner label"> <i class="like icon"></i> </a> <img src="/images/demo/highres2.jpg"> </div> <div class="content"> <div class="name">Cute Dog</div> <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> </div> </div> </div> </div> <div class="side"> <div class="ui items"> <div class="item"> <div class="image"> <a class="ui like corner label"> <i class="like icon"></i> </a> <img src="/images/demo/highres5.jpg"> </div> <div class="content"> <div class="name">Silly Dog</div> <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> </div> </div> </div> </div> <div class="side"> <div class="ui items"> <div class="item"> <div class="image"> <a class="ui like corner label"> <i class="like icon"></i> </a> <img src="/images/demo/highres4.jpg"> </div> <div class="content"> <div class="meta">5 days ago</div> <div class="name">Faithful Dog</div> <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> </div> </div> </div> </div> </div> </div>
<div class="dog ui shape"> <div class="sides"> <div class="active side"> <div class="ui items"> <div class="item"> <div class="image"> <a class="ui like corner label"> <i class="like icon"></i> </a> <img src="/images/demo/highres.jpg"> </div> <div class="content"> <div class="name">Cute Dog</div> <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> </div> </div> </div> </div> <div class="side"> <div class="ui items"> <div class="item"> <div class="image"> <a class="ui like corner label"> <i class="like icon"></i> </a> <img src="/images/demo/highres4.jpg"> </div> <div class="content"> <div class="name">Silly Dog</div> <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> </div> </div> </div> </div> <div class="side"> <div class="ui items"> <div class="item"> <div class="image"> <a class="ui like corner label"> <i class="like icon"></i> </a> <img src="/images/demo/highres6.jpg"> </div> <div class="content"> <div class="meta">5 days ago</div> <div class="name">Faithful Dog</div> <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> </div> </div> </div> </div> </div> </div> <div class="ui clearing divider"></div> <div class="code" data-demo="true"> $('.dog.shape') .eq(0) .shape('flip over') .end() .eq(1) .shape('flip back') ; </div> </div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Getting Started</h2>
<p>Initializing a shape</p> <div class="code"> $('.shape').shape(); </div>
<p>Transitions automatically assume next side is the next sibling (or first if last element)</p> <div class="code"> $('.shape').shape('flip up'); </div>
<p>To manually set the next side to appear use a selector or jQuery object</p> <div class="code"> $('.shape') .shape('set next side', '.second.side') .shape('flip up') ; </div>
<p>Any internal method can be invoked programmatically</p> <div class="code"> $('.shape').shape('repaint'); </div>
<h2 class="ui dividing header">Behavior</h2>
<p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p> <div class="code"> $('.your.element') .shape('behavior name', argumentOne, argumentTwo) ; </div>
<table class="ui definition sortable celled table segment"> <thead> <th>Behavior</th> <th>Description</th> </thead> <tbody> <tr> <td>flip up</td> <td>Flips the shape upward</td> </tr> <tr> <td>flip down</td> <td>Flips the shape downward</td> </tr> <tr> <td>flip right</td> <td>Flips the shape right</td> </tr> <tr> <td>flip left</td> <td>Flips the shape left</td> </tr> <tr> <td>flip over</td> <td>Flips the shape over clock-wise</td> </tr> <tr> <td>flip back</td> <td>Flips the shape over counter-clockwise</td> </tr> <tr> <td>set next side(selector)</td> <td>Set the next side to a specific selector</td> </tr> <tr> <td>is animating</td> <td>Returns whether shape is currently animating</td> </tr> <tr> <td>reset</td> <td>Removes all inline styles</td> </tr> <tr> <td>queue(animation)</td> <td>Queues an animationtill after current animation</td> </tr> <tr> <td>repaint</td> <td>Forces a reflow on element</td> </tr> <tr> <td>set default side</td> <td>Set the next side to next sibling to active element</td> </tr> <tr> <td>set stage size</td> <td>Sets shape to the content size of the next side</td> </tr> <tr> <td>refresh</td> <td>Refreshes the selector cache for element sides</td> </tr> <tr> <td>get transform down</td> <td>Returns translation for next side staged below</td> </tr> <tr> <td>get transform left</td> <td>Returns translation for next side staged left</td> </tr> <tr> <td>get transform right</td> <td>Returns translation for next side staged right</td> </tr> <tr> <td>get transform up</td> <td>Returns translation for next side staged up</td> </tr> <tr> <td>get transform down</td> <td>Returns translation for next side staged down</td> </tr> </tbody> </table>
</div>
<div class="ui tab" data-tab="settings">
<h3 class="ui header"> Shape Settings <div class="sub header">Shape settings modify the shape's behavior</div> </h3>
<table class="ui celled sortable definition table segment"> <thead> <th>Setting</th> <th class="four wide">Default</th> <th>Description</th> </thead> <tbody> <tr> <td>duration</td> <td>700ms</td> <td>Duration of side change animation</td> </tr> </tbody> </table>
<div class="ui horizontal section divider"><i class="icon setting"></i></div>
<h3 class="ui header"> Callbacks <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div> </h3>
<table class="ui celled sortable definition table segment"> <thead> <th class="four wide">Setting</th> <th>Context</th> <th>Description</th> </thead> <tbody> <tr> <td>beforeChange</td> <td>Next Side</td> <td>Is called before side change</td> </tr> <tr> <td>onChange</td> <td>Active Side</td> <td>Is called after visible side change</td> </tr> </tbody> </table>
<div class="ui horizontal section divider"><i class="icon setting"></i></div>
<h3 class="ui header"> DOM Settings <div class="sub header">DOM settings specify how this module should interface with the DOM</div> </h3>
<table class="ui celled sortable definition table segment"> <thead> <th>Setting</th> <th class="four wide">Default</th> <th>Description</th> </thead> <tbody> <tr> <td>namespace</td> <td>shape</td> <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> </tr> <tr> <td>selector</td> <td colspan="2"> <div class="code"> selector : { sides : '.sides', side : '.side' } </div> </td> </tr> <tr> <td>className</td> <td colspan="2"> <div class="code"> className : { animating : 'animating', hidden : 'hidden', loading : 'loading', active : 'active' } </div> </td> </tr> </tbody> </table>
<div class="ui horizontal section divider"><i class="icon setting"></i></div>
<h3 class="ui header"> Debug Settings <div class="sub header">Debug settings controls debug output to the console</div> </h3>
<table class="ui celled sortable definition table segment"> <thead> <th>Setting</th> <th class="four wide">Default</th> <th>Description</th> </thead> <tbody> <tr> <td>name</td> <td>Shape</td> <td>Name used in debug logs</td> </tr> <tr> <td>debug</td> <td>True</td> <td>Provides standard debug output to console</td> </tr> <tr> <td>performance</td> <td>True</td> <td>Provides standard debug output to console</td> </tr> <tr> <td>verbose</td> <td>True</td> <td>Provides ancillary debug output to console</td> </tr> <tr> <td>error</td> <td colspan="2"> <div class="code"> error: { side : 'You tried to switch to a side that does not exist.', method : 'The method you called is not defined' } </div> </td> </tr> </tbody> </table>
</div>
</div>
|
