mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-23 11:46:44 +10:00
41 lines
2.4 KiB
HTML
41 lines
2.4 KiB
HTML
<div class="code-box" id="demo-circle">
|
|
<div class="code-box-demo">
|
|
<div id="components-progress-demo-circle"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var _antd = require('antd');
|
|
|
|
var ProgressCircle = _antd.Progress.Circle;
|
|
|
|
ReactDOM.render(React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(ProgressCircle, { percent: 30 }),
|
|
React.createElement(ProgressCircle, { percent: 70, status: "exception", format: React.createElement(_antd.Icon, { type: "exclamation" }) }),
|
|
React.createElement(ProgressCircle, { percent: 100 })
|
|
), document.getElementById('components-progress-demo-circle'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Progress, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
|
<span class="hljs-keyword">const</span> ProgressCircle = Progress.Circle;
|
|
|
|
ReactDOM.render(
|
|
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">ProgressCircle</span> <span class="hljs-attribute">percent</span>=<span class="hljs-value">{30}</span> /></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">ProgressCircle</span> <span class="hljs-attribute">percent</span>=<span class="hljs-value">{70}</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"exception"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">{<Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"exclamation"</span> /></span>} />
|
|
<span class="hljs-tag"><<span class="hljs-title">ProgressCircle</span> <span class="hljs-attribute">percent</span>=<span class="hljs-value">{100}</span> /></span>
|
|
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
, document.getElementById('components-progress-demo-circle'));</span></code></pre></div><style>
|
|
.ant-progress-circle-wrap,
|
|
.ant-progress-line-wrap {
|
|
margin-right: 8px;
|
|
margin-bottom: 5px;
|
|
}
|
|
</style>
|
|
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#demo-circle">进度圈</a>
|
|
</div>
|
|
<p>圈形的进度。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div> |