51 lines
39 KiB
HTML
51 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Getting Started | Basalt</title>
|
||
<meta name="description" content="A CC:Tweaked UI Framework">
|
||
<meta name="generator" content="VitePress v1.0.0-rc.45">
|
||
<link rel="preload stylesheet" href="/assets/style.CuNZhYzf.css" as="style">
|
||
|
||
<script type="module" src="/assets/app.yweqp-TB.js"></script>
|
||
<link rel="preload" href="/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/assets/chunks/framework.nQaBHiNx.js">
|
||
<link rel="modulepreload" href="/assets/chunks/theme.DMrn68il.js">
|
||
<link rel="modulepreload" href="/assets/guides_getting-started.md.DvN8P1BE.lean.js">
|
||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-a9a9e638><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c3508ec8></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c3508ec8> Skip to content </a><!--]--><!----><header class="VPNav" data-v-a9a9e638 data-v-f1e365da><div class="VPNavBar has-sidebar" data-v-f1e365da data-v-b9c8b02d><div class="wrapper" data-v-b9c8b02d><div class="container" data-v-b9c8b02d><div class="title" data-v-b9c8b02d><div class="VPNavBarTitle has-sidebar" data-v-b9c8b02d data-v-28a961f9><a class="title" href="/" data-v-28a961f9><!--[--><!--]--><!----><span data-v-28a961f9>Basalt</span><!--[--><!--]--></a></div></div><div class="content" data-v-b9c8b02d><div class="content-body" data-v-b9c8b02d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-b9c8b02d><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-b9c8b02d data-v-492ea56d><span id="main-nav-aria-label" class="visually-hidden" data-v-492ea56d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/home.html" tabindex="0" data-v-492ea56d data-v-2781b5e7><!--[--><span data-v-2781b5e7>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guides/" tabindex="0" data-v-492ea56d data-v-2781b5e7><!--[--><span data-v-2781b5e7>Guides</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/references/main.html" tabindex="0" data-v-492ea56d data-v-2781b5e7><!--[--><span data-v-2781b5e7>References</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-b9c8b02d data-v-ead91a81><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-ead91a81 data-v-b79b56d4 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-b79b56d4></span><span class="vpi-moon moon" data-v-b79b56d4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-b9c8b02d data-v-164c457f data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Pyroxenium/Basalt" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-717b8b75><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-b9c8b02d data-v-9b536d0b data-v-e5380155><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e5380155><span class="vpi-more-horizontal icon" data-v-e5380155></span></button><div class="menu" data-v-e5380155><div class="VPMenu" data-v-e5380155 data-v-97491713><!----><!--[--><!--[--><!----><div class="group" data-v-9b536d0b><div class="item appearance" data-v-9b536d0b><p class="label" data-v-9b536d0b>Appearance</p><div class="appearance-action" data-v-9b536d0b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-9b536d0b data-v-b79b56d4 data-v-4a1c76db><span class="check" data-v-4a1c76db><span class="icon" data-v-4a1c76db><!--[--><span class="vpi-sun sun" data-v-b79b56d4></span><span class="vpi-moon moon" data-v-b79b56d4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-9b536d0b><div class="item social-links" data-v-9b536d0b><div class="VPSocialLinks social-links-list" data-v-9b536d0b data-v-ee7a9424><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Pyroxenium/Basalt" aria-label="github" target="_blank" rel="noopener" data-v-ee7a9424 data-v-717b8b75><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-b9c8b02d data-v-5dea55bf><span class="container" data-v-5dea55bf><span class="top" data-v-5dea55bf></span><span class="middle" data-v-5dea55bf></span><span class="bottom" data-v-5dea55bf></span></span></button></div></div></div></div><div class="divider" data-v-b9c8b02d><div class="divider-line" data-v-b9c8b02d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-a9a9e638 data-v-070ab83d><div class="container" data-v-070ab83d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-070ab83d><span class="vpi-align-left menu-icon" data-v-070ab83d></span><span class="menu-text" data-v-070ab83d>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-070ab83d data-v-c9ba27ad><button data-v-c9ba27ad>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-a9a9e638 data-v-ec846e01><div class="curtain" data-v-ec846e01></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-ec846e01><span class="visually-hidden" id="sidebar-aria-label" data-v-ec846e01> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-ec846e01><section class="VPSidebarItem level-0" data-v-ec846e01 data-v-f24171a4><div class="item" role="button" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><h2 class="text" data-v-f24171a4>Getting Started</h2><!----></div><div class="items" data-v-f24171a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/guide/" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Home</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/guide/one.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>One</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/guide/two.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Two</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a9a9e638 data-v-91765379><div class="VPDoc has-sidebar has-aside" data-v-91765379 data-v-83890dd9><!--[--><!--]--><div class="container" data-v-83890dd9><div class="aside" data-v-83890dd9><div class="aside-curtain" data-v-83890dd9></div><div class="aside-container" data-v-83890dd9><div class="aside-content" data-v-83890dd9><div class="VPDocAside" data-v-83890dd9 data-v-6d7b3c46><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-6d7b3c46 data-v-c14bfc45><div class="content" data-v-c14bfc45><div class="outline-marker" data-v-c14bfc45></div><div class="outline-title" role="heading" aria-level="2" data-v-c14bfc45>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-c14bfc45><span class="visually-hidden" id="doc-outline-aria-label" data-v-c14bfc45> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-c14bfc45 data-v-3f927ebe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-6d7b3c46></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-83890dd9><div class="content-container" data-v-83890dd9><!--[--><!--]--><main class="main" data-v-83890dd9><div style="position:relative;" class="vp-doc _guides_getting-started" data-v-83890dd9><div><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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span>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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"basalt"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"basalt"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- your UI code is here</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">autoUpdate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"basalt"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"basalt"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getMainFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set position to (5, 3)</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set size to width: 20, height: 3</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(colors.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set background color to blue</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(colors.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addInput</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set position to (3, 3)</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set size to width: 12, height: 1</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"black"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set background color to light gray</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"lightgray"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set text color to light gray</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPlaceholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Enter text here..."</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set placeholder text</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Initial value"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Input value changed to: " </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value)</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> inputValue </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Current value of Input field: " </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> list </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Item 1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Item 2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">addItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Item 3"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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 shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self, selectedItem)</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> basalt.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Selected item changed to: " </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> selectedItem)</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</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></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-87be45d1><!--[--><!--]--><div class="edit-info" data-v-87be45d1><div class="edit-link" data-v-87be45d1><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/Pyroxenium/Basalt/tree/master/docs/guides/getting-started.md" target="_blank" rel="noreferrer" data-v-87be45d1><!--[--><span class="vpi-square-pen edit-link-icon" data-v-87be45d1></span> Edit this page<!--]--></a></div><!----></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-a9a9e638 data-v-c970a860><div class="container" data-v-c970a860><p class="message" data-v-c970a860>Released under the MIT License.</p><p class="copyright" data-v-c970a860>Copyright © 2024 Robert Jelic</p></div></footer><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guides_home.md\":\"DC7WJlgs\",\"pinestore.md\":\"B0KfH_5R\",\"references_frame.md\":\"Dt7OjqK0\",\"references_checkbox.md\":\"BBPeYSRt\",\"index.md\":\"Bpyy5t2w\",\"references_radio.md\":\"LgX1ff8b\",\"references_main.md\":\"B1Dq-dDJ\",\"guides.md\":\"CfLfS2yk\",\"references_bigmonitor.md\":\"BoIb6-Go\",\"readme.md\":\"bK1e9QN5\",\"references_textfield.md\":\"hQdUZtL3\",\"references_program.md\":\"B4UPNIcG\",\"download.md\":\"DGGRiZUZ\",\"references_baseframe.md\":\"DJfcFM_J\",\"home.md\":\"Byvc0x1l\",\"snippets.md\":\"2DkaDryp\",\"references_label.md\":\"DC06ZvEp\",\"references_image.md\":\"CEW9iKEu\",\"references_dropdown.md\":\"Dm2lH27n\",\"guides_properties.md\":\"CHSlSACG\",\"references_monitor.md\":\"Do2-LUnA\",\"guides_getting-started.md\":\"DvN8P1BE\",\"references_menubar.md\":\"8swstgps\",\"references_slider.md\":\"DNu_WQBi\",\"references_input.md\":\"DXVE1-KW\",\"references_button.md\":\"DFkqJOev\",\"references_progressbar.md\":\"cpIpKcA2\",\"references_list.md\":\"DWbuSJOO\",\"references_container.md\":\"CJzA3LLn\",\"references_basalt.md\":\"Bw02338B\",\"references_element.md\":\"cOGDXUe7\",\"references_visualelement.md\":\"n7mzG37H\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Basalt\",\"description\":\"A CC:Tweaked UI Framework\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"editLink\":{\"pattern\":\"https://github.com/Pyroxenium/Basalt/tree/master/docs/:path\"},\"search\":{\"provider\":\"local\"},\"outline\":2,\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024 Robert Jelic\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/home\"},{\"text\":\"Guides\",\"link\":\"/guides/\"},{\"text\":\"References\",\"link\":\"/references/main\"}],\"docFooter\":{\"prev\":false,\"next\":false},\"sidebar\":{\"/guides/\":[{\"text\":\"Getting Started\",\"items\":[{\"text\":\"Home\",\"link\":\"/guide/\"},{\"text\":\"One\",\"link\":\"/guide/one\"},{\"text\":\"Two\",\"link\":\"/guide/two\"}]}],\"/references/\":[{\"text\":\"References\",\"link\":\"references/main\",\"items\":[{\"text\":\"Basalt\",\"link\":\"references/basalt\"},{\"text\":\"BasicElement\",\"link\":\"references/element\",\"items\":[{\"text\":\"VisualElement\",\"link\":\"references/visualelement\",\"items\":[{\"text\":\"Container\",\"link\":\"references/container\",\"items\":[{\"text\":\"Baseframe\",\"link\":\"references/baseframe\"},{\"text\":\"Frame\",\"link\":\"references/frame\"},{\"text\":\"Monitor\",\"link\":\"references/monitor\"},{\"text\":\"BigMonitor\",\"link\":\"references/bigmonitor\"}]},{\"text\":\"Button\",\"link\":\"references/button\"},{\"text\":\"Checkbox\",\"link\":\"references/checkbox\"},{\"text\":\"Image\",\"link\":\"references/image\"},{\"text\":\"Input\",\"link\":\"references/input\"},{\"text\":\"Label\",\"link\":\"references/label\"},{\"text\":\"List\",\"link\":\"references/list\",\"items\":[{\"text\":\"Dropdown\",\"link\":\"references/dropdown\"},{\"text\":\"Radio\",\"link\":\"references/Radio\"},{\"text\":\"Menubar\",\"link\":\"references/Menubar\"}]},{\"text\":\"Program\",\"link\":\"references/program\"},{\"text\":\"Progressbar\",\"link\":\"references/progressbar\"},{\"text\":\"Scrollbar\",\"link\":\"references/scrollbar\"},{\"text\":\"Slider\",\"link\":\"references/slider\"},{\"text\":\"Textfield\",\"link\":\"references/textfield\"}]}]}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Pyroxenium/Basalt\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||
|
||
</body>
|
||
</html> |