56 lines
31 KiB
JavaScript
56 lines
31 KiB
JavaScript
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.4313453f.js";const h=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"guides/getting-started.md","filePath":"guides/getting-started.md","lastUpdated":null}'),l={name:"guides/getting-started.md"},e=o(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting Started""></a></h1><p>Here we will talk about basic stuff, we'll start with how to install basalt and then we will make a simple UI. We'll then continue by creating a Button, followed by an Input field, and then a List. Additionally, we'll cover how to retrieve values from these UI elements.</p><h2 id="how-to-install" tabindex="-1">How to Install <a class="header-anchor" href="#how-to-install" aria-label="Permalink to "How to Install""></a></h2><p>To download the UI Framework, use the following command:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">wget run https://basalt.madefor.cc/install.lua</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">wget run https://basalt.madefor.cc/install.lua</span></span></code></pre></div><p>Input the command into your shell, and after execution, you should see a file named <code>basalt.lua</code> in your directory. This file serves as the main entry point to the framework.</p><h2 id="setting-up-basalt" tabindex="-1">Setting up Basalt <a class="header-anchor" href="#setting-up-basalt" aria-label="Permalink to "Setting up Basalt""></a></h2><p>The next step is to include and initialize the Basalt framework in your project.</p><p>Here's the code to load basalt into your project.</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;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"basalt"</span><span style="color:#E1E4E8;">)</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;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"basalt"</span><span style="color:#24292E;">)</span></span></code></pre></div><p>Merely loading Basalt is insufficient. It's essential to initiate the event and draw handlers. To facilitate this, Basalt offers the <code>basalt.autoUpdate()</code> function.</p><p>Here is a example:</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;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"basalt"</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6A737D;">-- your UI code is here</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;">basalt.</span><span style="color:#79B8FF;">autoUpdate</span><span style="color:#E1E4E8;">()</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;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"basalt"</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#6A737D;">-- your UI code is here</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;">basalt.</span><span style="color:#005CC5;">autoUpdate</span><span style="color:#24292E;">()</span></span></code></pre></div><h2 id="creating-a-simple-ui-with-basalt" tabindex="-1">Creating a Simple UI with Basalt <a class="header-anchor" href="#creating-a-simple-ui-with-basalt" aria-label="Permalink to "Creating a Simple UI with Basalt""></a></h2><p>Now that you have Basalt installed, let's dive into creating a basic user interface (UI).</p><h3 id="creating-a-button" tabindex="-1">Creating a Button <a class="header-anchor" href="#creating-a-button" aria-label="Permalink to "Creating a Button""></a></h3><p>To create a Button in Basalt, you can use the <code>:addButton()</code> function. The :addButton() function only works on frames:</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;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"basalt"</span><span style="color:#E1E4E8;">)</span></span>
|
||
<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;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> button </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;">addButton</span><span style="color:#E1E4E8;">()</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;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"basalt"</span><span style="color:#24292E;">)</span></span>
|
||
<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;">getMainFrame</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> button </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;">addButton</span><span style="color:#24292E;">()</span></span></code></pre></div><p>This code snippet creates a Button and adds it to the main frame of your UI. You can customize the appearance and behavior of the button as needed.</p><p>Here are some common customizations you can apply:</p><ul><li><strong>Position:</strong> You can set the position of the button using the <code>:setPosition()</code> function.</li><li><strong>Size:</strong> Adjust the size of the button using the <code>:setSize()</code> function.</li><li><strong>Background:</strong> Change the background color or image of the button with the <code>:setBackground()</code> function.</li><li><strong>Foreground (Text):</strong> Modify the text color of the button using the <code>:setForeground()</code> function.</li></ul><p>Here's an example of how you can apply these customizations:</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;"> basalt </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"basalt"</span><span style="color:#E1E4E8;">)</span></span>
|
||
<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;">getMainFrame</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">local</span><span style="color:#E1E4E8;"> button </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;">addButton</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setPosition</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set position to (5, 3)</span></span>
|
||
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setSize</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">20</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set size to width: 20, height: 3</span></span>
|
||
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setBackground</span><span style="color:#E1E4E8;">(colors.</span><span style="color:#B392F0;">blue</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set background color to blue</span></span>
|
||
<span class="line"><span style="color:#B392F0;">button</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setForeground</span><span style="color:#E1E4E8;">(colors.</span><span style="color:#B392F0;">white</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set text color to white</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;"> basalt </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"basalt"</span><span style="color:#24292E;">)</span></span>
|
||
<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;">getMainFrame</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">local</span><span style="color:#24292E;"> button </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;">addButton</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setPosition</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">5</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set position to (5, 3)</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setSize</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">20</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set size to width: 20, height: 3</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setBackground</span><span style="color:#24292E;">(colors.</span><span style="color:#6F42C1;">blue</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set background color to blue</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">button</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setForeground</span><span style="color:#24292E;">(colors.</span><span style="color:#6F42C1;">white</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set text color to white</span></span></code></pre></div><p>With these functions, you can tailor the appearance and behavior of the button to suit your application's design requirements.</p><hr><h3 id="creating-an-input-field" tabindex="-1">Creating an Input Field <a class="header-anchor" href="#creating-an-input-field" aria-label="Permalink to "Creating an Input Field""></a></h3><p>To create an Input field in Basalt, you can use the <code>:addInput()</code> function:</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;"> input </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;">addInput</span><span style="color:#E1E4E8;">()</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;"> input </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;">addInput</span><span style="color:#24292E;">()</span></span></code></pre></div><p>Once you have created the Input field, you can customize its appearance and behavior to fit your UI design.</p><p>Here are some common customizations you can apply to the Input field:</p><ul><li><strong>Position:</strong> You can set the position of the button using the <code>:setPosition()</code> function.</li><li><strong>Size:</strong> Adjust the size of the button using the <code>:setSize()</code> function.</li><li><strong>Background:</strong> Change the background color or image of the button with the <code>:setBackground()</code> function.</li><li><strong>Foreground (Text):</strong> Modify the text color of the button using the <code>:setForeground()</code> function.</li><li><strong>PlaceholderText (Text):</strong> Modify the text color of the button using the <code>:setPlaceholderText()</code> function.</li></ul><p>Here's an example of how you can create and customize an Input field:</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;"> input </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;">addInput</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setPosition</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">3</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set position to (3, 3)</span></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setSize</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">12</span><span style="color:#E1E4E8;">, </span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set size to width: 12, height: 1</span></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setBackground</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"black"</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set background color to light gray</span></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setForeground</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"lightgray"</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set text color to light gray</span></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setPlaceholder</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Enter text here..."</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set placeholder text</span></span>
|
||
<span class="line"><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">setValue</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Initial value"</span><span style="color:#E1E4E8;">) </span><span style="color:#6A737D;">-- Set initial value</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;"> input </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;">addInput</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setPosition</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">3</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">3</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set position to (3, 3)</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setSize</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">12</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">1</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set size to width: 12, height: 1</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setBackground</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"black"</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set background color to light gray</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setForeground</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"lightgray"</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set text color to light gray</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setPlaceholder</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Enter text here..."</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set placeholder text</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">setValue</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Initial value"</span><span style="color:#24292E;">) </span><span style="color:#6A737D;">-- Set initial value</span></span></code></pre></div><h4 id="retrieving-values-from-input-fields" tabindex="-1">Retrieving Values from Input Fields <a class="header-anchor" href="#retrieving-values-from-input-fields" aria-label="Permalink to "Retrieving Values from Input Fields""></a></h4><p>Once you've created an Input field, you may want to retrieve the value entered by the user. Basalt provides an <code>:onChange(func)</code> event handler for this purpose.</p><p>Here's how you can use the <code>:onChange(func)</code> event handler to retrieve the value from an Input field:</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:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">onChange</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">(self, value)</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Input value changed to: " </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> value)</span></span>
|
||
<span class="line"><span style="color:#F97583;">end</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">onChange</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;">(self, value)</span></span>
|
||
<span class="line"><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Input value changed to: " </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> value)</span></span>
|
||
<span class="line"><span style="color:#D73A49;">end</span><span style="color:#24292E;">)</span></span></code></pre></div><p>In this example, whenever the value in the Input field changes, the provided function is called with the updated value as its argument. You can then perform any necessary actions with the value, such as updating other UI elements or processing data.</p><p>Additionally, if you need to retrieve the current value of the Input field programmatically at any point, you can use the <code>:getValue()</code> method:</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;"> inputValue </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">input</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">getValue</span><span style="color:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Current value of Input field: " </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> inputValue)</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;"> inputValue </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">input</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">getValue</span><span style="color:#24292E;">()</span></span>
|
||
<span class="line"><span style="color:#24292E;">basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Current value of Input field: " </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> inputValue)</span></span></code></pre></div><p>This method returns the current value of the Input field, allowing you to access it within your Lua code.</p><p>Combining the <code>:onChange(func)</code> event handler with the <code>:getValue()</code> method gives you full control over retrieving and managing the values entered by the user in Input fields.</p><hr><h3 id="creating-a-list" tabindex="-1">Creating a List <a class="header-anchor" href="#creating-a-list" aria-label="Permalink to "Creating a List""></a></h3><p>To create a List in Basalt, you can use the <code>:addList()</code> method:</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;"> list </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;">addList</span><span style="color:#E1E4E8;">()</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;"> list </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;">addList</span><span style="color:#24292E;">()</span></span></code></pre></div><p>Once you've created the List, you can populate it with items dynamically or statically to suit your application's requirements.</p><p>Here's an example of how you can add items to the List:</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:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Item 1"</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="color:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Item 2"</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="color:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">addItem</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Item 3"</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Item 1"</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Item 2"</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">addItem</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Item 3"</span><span style="color:#24292E;">)</span></span></code></pre></div><p>This code snippet adds three items to the List with the labels "Item 1", "Item 2", and "Item 3". You can customize the appearance and behavior of the List items as needed.</p><h4 id="handling-list-selection-changes" tabindex="-1">Handling List Selection Changes <a class="header-anchor" href="#handling-list-selection-changes" aria-label="Permalink to "Handling List Selection Changes""></a></h4><p>Basalt provides an <code>:onChange(func)</code> event handler for List elements to handle selection changes. This event is triggered whenever the user selects a different item in the List.</p><p>Here's how you can use the <code>:onChange(func)</code> event handler to respond to List selection changes:</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:#B392F0;">list</span><span style="color:#E1E4E8;">:</span><span style="color:#79B8FF;">onChange</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">function</span><span style="color:#E1E4E8;">(self, selectedItem)</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> basalt.</span><span style="color:#79B8FF;">debug</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">"Selected item changed to: " </span><span style="color:#F97583;">..</span><span style="color:#E1E4E8;"> selectedItem)</span></span>
|
||
<span class="line"><span style="color:#F97583;">end</span><span style="color:#E1E4E8;">)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">list</span><span style="color:#24292E;">:</span><span style="color:#005CC5;">onChange</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">function</span><span style="color:#24292E;">(self, selectedItem)</span></span>
|
||
<span class="line"><span style="color:#24292E;"> basalt.</span><span style="color:#005CC5;">debug</span><span style="color:#24292E;">(</span><span style="color:#032F62;">"Selected item changed to: " </span><span style="color:#D73A49;">..</span><span style="color:#24292E;"> selectedItem)</span></span>
|
||
<span class="line"><span style="color:#D73A49;">end</span><span style="color:#24292E;">)</span></span></code></pre></div><p>In this example, whenever the user selects a different item in the List, the provided function is called with the label of the newly selected item as its argument.</p>`,55),t=[e];function p(c,r,i,y,u,d){return a(),n("div",null,t)}const g=s(l,[["render",p]]);export{h as __pageData,g as default};
|