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.
133 lines
2.8 KiB
133 lines
2.8 KiB
---
|
|
layout : 'default'
|
|
css : 'steps'
|
|
title : 'Step'
|
|
description : 'Steps show the current activity in a series of consecutive activities.'
|
|
type : 'UI Element'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Element</a>
|
|
<a class="item">Groups</a>
|
|
<a class="item">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Standard</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Step</h4>
|
|
<p>A step</p>
|
|
<div class="ui steps">
|
|
<div class="ui step">
|
|
Shipping
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Groups</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Steps</h4>
|
|
<p>A set of step</p>
|
|
<div class="ui steps">
|
|
<div class="ui step">
|
|
Shipping
|
|
</div>
|
|
<div class="ui active step">
|
|
Billing
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Confirm Order
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Complete
|
|
</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="ui active step">
|
|
Billing
|
|
</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="ui disabled step">
|
|
Billing
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>Steps can have different sizes</p>
|
|
|
|
<div class="ui small steps">
|
|
<div class="ui active step">
|
|
Shipping
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Billing
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Confirm Order
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Complete
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui large steps">
|
|
<div class="ui active step">
|
|
Shipping
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Billing
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Confirm Order
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Complete
|
|
</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 four steps">
|
|
<div class="ui active step">
|
|
Shipping
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Billing
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Confirm Order
|
|
</div>
|
|
<div class="ui disabled step">
|
|
Complete
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|