| 1 |
- import{e as s,o as a,G as t}from"./vendor.9cc7b6f2.js";const n={class:"markdown-body"},p=[t('<h1>Progress 进度条</h1><h3>介绍</h3><p>展示操作或任务的当前进度，比如上传文件。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-comment">//vue</span>\n<span class="hljs-keyword">import</span> { Progress,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">//taro</span>\n<span class="hljs-keyword">import</span> { Progress,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Progress);\napp.use(Icon);\n\n</code></pre><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"30"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h3>设置高度和颜色</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">stroke-color</span>=<span class="hljs-string">"pink"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"20"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h3>设置百分比不显示</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">:show-text</span>=<span class="hljs-string">"false"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h3>设置百分比外显</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"60"</span> <span class="hljs-attr">:text-inside</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">stroke-height</span>=<span class="hljs-string">"24"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h3>设置百分比内显</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"60"</span> <span class="hljs-attr">:text-inside</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"24"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h2>自定义尺寸</h2><p>内置 <strong>small</strong>，<strong>base</strong>，<strong>large</strong> 三种规格供使用。</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">text-inside</span>=<span class="hljs-string">"true"</span> ></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"base"</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">text-inside</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"large"</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"70"</span> <span class="hljs-attr">text-inside</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h3>设置状态显示</h3><pre><code class="language-html">//动态展示\n<span class="hljs-tag"><<span class="hljs-name">nut-progress</span> \n <span class="hljs-attr">percentage</span>=<span class="hljs-string">"30"</span> \n <span class="hljs-attr">stroke-color</span>=<span class="hljs-string">"linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"</span> \n <span class="hljs-attr">status</span>=<span class="hljs-string">"active"</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n// 展示icon\n<span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">stroke-color</span>=<span class="hljs-string">"#f30"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"15"</span> ></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">"100"</span> <span class="hljs-attr">stroke-color</span>=<span class="hljs-string">"#1890ff"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"15"</span> <span class="hljs-attr">status</span>=<span class="hljs-string">"success"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-progress</span>></span>\n</code></pre><h2>Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>percentage</td><td>百分比</td><td>Number</td><td>0</td></tr><tr><td>stroke-color</td><td>进度条背景色</td><td>String</td><td>#f30</td></tr><tr><td>stroke-width</td><td>进度条宽度</td><td>String</td><td>‘’</td></tr><tr><td>size</td><td>进度条及文字尺寸，可选值small/base/large</td><td>String</td><td>-</td></tr><tr><td>show-text</td><td>是否显示进度条文字内容</td><td>Boolean</td><td>true</td></tr><tr><td>text-inside</td><td>进度条文字显示位置(false:外显，true:内显)</td><td>Boolean</td><td>false</td></tr><tr><td>text-color</td><td>进度条文字颜色设置</td><td>String</td><td>#333</td></tr><tr><td>status</td><td>进度条当前状态,active(展示动画效果)/icon(展示icon标签)</td><td>String</td><td>text</td></tr><tr><td>icon-name</td><td>icon名称</td><td>String</td><td>checked</td></tr><tr><td>icon-color</td><td>icon颜色</td><td>String</td><td>#439422</td></tr></tbody></table>',22)],l={setup:(t,{expose:l})=>(l({frontmatter:{}}),(t,l)=>(a(),s("div",n,p)))};export{l as default};
|
