|
|
<!DOCTYPE html>
<head>
<!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width" />
<!-- Site Properities --> <meta http-equiv="X-Powered-By" content="DocPad v6.32.0"/> <title>Shape | Semantic UI</title>
<meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." /> <meta name="keywords" content="html5, ui, library, framework, javascript" />
<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
<link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/icons.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/button.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/header.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/label.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/divider.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/block.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/elements/segment.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/grid.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/table.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/form.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/collections/menu.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/shape.css"> <link rel="stylesheet" type="text/css" class="ui" href="/ui/flat/modules/checkbox.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/shape.css">
<script src="/javascript/library/jquery.js"></script> <script src="/javascript/library/ace/ace.js"></script> <script src="/javascript/library/sidr.js"></script> <script src="/javascript/library/waypoints.js"></script>
<script src="/ui/flat/modules/behavior/state.js"></script> <script src="/ui/flat/modules/shape.js"></script> <script src="/ui/flat/modules/checkbox.js"></script>
<script src="/javascript/semantic.js"></script> <script src="/javascript/shape.js"></script>
</head><body id="example"> <div class="ui large vertical menu" id="menu"> <div class="header item">Table of Contents</div> <div class="item"><a href="/index.html"><b>Introduction</b></a></div> <div class="item"><a href="/download.html"><b>Download</b></a></div> <div class="item"> <a href="/element.html"><b>UI Elements</b></a> <div class="menu"> <a class="item" href="/elements/button.html">Button</a> <a class="item" href="/elements/label.html">Label</a> </div> </div> <div class="item"> <a href="/collection.html"><b>UI Collections</b></a> <div class="menu"> <a class="item" href="/collections/form.html">Form</a> <a class="item" href="/collections/grid.html">Grid</a> <a class="item" href="/collections/menu.html">Menu</a> <a class="item" href="/collections/table.html">Table</a> <a class="item" href="/collections/block.html">Text Block</a> </div> </div> <div class="item"> <a href="/module.html"><b>UI Modules</b></a> <div class="menu"> <a class="active item" href="/modules/shape.html">Shape</a> </div> </div> </div>
<div class="ui fixed transparent contrasting main menu"> <div class="container"> <div class="title item"> <b>UI Module:</b> Shape </div> <div class="icon previous link disabled item"> <i class="icon left-open"></i> </div> <div class="section dropdown item"> 1 of 1 <div class="menu"> <div class="active item"> <a href="/modules/shape.html">1. Shape</a> </div> </div> </div> <div class="icon next disabled link item"> <i class="icon right-open"></i> </div> <div class="right menu"> <a class="item" href="https://github.com/quirkyinc/semantic"> <i class="icon github"></i> </a> <div class="dropdown item"> <i class="icon tint"></i> Theme <div class="theme menu"> <div class="active item" data-theme="flat">Flat</div> <div class="item" data-theme="shaded">Shaded</div> <div class="item" data-theme="classic">Classic</div> </div> </div> </div> </div> </div> <div class="ui huge left attached vertical side buttons"> <div class="ui large blue sidebar button"><i class="icon th-list"></i> Menu</div> </div> <div class="segment"> <div class="container"> <h1>Shape</h1> <p>Shape is a plugin for 3D transitioning elements.</p> </div></div><div class="main container"> <div class="peek"> <div class="ui vertical pointing menu"> <div class="active item">Examples</div> <div class="item">Usage</div> <div class="item">Settings</div> </div> </div> <p>Shapes makes creating 3D tweens easier by taking care of the dirty business of calculating translations based on content sizing, which can be a confusing, frustrating task.</p> <p>The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.</p> <p>Shapes is written using the semantic module specification. Semantic is a standard pattern for writing Javascript modules which intends to make understanding new code less confusing, and debugging errors less frustrating, by making coding decisions less arbitrary and more semantic. <a href="module.html"> <p>Click here to read more</a> about Semantic spec, and the upcoming library.</p>
<h2>Examples</h2>
<h3>Standard</h3> <div class="demo square shape module"> <div class="shape"> <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>
<h3>Shape</h3> <div class="ui shape buttons"> <div class="active ui button" data-shape="square">Square</div> <div class="ui button" data-shape="rectangle">Rectangle</div> <div class="ui button" data-shape="irregular">Irregular</div> </div>
<h3>Flip</h3> <div class="ui direction buttons"> <div class="ui button" data-animation="flip" data-direction="left">Left</div> <div class="ui button" data-animation="flip" data-direction="right">Right</div> <div class="ui button" data-animation="flip" data-direction="up">Up</div> <div class="ui button" data-animation="flip" data-direction="down">Down</div> <div class="ui button" data-animation="flip" data-direction="over">Over</div> </div>
<h2>Usage</h2>
<p>The plugin must be initialized once before methods can be accessed</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.nextSide', '.second') .shape('flip.up');</div>
<p>Any internal method can be invoked programmatically</p> <div class="code">$('.shape') .shape('repaint');</div>
<h2>Settings</h2> <h3>Changing Settings</h3> <ol> <li>A settings object can be passed in when initializing the plugin <br> <div class="code">$('.foo') .shape({ moduleName: 'Godzilla' });</div> </li> <li>Default settings for the module can be overridden by modifying $.fn.shape.settings. <br><div class="code">$.fn.shape.settings.moduleName = 'Godzilla';</div> </li> <li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. <br><div class="code">$('.foo').shape('setting', 'moduleName', 'Godzilla');</div> </li> </ol> <h3>Reading Settings</h3> <p>Settings can also be read programmatically: <div class="code">$('.foo').shape('setting', 'moduleName');</div> <h3>Defaults</h3> <table class="ui settings table"> <thead> <th colspan="3">Shape Settings</th> </thead> <tbody> <tr> <td>useCSS</td> <td>True</td> <td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td> </tr> <tr> <td>duration</td> <td>1000ms</td> <td>Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.</td> </tr> <tr> <td>easing</td> <td>easeInOutQuad</td> <td>Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing</td> </tr> <tr> <td>selector</td> <td> <div class="code" data-type="css">{ shape : '.shape', side : '.side'}</div> </td> <td>Object containing selectors used by module.</td> </tr> <tr> <td>className</td> <td><div class="code">{ css : 'css', animating : 'animating', hidden : 'hidden', active : 'active'}</div> </td> <td>Object containing class names used by module.</td> </tr> </table> <table class="ui settings table"> <thead> <th colspan="3">Callbacks</th> </thead> <tr> <td>beforeChange</td> <td>None</td> <td>Callback before side is changed. This context is the new side.</td> </tr> <tr> <td>onChange</td> <td>None</td> <td>Callback after side is changed. This context is new side.</td> </tr> </table> <table class="ui settings table"> <thead> <th colspan="3">UI Module Settings</th> </thead> <tr> <td>moduleName</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>False</td> <td>Provides standard debug output to console</td> </tr> <tr> <td>verbose</td> <td>False</td> <td>Provides ancillary debug output to console</td> </tr> <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>errors</td> <td colspan="2"> <div class="code">{ 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></body>
</html></body>
</html>
|
