|
|
---layout : 'default'css : 'steps'
element : 'step'elementType : 'element'
title : 'Step'description : 'A step shows the completion status of an activity in a series of activities'type : 'UI Element'
themes : ['default', 'Basic', 'GitHub']---
<%- @partial('header') %><link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/step.less" />
<div class="main container">
<h2 class="ui dividing header">Types</h2>
<div class="example"> <h4 class="ui header">Steps</h4> <p>A set of step</p> <div class="ui steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="disabled step"> <i class="info icon"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Ordered</h4> <p>A step can show a numerically ordered sequence of steps</p> <div class="ui ordered steps"> <div class="completed step"> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="active step"> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="disabled step"> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Vertical</h4> <p>Vertical steps display each step stacked vertically</p> <div class="ui vertical steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="disabled step"> <i class="info icon"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> </div>
<h2 class="ui dividing header">Content</h2> <div class="example"> <h4 class="ui header">Step</h4> <p>A step</p> <div class="ui steps"> <div class="step"> Shipping </div> </div> </div> <div class="example"> <h4 class="ui header">Descriptive Step</h4> <p>A step can optionally contain a title and description</p> <div class="ui steps"> <div class="step"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> </div> <div class="example"> <h4 class="ui header">Steps with Icons</h4> <p>A step can optionally contain an icon</p> <div class="ui steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> </div> </div> <div class="example"> <h4 class="ui header">Linkable Steps</h4> <p>A step can be clickable</p> <div class="ui steps"> <a class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </a> </div> </div> <div class="another example"> <div class="ui steps"> <div class="link step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> </div> </div>
<h2 class="ui dividing header">States</h2>
<div class="example"> <h4 class="ui header">Active</h4> <p>A step can be highlighted as active</p> <div class="ui steps"> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> </div> </div> <div class="example"> <h4 class="ui header">Completed</h4> <p>A step can show that a user has completed it</p> <div class="ui steps"> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> </div> </div> <div class="another example"> <div class="ui ordered steps"> <div class="completed step"> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Disabled</h4> <p>A step can show that it cannot be selected</p> <div class="ui steps"> <div class="disabled step"> Billing </div> </div> </div>
<div class="example"> <h4 class="ui header">Fluid Card</h4> <p>A fluid card takes up the width of its container</p> <div class="ui two column grid"> <div class="column"> <div class="ui fluid vertical steps"> <div class="completed step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> </div> </div> <div class="column"> <div class="ui fluid vertical steps"> <div class="completed step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> </div> </div> </div> </div></h2>
<div class="example"> <h4 class="ui header">Size</h4> <p>Steps can have different sizes</p>
<div class="ui small steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="disabled step"> <i class="info icon"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> </div> <div class="another example"> <div class="ui large steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> </div> </div> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Step</h4> <p>Steps can be divided evenly inside their parent</p> <div class="ui three steps"> <div class="step"> <i class="truck icon"></i> <div class="content"> <div class="title">Shipping</div> </div> </div> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> </div> </div> <div class="disabled step"> <i class="info icon"></i> <div class="content"> <div class="title">Confirm Order</div> </div> </div> </div> </div> <div class="another example"> <div class="ui two steps"> <div class="active step"> <i class="payment icon"></i> <div class="content"> <div class="title">Billing</div> </div> </div> <div class="disabled step"> <i class="info icon"></i> <div class="content"> <div class="title">Confirm Order</div> </div> </div> </div> </div>
</div>
|
