78 lines
57 KiB
HTML
78 lines
57 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>BasicElement | 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/references_element.md.cOGDXUe7.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 is-link" data-v-ec846e01 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/main.html" data-v-f24171a4><!--[--><h2 class="text" data-v-f24171a4>References</h2><!--]--></a><!----></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="/references/basalt.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Basalt</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-1 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/element.html" data-v-f24171a4><!--[--><h3 class="text" data-v-f24171a4>BasicElement</h3><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><section class="VPSidebarItem level-2 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/visualelement.html" data-v-f24171a4><!--[--><h4 class="text" data-v-f24171a4>VisualElement</h4><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><section class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/container.html" data-v-f24171a4><!--[--><h5 class="text" data-v-f24171a4>Container</h5><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><div class="VPSidebarItem level-4 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="/references/baseframe.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Baseframe</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 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="/references/frame.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Frame</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 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="/references/monitor.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Monitor</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 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="/references/bigmonitor.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>BigMonitor</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-3 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="/references/button.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/checkbox.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/image.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/input.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/label.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Label</p><!--]--></a><!----></div><!----></div><section class="VPSidebarItem level-3 is-link" data-v-f24171a4 data-v-f24171a4><div class="item" tabindex="0" data-v-f24171a4><div class="indicator" data-v-f24171a4></div><a class="VPLink link link" href="/references/list.html" data-v-f24171a4><!--[--><h5 class="text" data-v-f24171a4>List</h5><!--]--></a><!----></div><div class="items" data-v-f24171a4><!--[--><div class="VPSidebarItem level-4 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="/references/dropdown.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 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="/references/Radio.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-4 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="/references/Menubar.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Menubar</p><!--]--></a><!----></div><!----></div><!--]--></div></section><div class="VPSidebarItem level-3 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="/references/program.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Program</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/progressbar.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Progressbar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/scrollbar.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Scrollbar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/slider.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-3 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="/references/textfield.html" data-v-f24171a4><!--[--><p class="text" data-v-f24171a4>Textfield</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section><!--]--></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 _references_element" data-v-83890dd9><div><h1 id="basicelement" tabindex="-1">BasicElement <a class="header-anchor" href="#basicelement" aria-label="Permalink to "BasicElement""></a></h1><p>The BasicElement class is the fundamental building block class in Basalt, from which all other elements are derived. You can think of it as the “origin” of all elements within the framework. The BasicElement class provides essential functions that are common to all derived elements, such as adding and removing event listeners and managing inheritance and relationships between elements.</p><p>In simple terms, the BasicElement class is like a common ancestor that passes down basic functions and properties to all subsequent elements. This makes it easier to keep the behavior of elements throughout the framework consistent and predictable.</p><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to "Properties""></a></h2><table><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>enabled</td><td>boolean</td><td>Controls whether the event listeners are active. When set to true, event operations related to the element are processed.</td></tr><tr><td>parent</td><td>Container</td><td>References the parent element that this element is nested within, if any.</td></tr><tr><td>events</td><td>table</td><td>A table storing event handlers associated with this element.</td></tr><tr><td>propertyObservers</td><td>table</td><td>A table holding observer functions that get triggered when specific properties of the element change. Useful for reactivity and updating related UI elements.</td></tr><tr><td>name</td><td>string</td><td>A unique identifier or label for the element, which can be useful for debugging or for referencing the element programmatically.</td></tr><tr><td>type</td><td>string</td><td>Describes the kind or category of the element, such as "button", "input", "label", etc.</td></tr><tr><td>z</td><td>number</td><td>Represents the elements's depth or layering order in the UI. Higher values will render the element on top of those with lower values, allowing for control over overlapping elements.</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to "Methods""></a></h2><table><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#getproperty">getProperty</a></td><td>any</td><td>Returns a property value.</td></tr><tr><td><a href="#setproperty">setProperty</a></td><td>self</td><td>Sets a property's value.</td></tr><tr><td><a href="#hasproperty">hasProperty</a></td><td>boolean</td><td>Checks if a property exists for the element.</td></tr><tr><td><a href="#setproperties">setProperties</a></td><td>self</td><td>Sets multiple properties for a element at once.</td></tr><tr><td><a href="#getproperties">getProperties</a></td><td>table</td><td>Retrieves all properties and their values for a element.</td></tr><tr><td><a href="#getpropertytype">getPropertyType</a></td><td>string</td><td>Retrieves the data type of a specified property for a element.</td></tr><tr><td><a href="#addpropertyobserver">addPropertyObserver</a></td><td>self</td><td>Adds an observer function to monitor changes to a specific property of a element.</td></tr><tr><td><a href="#removepropertyobserver">removePropertyObserver</a></td><td>self</td><td>Removes an observer function from monitoring changes to a specific property of a element.</td></tr><tr><td><a href="#forcepropertyobserverupdate">forcePropertyObserverUpdate</a></td><td>self</td><td>Forces an update of all property observers for a element.</td></tr><tr><td><a href="#fireevent">fireEvent</a></td><td>self</td><td>Fires an event associated with the element.</td></tr><tr><td><a href="#istype">isType</a></td><td>boolean</td><td>Checks if the element belongs to a specified type.</td></tr><tr><td><a href="#updateevents">updateEvents</a></td><td>self</td><td>Updates all events associated with the element.</td></tr></tbody></table><h2 id="getproperty" tabindex="-1">getProperty <!----> <a class="header-anchor" href="#getproperty" aria-label="Permalink to "getProperty <C content="getProperty"/>""></a></h2><p>Retrieves the value of a specified property for a element.</p><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> the name of the property</li></ol><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h3><ol><li><code>any</code> the value of the specified property. The type of the returned value depends on the nature of the property (e.g., it could be a string, number, table, etc.).</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Retrieve and print the 'name' property of the button</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> propertyName </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><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;">getProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"name"</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;">(propertyName)</span></span></code></pre></div></details><h2 id="setproperty" tabindex="-1">setProperty <!----> <a class="header-anchor" href="#setproperty" aria-label="Permalink to "setProperty <C content="setProperty"/>""></a></h2><p>Sets the value of a specified property for a element.</p><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> The name of the property you wish to set.</li><li><code>any</code>The value you want to assign to the specified property. The type of this parameter should match the expected type for the property in question (e.g., string, number, table, etc.).</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set the 'name' property of the button to a new value</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;">setProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"MyButton"</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;">-- For demonstration, retrieve and print the updated 'name' property</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> updatedPropertyName </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><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;">getProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"name"</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;">(updatedPropertyName)</span></span></code></pre></div></details><h2 id="hasproperty" tabindex="-1">hasProperty <!----> <a class="header-anchor" href="#hasproperty" aria-label="Permalink to "hasProperty <C content="hasProperty"/>""></a></h2><p>Checks if a property exists for the element.</p><h3 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to "Returns""></a></h3><ol><li><code>boolean</code> true if the property exists, false otherwise.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Check if the 'name' property exists for the button</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> hasNameProperty </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><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;">hasProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"name"</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;">(hasNameProperty)</span></span></code></pre></div></details><h2 id="setproperties" tabindex="-1">setProperties <!----> <a class="header-anchor" href="#setproperties" aria-label="Permalink to "setProperties <C content="setProperties"/>""></a></h2><p>Sets multiple properties for an element at once.</p><h3 id="parameters-2" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-2" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>table</code> A table containing key-value pairs of properties and their corresponding values.</li></ol><h3 id="returns-2" tabindex="-1">Returns <a class="header-anchor" href="#returns-2" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Set multiple properties for the button</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;">setProperties</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "MyButton"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div></details><h2 id="getproperties" tabindex="-1">getProperties <!----> <a class="header-anchor" href="#getproperties" aria-label="Permalink to "getProperties <C content="getProperties"/>""></a></h2><p>Retrieves all properties and their values for an element.</p><h3 id="returns-3" tabindex="-1">Returns <a class="header-anchor" href="#returns-3" aria-label="Permalink to "Returns""></a></h3><ol><li><code>table</code> Retrieves all properties and their values for an element.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Retrieve all properties and their values for the button</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> properties </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><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;">getProperties</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;">(properties) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Output: {name = uuid, enabled = true, x = 1, y = 1, width = 12, height = 3, ...}</span></span></code></pre></div></details><h2 id="getpropertytype" tabindex="-1">getPropertyType <!----> <a class="header-anchor" href="#getpropertytype" aria-label="Permalink to "getPropertyType <C content="getPropertyType"/>""></a></h2><p>Retrieves the data type of a specified property for an element.</p><h3 id="parameters-3" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-3" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> The name of the property.</li></ol><h3 id="returns-4" tabindex="-1">Returns <a class="header-anchor" href="#returns-4" aria-label="Permalink to "Returns""></a></h3><ol><li><code>string</code> The data type of the specified property</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Retrieve the data type of the 'background' property for the button</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> propertyType </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><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;">getPropertyType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"background"</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;">(propertyType) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Output: "color"</span></span></code></pre></div></details><h2 id="addpropertyobserver" tabindex="-1">addPropertyObserver <!----> <a class="header-anchor" href="#addpropertyobserver" aria-label="Permalink to "addPropertyObserver <C content="addPropertyObserver"/>""></a></h2><p>Adds an observer function to monitor changes to a specific property of an element. The Observer System is mainly used by the dynamic values extension.</p><h3 id="parameters-4" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-4" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> The name of the property to observe.</li><li><code>function</code> The observer function to call when the property changes.</li></ol><h3 id="returns-5" tabindex="-1">Returns <a class="header-anchor" href="#returns-5" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 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>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Define an observer function</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundObserver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(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;">"Button background changed to: " </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">..</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> tostring</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>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Add the observer function to monitor changes to the 'background' property of the button</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;">addPropertyObserver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"background"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, backgroundObserver)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Now, whenever the 'background' property of the button changes, the observer function will be called</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;">setProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"background"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, colors.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Output: "Button background changed to: 16384"</span></span></code></pre></div></details><h2 id="removepropertyobserver" tabindex="-1">removePropertyObserver <!----> <a class="header-anchor" href="#removepropertyobserver" aria-label="Permalink to "removePropertyObserver <C content="removePropertyObserver"/>""></a></h2><p>Removes an observer function from monitoring changes to a specific property of an element.</p><h3 id="parameters-5" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-5" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> The name of the property being observed.</li><li><code>function|number</code> The observer function to remove, or the index in the table.</li></ol><h3 id="returns-6" tabindex="-1">Returns <a class="header-anchor" href="#returns-6" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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:#6A737D;--shiki-dark:#6A737D;">-- Assuming 'backgroundObserver' was previously added as an observer for the 'background' property of the button</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;">removePropertyObserver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"background"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, backgroundObserver)</span></span></code></pre></div></details><h2 id="forcepropertyobserverupdate" tabindex="-1">forcePropertyObserverUpdate <!----> <a class="header-anchor" href="#forcepropertyobserverupdate" aria-label="Permalink to "forcePropertyObserverUpdate <C content="forcePropertyObserverUpdate"/>""></a></h2><p>Forces an update of all property observers for an element. This can be used by users, but it is mainly meant for internal usage.</p><h3 id="returns-7" tabindex="-1">Returns <a class="header-anchor" href="#returns-7" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">forcePropertyObserverUpdate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div></details><h2 id="fireevent" tabindex="-1">fireEvent <!----> <a class="header-anchor" href="#fireevent" aria-label="Permalink to "fireEvent <C content="fireEvent"/>""></a></h2><p>Fires an event associated with the element</p><h3 id="parameters-6" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-6" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> The name of the event to fire.</li></ol><h3 id="returns-8" tabindex="-1">Returns <a class="header-anchor" href="#returns-8" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fireEvent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"mouse_click"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></details><h2 id="istype" tabindex="-1">isType <!----> <a class="header-anchor" href="#istype" aria-label="Permalink to "isType <C content="isType"/>""></a></h2><p>Checks if the element belongs to a specified type.</p><h3 id="parameters-7" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-7" aria-label="Permalink to "Parameters""></a></h3><ol><li><code>string</code> The type to check against.</li></ol><h3 id="returns-9" tabindex="-1">Returns <a class="header-anchor" href="#returns-9" aria-label="Permalink to "Returns""></a></h3><ol><li><code>boolean</code> true if the element belongs to the specified type, false otherwise.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;"> 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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">local</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> frame </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;">addFrame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</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;">debug</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">frame</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">isType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Container"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Output: true</span></span></code></pre></div></details><h2 id="updateevents" tabindex="-1">updateEvents <!----> <a class="header-anchor" href="#updateevents" aria-label="Permalink to "updateEvents <C content="updateEvents"/>""></a></h2><p>This will register all events to the parent. Mainly used internal. For example this is beeing called when we switch the parent frame.</p><h3 id="returns-10" tabindex="-1">Returns <a class="header-anchor" href="#returns-10" aria-label="Permalink to "Returns""></a></h3><ol><li><code>self</code> The element itself.</li></ol><details class="details custom-block"><summary>Click to see example</summary><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;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">updateEvents</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div></details></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/references/element.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> |