Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: db8f840f0b
Branches Tags
nutui
/
3.1.3
/
doc.7c013089.js

doc.7c013089.js 3.7 KB
History Raw

1 
  1. import{e as t,o as e,G as o}from"./vendor.e1f99099.js";const r={class:"markdown-body"},s=[o('<h1>Progress 进度条</h1><h3>介绍</h3><p>展示操作或任务的当前进度，比如上传文件。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\n//vue\nimport { Progress } from &#39;@nutui/nutui&#39;;\n//taro\nimport { Progress } from &#39;@nutui/nutui-taro&#39;;\n\nconst app = createApp();\napp.use(Progress);\n\n</code></pre><h2>代码示例</h2><h3>基础用法</h3><pre><code class="language-html">&lt;nut-progress percentage=&quot;30&quot;&gt;&lt;/nut-progress&gt;\n</code></pre><h3>设置高度和颜色</h3><pre><code class="language-html">&lt;nut-progress percentage=&quot;30&quot; stroke-color=&quot;pink&quot; stroke-width=&quot;20&quot;&gt;&lt;/nut-progress&gt;\n</code></pre><h3>设置百分比不显示</h3><pre><code class="language-html">&lt;nut-progress percentage=&quot;50&quot; :show-text=&quot;false&quot;&gt;&lt;/nut-progress&gt;\n</code></pre><h3>设置百分比外显</h3><pre><code class="language-html">&lt;nut-progress percentage=&quot;60&quot; :text-inside=&quot;false&quot; stroke-height=&quot;24&quot;&gt;&lt;/nut-progress&gt;\n</code></pre><h3>设置百分比内显</h3><pre><code class="language-html">&lt;nut-progress percentage=&quot;60&quot; :text-inside=&quot;true&quot; stroke-width=&quot;24&quot;&gt;&lt;/nut-progress&gt;\n</code></pre><h2>自定义尺寸</h2><p>内置 <strong>small</strong>，<strong>base</strong>，<strong>large</strong> 三种规格供使用。</p><pre><code class="language-html">&lt;nut-progress size=&quot;small&quot; percentage=&quot;30&quot; text-inside=&quot;true&quot; &gt;&lt;/nut-progress&gt;\n&lt;nut-progress size=&quot;base&quot; percentage=&quot;50&quot; text-inside=&quot;true&quot;&gt;&lt;/nut-progress&gt;\n&lt;nut-progress size=&quot;large&quot; percentage=&quot;70&quot;  text-inside=&quot;true&quot;&gt;&lt;/nut-progress&gt;\n</code></pre><h3>设置状态显示</h3><pre><code class="language-html">//动态展示\n&lt;nut-progress \n   percentage=&quot;30&quot; \n   stroke-color=&quot;linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)&quot; \n   status=&quot;active&quot;&gt;\n&lt;/nut-progress&gt;\n// 展示icon\n&lt;nut-progress percentage=&quot;50&quot; stroke-color=&quot;#f30&quot; stroke-width=&quot;15&quot; &gt;&lt;/nut-progress&gt;\n&lt;nut-progress percentage=&quot;100&quot; stroke-color=&quot;#1890ff&quot; stroke-width=&quot;15&quot; status=&quot;success&quot;&gt;&lt;/nut-progress&gt;\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>',23)],d={setup:o=>(o,d)=>(e(),t("div",r,s))};export{d as default};
    2.