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.
322 lines
9.7 KiB
322 lines
9.7 KiB
---
|
|
layout : 'default'
|
|
css : 'shape'
|
|
|
|
title : 'Shape'
|
|
description : 'A shape is a three dimensional object displayed on a two dimensional plane'
|
|
type : 'UI Module'
|
|
---
|
|
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/shape.css">
|
|
<script src="/build/uncompressed/modules/shape.js"></script>
|
|
<script src="/javascript/shape.js"></script>
|
|
|
|
<%- @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">Examples</a>
|
|
<a class="item">Getting Started</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="ui info message">The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.</div>
|
|
|
|
<div class="shown example">
|
|
<h4 class="ui header">Shape</h4>
|
|
<p>A shape has multiple sides of arbitrary content. Only one is visible</p>
|
|
|
|
<div class="ui shape">
|
|
<div class="sides">
|
|
<div class="active side">This side is visible.</div>
|
|
<div class="side">This side is not visible.</div>
|
|
<div class="side">This side is not visible.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Examples</h2>
|
|
|
|
|
|
<h3 class="ui header">Interactive</h3>
|
|
<div class="demo square 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>
|
|
<h3 class="ui header">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 class="ui header">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 class="ui button" data-animation="flip" data-direction="back">Back</div>
|
|
</div>
|
|
|
|
<div class="ui clearing section divider"></div>
|
|
|
|
<h3 class="ui header">Shape with Content</h3>
|
|
<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 left')
|
|
;
|
|
</div>
|
|
|
|
<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')
|
|
.shape('flip up')
|
|
;</div>
|
|
|
|
<p>Any internal method can be invoked programmatically</p>
|
|
<div class="code">$('.shape')
|
|
.shape('repaint')
|
|
;</div>
|
|
|
|
<h3 class="ui header">Defaults</h3>
|
|
<table class="ui celled definition table">
|
|
<thead>
|
|
<th colspan="3">Shape Settings</th>
|
|
</thead>
|
|
<tbody>
|
|
<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 celled definition 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 celled definition table">
|
|
<thead>
|
|
<th colspan="3">UI Module Settings</th>
|
|
</thead>
|
|
<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>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>
|