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.
1604 lines
44 KiB
1604 lines
44 KiB
<!DOCTYPE html>
|
|
<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, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
|
|
|
<link rel="image_src" type="image/jpeg" href="/images/logo.png" />
|
|
|
|
<!-- Site Properities -->
|
|
<meta name="generator" content="DocPad v6.78.1" />
|
|
<title>Step | Semantic UI</title>
|
|
|
|
<meta name="description" content="A step shows the completion status of an activity in a series of activities" />
|
|
<meta name="keywords" content="html5, ui, library, framework, javascript" />
|
|
|
|
<script src="/javascript/library/jquery.min.js"></script>
|
|
<script src="/javascript/library/clipboard.min.js"></script>
|
|
<script src="/javascript/library/cookie.min.js"></script>
|
|
<script src="/javascript/library/easing.min.js"></script>
|
|
<script src="/javascript/library/highlight.min.js"></script>
|
|
<script src="/javascript/library/history.min.js"></script>
|
|
<script src="/javascript/library/tablesort.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/dist/semantic.min.js"></script>
|
|
|
|
|
|
|
|
<script src="/javascript/docs.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-44039803-2', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
window.liveSettings = {
|
|
api_key : '9ede3015b9f84c1aabc81ab839c55d74',
|
|
parse_attr : [
|
|
'data-title',
|
|
'data-content'
|
|
],
|
|
detectlang : false,
|
|
autocollect : true,
|
|
ignore_tags : ['i', 'code', 'pre'],
|
|
parse_attr : ['data-title', 'data-content', 'data-text'],
|
|
ignore_class : ['code', 'anchor']
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
|
|
|
|
</head>
|
|
<body id="example" class="steps" ontouchstart="">
|
|
|
|
<div class="ui vertical inverted sidebar menu" id="toc">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item">
|
|
<a class="ui logo icon image" href="/">
|
|
<img src="/images/logo.png">
|
|
</a>
|
|
<a href="/"><b>UI Docs</b></a>
|
|
</div>
|
|
<a class="item" href="/introduction/getting-started.html">
|
|
<b>Getting Started</b>
|
|
</a>
|
|
<a class="item" href="/introduction/new.html">
|
|
<b>New in 2.1</b>
|
|
</a>
|
|
<div class="item">
|
|
<div class="header">Introduction</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/introduction/integrations.html">
|
|
Integrations
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/advanced-usage.html">
|
|
Recipes
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/glossary.html">
|
|
Glossary
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Usage</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/usage/theming.html">
|
|
Theming
|
|
</a>
|
|
|
|
<a class="item" href="/usage/layout.html">
|
|
Layouts
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Globals</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/globals/reset.html">
|
|
Reset
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/globals/site.html">
|
|
Site
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="active header">Elements</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/elements/button.html">
|
|
Button
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/container.html">
|
|
Container
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/divider.html">
|
|
Divider
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/flag.html">
|
|
Flag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/header.html">
|
|
Header
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/icon.html">
|
|
Icon
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/image.html">
|
|
Image
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/input.html">
|
|
Input
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/label.html">
|
|
Label
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/list.html">
|
|
List
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/loader.html">
|
|
Loader
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/rail.html">
|
|
Rail
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/reveal.html">
|
|
Reveal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/segment.html">
|
|
Segment
|
|
|
|
</a>
|
|
|
|
<a class="active item" href="/elements/step.html">
|
|
Step
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Collections</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/collections/breadcrumb.html">
|
|
Breadcrumb
|
|
|
|
</a>
|
|
|
|
<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/message.html">
|
|
Message
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/table.html">
|
|
Table
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Views</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/views/advertisement.html">
|
|
Advertisement
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/card.html">
|
|
Card
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/comment.html">
|
|
Comment
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/feed.html">
|
|
Feed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/item.html">
|
|
Item
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/statistic.html">
|
|
Statistic
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Modules</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/modules/accordion.html">
|
|
Accordion
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/checkbox.html">
|
|
Checkbox
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dimmer.html">
|
|
Dimmer
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dropdown.html">
|
|
Dropdown
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/embed.html">
|
|
Embed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/modal.html">
|
|
Modal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/nag.html">
|
|
Nag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/popup.html">
|
|
Popup
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/progress.html">
|
|
Progress
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/rating.html">
|
|
Rating
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/search.html">
|
|
Search
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/shape.html">
|
|
Shape
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sidebar.html">
|
|
Sidebar
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sticky.html">
|
|
Sticky
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/tab.html">
|
|
Tab
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/transition.html">
|
|
Transition
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Behaviors</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/behaviors/api.html">
|
|
API
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/form.html">
|
|
Form Validation
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/visibility.html">
|
|
Visibility
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui black big launch right attached fixed button">
|
|
<i class="content icon"></i>
|
|
<span class="text">Menu</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="ui fixed inverted main menu">
|
|
<div class="ui container">
|
|
<a class="launch icon item">
|
|
<i class="content icon"></i>
|
|
</a>
|
|
|
|
<div class="item">
|
|
Step
|
|
</div>
|
|
|
|
<div class="right menu">
|
|
|
|
<div class="vertically fitted borderless item">
|
|
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="item">
|
|
<div class="ui hidden right aligned search input" id="search">
|
|
<div class="ui transparent icon input">
|
|
<input class="prompt" type="text" placeholder="Search...">
|
|
<i class="inverted search link icon" data-content="Search UI"></i>
|
|
</div>
|
|
<div class="results"></div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pusher">
|
|
<div class="full height">
|
|
<div class="toc">
|
|
<div class="ui vertical inverted sticky menu">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item">
|
|
<a class="ui logo icon image" href="/">
|
|
<img src="/images/logo.png">
|
|
</a>
|
|
<a href="/"><b>UI Docs</b></a>
|
|
</div>
|
|
<a class="item" href="/introduction/getting-started.html">
|
|
<b>Getting Started</b>
|
|
</a>
|
|
<a class="item" href="/introduction/new.html">
|
|
<b>New in 2.1</b>
|
|
</a>
|
|
<div class="item">
|
|
<div class="header">Introduction</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/introduction/integrations.html">
|
|
Integrations
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/advanced-usage.html">
|
|
Recipes
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/glossary.html">
|
|
Glossary
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Usage</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/usage/theming.html">
|
|
Theming
|
|
</a>
|
|
|
|
<a class="item" href="/usage/layout.html">
|
|
Layouts
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Globals</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/globals/reset.html">
|
|
Reset
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/globals/site.html">
|
|
Site
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="active header">Elements</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/elements/button.html">
|
|
Button
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/container.html">
|
|
Container
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/divider.html">
|
|
Divider
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/flag.html">
|
|
Flag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/header.html">
|
|
Header
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/icon.html">
|
|
Icon
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/image.html">
|
|
Image
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/input.html">
|
|
Input
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/label.html">
|
|
Label
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/list.html">
|
|
List
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/loader.html">
|
|
Loader
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/rail.html">
|
|
Rail
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/reveal.html">
|
|
Reveal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/segment.html">
|
|
Segment
|
|
|
|
</a>
|
|
|
|
<a class="active item" href="/elements/step.html">
|
|
Step
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Collections</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/collections/breadcrumb.html">
|
|
Breadcrumb
|
|
|
|
</a>
|
|
|
|
<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/message.html">
|
|
Message
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/table.html">
|
|
Table
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Views</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/views/advertisement.html">
|
|
Advertisement
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/card.html">
|
|
Card
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/comment.html">
|
|
Comment
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/feed.html">
|
|
Feed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/item.html">
|
|
Item
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/statistic.html">
|
|
Statistic
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Modules</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/modules/accordion.html">
|
|
Accordion
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/checkbox.html">
|
|
Checkbox
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dimmer.html">
|
|
Dimmer
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dropdown.html">
|
|
Dropdown
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/embed.html">
|
|
Embed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/modal.html">
|
|
Modal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/nag.html">
|
|
Nag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/popup.html">
|
|
Popup
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/progress.html">
|
|
Progress
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/rating.html">
|
|
Rating
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/search.html">
|
|
Search
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/shape.html">
|
|
Shape
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sidebar.html">
|
|
Sidebar
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sticky.html">
|
|
Sticky
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/tab.html">
|
|
Tab
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/transition.html">
|
|
Transition
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Behaviors</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/behaviors/api.html">
|
|
API
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/form.html">
|
|
Form Validation
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/visibility.html">
|
|
Visibility
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="article">
|
|
|
|
|
|
<div class="ui masthead vertical segment">
|
|
<div class="ui container">
|
|
<div class="introduction">
|
|
|
|
<h1 class="ui header">
|
|
Step
|
|
|
|
<div class="sub header">
|
|
|
|
<a class="twitter-share-button twitter"
|
|
href="http://twitter.com/share"
|
|
data-text="Semantic UI is a next generation UI framework"
|
|
data-url="http://semantic-ui.com"
|
|
data-via="semanticui">
|
|
</a>
|
|
<script type="text/javascript">
|
|
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
|
|
</script>
|
|
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
|
|
A step shows the completion status of an activity in a series of activities
|
|
</div>
|
|
</h1>
|
|
|
|
<div class="ui hidden divider"></div>
|
|
|
|
<div class="ui right floated main menu">
|
|
<a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/elements/step.html.eco">
|
|
<i class="edit icon"></i>
|
|
</a>
|
|
|
|
<a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Step] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Step should do this%0A%0A**Result**%0AThe Step does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
|
|
<i class="bug icon"></i>
|
|
</a>
|
|
|
|
<a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
|
|
<i class="alternate github icon"></i>
|
|
</a>
|
|
</div>
|
|
<div class="ui right floated main menu">
|
|
<a class="music popup icon item" data-content="Play Music">
|
|
<i class="music icon"></i>
|
|
</a>
|
|
<div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
|
|
<i class="world icon"></i>
|
|
<div class="menu">
|
|
<div class="header">Select Language</div>
|
|
<div class="ui icon search input">
|
|
<i class="search icon"></i>
|
|
<input type="text" placeholder="Search languages...">
|
|
</div>
|
|
<div class="scrolling menu">
|
|
<div class="item" data-percent="100" data-value="en" data-text="English" data-english="English">
|
|
<span class="description">English</span>
|
|
English
|
|
</div>
|
|
<div class="item" data-percent="94" data-value="da" data-text="dansk" data-english="Danish">
|
|
<span class="description">dansk</span>
|
|
Danish
|
|
</div>
|
|
<div class="item" data-percent="94" data-value="es" data-text="Español" data-english="Spanish">
|
|
<span class="description">Español</span>
|
|
Spanish
|
|
</div>
|
|
<div class="item" data-percent="34" data-value="zh" data-text="简体中文" data-english="Chinese">
|
|
<span class="description">简体中文</span>
|
|
Chinese
|
|
</div>
|
|
<div class="item" data-percent="54" data-value="zh_TW" data-text="中文 (臺灣)" data-english="Chinese (Taiwan)">
|
|
<span class="description">中文 (臺灣)</span>
|
|
Chinese (Taiwan)
|
|
</div>
|
|
<div class="item" data-percent="79" data-value="fa" data-text="پارسی" data-english="Persian">
|
|
<span class="description">پارسی</span>
|
|
Persian
|
|
</div>
|
|
<div class="item" data-percent="41" data-value="fr" data-text="Français" data-english="French">
|
|
<span class="description">Français</span>
|
|
French
|
|
</div>
|
|
<div class="item" data-percent="37" data-value="el" data-text="ελληνικά" data-english="Greek">
|
|
<span class="description">ελληνικά</span>
|
|
Greek
|
|
</div>
|
|
<div class="item" data-percent="37" data-value="ru" data-text="Русский" data-english="Russian">
|
|
<span class="description">Русский</span>
|
|
Russian
|
|
</div>
|
|
<div class="item" data-percent="36" data-value="de" data-text="Deutsch" data-english="German">
|
|
<span class="description">Deutsch</span>
|
|
German
|
|
</div>
|
|
<div class="item" data-percent="23" data-value="it" data-text="Italiano" data-english="Italian">
|
|
<span class="description">Italiano</span>
|
|
Italian
|
|
</div>
|
|
<div class="item" data-percent="21" data-value="nl" data-text="Nederlands" data-english="Dutch">
|
|
<span class="description">Nederlands</span>
|
|
Dutch
|
|
</div>
|
|
<div class="item" data-percent="19" data-value="pt_BR" data-text="Português(BR)" data-english="Portuguese">
|
|
<span class="description">Português(BR)</span>
|
|
Portuguese
|
|
</div>
|
|
<div class="item" data-percent="17" data-value="id" data-text="Indonesian" data-english="Indonesian">
|
|
<span class="description">Indonesian</span>
|
|
Indonesian
|
|
</div>
|
|
<div class="item" data-percent="12" data-value="lt" data-text="Lietuvių" data-english="Lithuanian">
|
|
<span class="description">Lietuvių</span>
|
|
Lithuanian
|
|
</div>
|
|
<div class="item" data-percent="11" data-value="tr" data-text="Türkçe" data-english="Turkish">
|
|
<span class="description">Türkçe</span>
|
|
Turkish
|
|
</div>
|
|
<div class="item" data-percent="10" data-value="kr" data-text="한국어" data-english="Korean">
|
|
<span class="description">한국어</span>
|
|
Korean
|
|
</div>
|
|
<div class="item" data-percent="7" data-value="ar" data-text="العربية" data-english="Arabic">
|
|
<span class="description">العربية</span>
|
|
Arabic
|
|
</div>
|
|
<div class="item" data-percent="6" data-value="hu" data-text="Magyar" data-english="Hungarian">
|
|
<span class="description">Magyar</span>
|
|
Hungarian
|
|
</div>
|
|
<div class="item" data-percent="6" data-value="vi" data-text="tiếng Việt" data-english="Vietnamese">
|
|
<span class="description">tiếng Việt</span>
|
|
Vietnamese
|
|
</div>
|
|
<div class="item" data-percent="5" data-value="sv" data-text="svenska" data-english="Swedish">
|
|
<span class="description">svenska</span>
|
|
Swedish
|
|
</div>
|
|
<div class="item" data-precent="4" data-value="pl" data-text="polski" data-english="Polish">
|
|
<span class="description">polski</span>
|
|
Polish
|
|
</div>
|
|
<div class="item" data-percent="6" data-value="ja" data-text="日本語" data-english="Japanese">
|
|
<span class="description">日本語</span>
|
|
Japanese
|
|
</div>
|
|
<div class="item" data-percent="0" data-value="ro" data-text="românește" data-english="Romanian">
|
|
<span class="description">românește</span>
|
|
Romanian
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="ui floating dropdown theme basic button" data-element="step" data-type="element">
|
|
<span class="text">3 Themes</span>
|
|
<div class="menu transition hidden">
|
|
|
|
<div class="item" data-value="Default" data-text="Default Theme">Default</div>
|
|
|
|
<div class="item" data-value="Basic" data-text="Basic Theme">Basic</div>
|
|
|
|
<div class="item" data-value="GitHub" data-text="GitHub Theme">GitHub</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="ui download primary button">
|
|
Download
|
|
</div>
|
|
<div class="ui flowing download basic popup">
|
|
<div class="ui divided equal width relaxed center aligned choice grid">
|
|
<div class="framework column">
|
|
<h4 class="ui center aligned header">UI Framework</h4>
|
|
<div class="ui list">
|
|
<div class="item"><i class="green check icon"></i> Themable</div>
|
|
<div class="item"><i class="green check icon"></i> Build Tools</div>
|
|
</div>
|
|
<div class="ui primary fluid button">Choose</div>
|
|
</div>
|
|
<div class="standalone column">
|
|
<h4 class="ui center aligned header">Standalone</h4>
|
|
<div class="ui list">
|
|
<div class="item">Default Theme</div>
|
|
<div class="item">Precompiled</div>
|
|
</div>
|
|
<div class="ui fluid button basic">Choose</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divided equal height relaxed center aligned framework grid">
|
|
<div class="column">
|
|
<div class="ui header">Semantic UI</div>
|
|
<a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
|
|
Download ZIP
|
|
</a>
|
|
<a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
|
|
<h4 class="ui header">Package Managers</h4>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>NPM</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Git</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divided equal height relaxed center aligned standalone grid">
|
|
<div class="column">
|
|
<div class="ui header">Standalone Step</div>
|
|
<a class="ui primary button" href="https://github.com/Semantic-Org/UI-Step/archive/master.zip">
|
|
Download ZIP
|
|
</a>
|
|
<a class="ui button" href="https://github.com/Semantic-Org/UI-Step/">
|
|
View GitHub
|
|
</a>
|
|
<h4 class="ui header">Package Managers</h4>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>Bower</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-step">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>NPM</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-step">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Git</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Step.git">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="advertisement">
|
|
|
|
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/step.less" />
|
|
|
|
<div class="main ui container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example" data-use-content="true">
|
|
<h4 class="ui header">Step</h4>
|
|
<p>A single step</p>
|
|
<div class="ui steps">
|
|
<div class="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 steps</p>
|
|
<div class="ui ignored positive icon message">
|
|
<i class="mobile icon"></i>
|
|
<div class="content">
|
|
<h3 class="header">Responsive Element</h3>
|
|
<p>Steps will automatically stack on mobile. To make steps automatically stack for tablet use the <code>tablet stackable</code> variation.</p>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Ordered</h4>
|
|
<p>A step can show a 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="completed step">
|
|
<div class="content">
|
|
<div class="title">Billing</div>
|
|
<div class="description">Enter billing information</div>
|
|
</div>
|
|
</div>
|
|
<div class="active 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>A step can be displayed stacked vertically</p>
|
|
<div class="ui 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 class="completed step">
|
|
<i class="credit card icon"></i>
|
|
<div class="content">
|
|
<div class="title">Billing</div>
|
|
<div class="description">Enter billing information</div>
|
|
</div>
|
|
</div>
|
|
<div class="active 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" data-use-content="true">
|
|
<h4 class="ui header">Description</h4>
|
|
<p>A step can contain a 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" data-use-content="true">
|
|
<h4 class="ui header">Icon</h4>
|
|
<p>A step can 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" data-use-content="true" data-tag="a">
|
|
<h4 class="ui header">Link</h4>
|
|
<p>A step can link</p>
|
|
<div class="ui steps">
|
|
<a class="active step">
|
|
<i class="truck icon"></i>
|
|
<div class="content">
|
|
<div class="title">Shipping</div>
|
|
<div class="description">Choose your shipping options</div>
|
|
</div>
|
|
</a>
|
|
<a class="step">
|
|
<div class="content">
|
|
<div class="title">Billing</div>
|
|
<div class="description">Enter billing information</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 class="link step">
|
|
<div class="content">
|
|
<div class="title">Billing</div>
|
|
<div class="description">Enter billing information</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>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Stackable</h4>
|
|
<p>A step can stack vertically only on smaller screens</p>
|
|
<div class="ui tablet stackable steps">
|
|
<div class="step">
|
|
<i class="plane 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="dollar 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 circle 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">Fluid</h4>
|
|
<p>A fluid step 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 class="active step">
|
|
<i class="dollar icon"></i>
|
|
<div class="content">
|
|
<div class="title">Billing</div>
|
|
<div class="description">Enter billing information</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<p>The steps take up the entire column width</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">
|
|
Attached
|
|
</h4>
|
|
<p>Steps can be attached to other elements</p>
|
|
|
|
<div class="ui three top attached 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 class="ui attached segment">
|
|
<img src="/images/wireframe/paragraph.png" class="ui wireframe image">
|
|
</div>
|
|
<div class="ui three bottom attached 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">Evenly Divided</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 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>
|
|
</div>
|
|
</div>
|
|
<div class="ui black inverted vertical footer segment">
|
|
<div class="ui center aligned container">
|
|
<div class="ui stackable inverted grid">
|
|
<div class="three wide column">
|
|
<h4 class="ui inverted header">Community</h4>
|
|
<div class="ui inverted link list">
|
|
<a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
|
|
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
|
|
<a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
|
|
<a class="item" href="/cla.html" target="_blank">CLA</a>
|
|
</div>
|
|
</div>
|
|
<div class="three wide column">
|
|
<h4 class="ui inverted header">Network</h4>
|
|
<div class="ui inverted link list">
|
|
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
|
|
<a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
|
|
<a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="three wide column">
|
|
<h4 class="ui inverted header">Learn</h4>
|
|
<div class="ui inverted link list">
|
|
<a href="#" class="disabled item">Example Layouts</a>
|
|
<a href="#" class="disabled item">The Project</a>
|
|
<a href="#" class="disabled item">Roadmap</a>
|
|
<a href="#" class="disabled item">About the Author</a>
|
|
</div>
|
|
</div> -->
|
|
<div class="seven wide right floated column">
|
|
<h4 class="ui inverted teal header">Help Preserve This Project</h4>
|
|
<p> Support for the continued development of Semantic UI comes directly from the community.</p>
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
<input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
|
|
<button type="submit" class="ui large teal button">Donate Today</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="ui inverted section divider"></div>
|
|
<img src="/images/logo.png" class="ui centered mini image">
|
|
<div class="ui horizontal inverted small divided link list">
|
|
<a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic language modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
|
|
<div class="image content">
|
|
<div class="middle aligned image">
|
|
<i class="world icon"></i>
|
|
</div>
|
|
<div class="description">
|
|
<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
|
|
<div class="ui inverted indicating progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<p>We need your help to make Semantic available to people who speak your language.</p>
|
|
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui inverted cancel button">No Thanks</div>
|
|
<a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
|
|
<i class="mail icon"></i>
|
|
Help Translate
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic chinese modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">Would you like to visit the mirror site?</div>
|
|
<div class="image content">
|
|
<div class="middle aligned image">
|
|
<i class="question icon"></i>
|
|
</div>
|
|
<div class="description">
|
|
<p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui inverted red cancel button">No Thanks</div>
|
|
<a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
|
|
<i class="mail icon"></i>
|
|
Yes, take me to the mirror
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui demo page dimmer">
|
|
<div class="content">
|
|
<div class="center">
|
|
<h2 class="ui inverted icon header">
|
|
<i class="mail icon"></i>
|
|
Dimmer Message
|
|
<div class="sub header">Dimmer sub-header</div>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.less = {
|
|
async : true,
|
|
environment : 'production',
|
|
fileAsync : false,
|
|
onReady : false,
|
|
useFileCache : true
|
|
};
|
|
</script>
|
|
|
|
<script src="/javascript/library/less.min.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|