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.
 
 
 

329 lines
9.1 KiB

---
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>