Basalt2/docs/.vitepress/dist/assets/references_progressbar.md.1e6ed8d2.js

import{_ as s,o as a,c as e,Q as n}from"./chunks/framework.4313453f.js";const h=JSON.parse('{"title":"Progressbar","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"references/progressbar.md","filePath":"references/progressbar.md","lastUpdated":null}'),l={name:"references/progressbar.md"},o=n(`<h1 id="progressbar" tabindex="-1">Progressbar <a class="header-anchor" href="#progressbar" aria-label="Permalink to &quot;Progressbar&quot;">​</a></h1><p>Progressbars are objects that visually display the current state of your progress. They always represent progress as a percentage (0 to 100%), regardless of their size. To represent progress in other units, you need to perform a simple conversion: currentValue / maxValue * 100.</p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><table><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>progress</td><td>number</td><td>Current progress displayed by the progress bar, typically between 0 and 100.</td></tr><tr><td>progressBackground</td><td>color</td><td>Color of the background which is not filled by the progress.</td></tr><tr><td>minValue</td><td>number</td><td>The starting value of the progress, typically 0.</td></tr><tr><td>maxValue</td><td>number</td><td>The ending value representing completion, which corresponds to 100% on the progress bar.</td></tr></tbody></table><h2 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h2><p>Here’s how to implement and use the Progressbar object within the Basalt framework:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> main </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">createFrame</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> aProgressbar </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addProgressbar</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Set the initial properties</span></span>
<span class="line"><span style="color:#B392F0;">aProgressbar</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setMinValue</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">aProgressbar</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setMaxValue</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1000</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Assuming our task&#39;s total workload is 1000 units</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- As your task progresses, update the progress displayed</span></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> currentTaskValue </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">500</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">-- This represents the task&#39;s current state</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Convert the currentTaskValue to a percentage and set it as the progress</span></span>
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> percentageProgress </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> (currentTaskValue </span><span style="color:#F97583;">/</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">aProgressbar</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">getMaxValue</span><span style="color:#E1E4E8;">()) </span><span style="color:#F97583;">*</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">100</span></span>
<span class="line"><span style="color:#B392F0;">aProgressbar</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setProgress</span><span style="color:#E1E4E8;">(currentTaskValue)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> main </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">createFrame</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> aProgressbar </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addProgressbar</span><span style="color:#24292E;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Set the initial properties</span></span>
<span class="line"><span style="color:#6F42C1;">aProgressbar</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setMinValue</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">aProgressbar</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setMaxValue</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1000</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Assuming our task&#39;s total workload is 1000 units</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- As your task progresses, update the progress displayed</span></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> currentTaskValue </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">500</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">-- This represents the task&#39;s current state</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;">-- Convert the currentTaskValue to a percentage and set it as the progress</span></span>
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> percentageProgress </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> (currentTaskValue </span><span style="color:#D73A49;">/</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">aProgressbar</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">getMaxValue</span><span style="color:#24292E;">()) </span><span style="color:#D73A49;">*</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">100</span></span>
<span class="line"><span style="color:#6F42C1;">aProgressbar</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setProgress</span><span style="color:#24292E;">(currentTaskValue)</span></span></code></pre></div><p>this example, the task has a total workload of 1000 units. When half of it, or 500 units, is complete, the progress bar reflects this by filling up to 50%.</p>`,8),r=[o];function p(t,c,y,i,E,d){return a(),e("div",null,r)}const g=s(l,[["render",p]]);export{h as __pageData,g as default};