@carbon/charts
Version:
Carbon charting components
72 lines (69 loc) • 4 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<ul data-progress data-progress-current class="bx--progress ">
<li class="bx--progress-step bx--progress-step--complete " >
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path><path d="M7 10.8L4.5 8.3l.8-.8L7 9.2l3.7-3.7.8.8z"></path></svg>
<p tabindex="0" class="bx--progress-label">
First step
</p>
<div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
<span class="bx--tooltip__caret"></span>
<p class="bx--tooltip__text"></p>
</div>
<p class="bx--progress-optional">Optional</p>
<span class="bx--progress-line"></span>
</li>
<li class="bx--progress-step bx--progress-step--current " >
<svg>
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" ></path>
</svg>
<p tabindex="0" class="bx--progress-label" aria-describedby="label-tooltiprl89k5yg7v">
Overflow Ex.1
</p>
<div id="label-tooltiprl89k5yg7v" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
<span class="bx--tooltip__caret"></span>
<p class="bx--tooltip__text">Overflow Ex.1</p>
</div>
<span class="bx--progress-line"></span>
</li>
<li class="bx--progress-step bx--progress-step--incomplete " >
<svg>
<path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
</svg>
<p tabindex="0" class="bx--progress-label" aria-describedby="label-tooltip5sapz5tcqxx">
Overflow Ex. 2 Multi Line
</p>
<div id="label-tooltip5sapz5tcqxx" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
<span class="bx--tooltip__caret"></span>
<p class="bx--tooltip__text">Overflow Ex. 2 Multi Line</p>
</div>
<span class="bx--progress-line"></span>
</li>
<li class="bx--progress-step bx--progress-step--incomplete " data-invalid >
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--progress__warning" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path><path d="M7.5 4h1v5h-1zm.5 6.2c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8s-.4-.8-.8-.8z"></path></svg>
<p tabindex="0" class="bx--progress-label">
Fourth step
</p>
<div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
<span class="bx--tooltip__caret"></span>
<p class="bx--tooltip__text"></p>
</div>
<span class="bx--progress-line"></span>
</li>
<li class="bx--progress-step bx--progress-step--incomplete bx--progress-step--disabled " aria-disabled="true" >
<svg>
<path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
</svg>
<p tabindex="0" class="bx--progress-label">
Fifth step
</p>
<div id="label-tooltip" role="tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
<span class="bx--tooltip__caret"></span>
<p class="bx--tooltip__text"></p>
</div>
<span class="bx--progress-line"></span>
</li>
</ul>