Documentation

Introduction

MaterialSB is a SpiderBasic library that replaces the default Dojo-based UI with MaterializeCSS components. It provides a familiar BASIC syntax for creating modern, responsive Material Design interfaces.

Key Concepts:

• Parent Stack System: Components like Row(), Col(), Card(), and Modal sections automatically manage a parent hierarchy. Use CloseCurrentParent() to navigate back up the tree.
• Initialization Required: Some components (Carousel, Dropdown, Sidenav, Modal) require calling Init() after creation.
• Color Constants: Use built-in color constants like #Color_Red, #Color_Blue with modifiers like #Color_Darken_2.

Library Initialization

Before using any MaterialSB components, you must initialize the library by downloading its CSS and JavaScript dependencies.

• Download()

  Downloads the MaterialSB CSS and JavaScript dependencies. This must be called first.

• AutoInit()

  Automatically initializes all Materialize components found in the document.

• Init()

  Initializes a specific Materialize component (Carousel, Dropdown, Sidenav, or Modal).

Parent Management

MaterialSB uses a parent stack to manage hierarchical element creation. Container components automatically push themselves onto the stack, and you use these functions to navigate the hierarchy.

• SetCurrentParent()

  Pushes the current parent to the stack and sets a new parent element.

• GetCurrentParent()

  Returns the currently active parent element.

• CloseCurrentParent()

  Pops the parent stack and restores the previous parent. Supports a depth parameter.

HTML Helpers

Utility functions for generating HTML content and working with elements.

• Paragraph()

  Returns an HTML paragraph string with optional color. Supports newline characters.

• Paragraph_ex()

  Returns an HTML paragraph with custom CSS class and inline style.

• Header()

  Returns an HTML header element (h1-h6) with optional color.

• Header_ex()

  Returns an HTML header with custom CSS class and inline style.

• Link()

  Returns an HTML anchor element with a click callback and optional color.

• Link_ex()

  Returns an HTML anchor with custom CSS class and inline style.

• Append()

  Appends HTML content string to the current or specified parent element.

Element Manipulation

Low-level functions for directly manipulating DOM element properties.

• SetAttribute()

  Sets an HTML attribute on an element.

• SetClass()

  Replaces the entire CSS class list of an element.

• AddClass()

  Adds one or more CSS classes to an element (space-separated).

• SetContent()

  Replaces the inner HTML content of an element.

• AddContent()

  Appends HTML content to an element's existing content.

• GetValue()

  Returns the current value of a form input element.

• SetValue()

  Sets the value of a form input element.

Theme Management

MaterialSB supports both light and dark themes. Dark theme is enabled by default after calling Download().

• GetDarkThemeState()

  Returns #True if dark theme is currently active, #False otherwise.

• SetDarkTheme()

  Enables (#True) or disables (#False) dark theme mode.

Colors

MaterialSB provides constants for all Material Design colors, with modifiers for shades and text colors.

• Color Constants

  Complete reference for all color constants, modifiers, and usage patterns.

Navbar

Create responsive navigation bars with logo, links, and mobile menu support.

• Navbar()

  Creates a navigation bar container with optional positioning and shadow.

• NavbarAddLogo()

  Adds a text or image logo/brand to the navbar.

• NavbarAddLink()

  Adds a navigation link with automatic mobile dropdown support.

• NavbarAddSidenavTrigger()

  Adds a hamburger menu button to trigger a sidenav.

Sidenav

Slide-out navigation menus for mobile or as a fixed sidebar. Requires Init() after creation.

• Sidenav()

  Creates a side navigation menu container.

• SidenavAddLink()

  Adds a navigation link with optional Material Icon.

• SidenavAddDivider()

  Adds a horizontal divider line between sections.

• SidenavAddSubheader()

  Adds a section subheader text.

• SidenavAddUserView()

  Adds a user profile section with avatar, name, and email.

Grid

MaterializeCSS 12-column responsive grid system. Both Row() and Col() push to the parent stack.

• Row()

  Creates a grid row container. Pushes to parent stack.

• Col()

  Creates a responsive column with breakpoint-specific widths. Pushes to parent stack.

Media

Display images, videos, and embedded YouTube content with responsive options.

• Image()

  Creates an image element with optional responsive and circular styles.

• Video()

  Creates a video element with optional controls and responsive sizing.

• YoutubeVideo()

  Embeds a YouTube video with optional responsive container.

Table

Create data tables with striping, hover highlighting, and responsive scrolling.

• Table()

  Creates a table with the first column header defined.

• TableAddColumn()

  Adds an additional column header to the table.

• TableAddItem()

  Adds a data row with newline-separated column values.

• TableSetText()

  Sets the text content of a specific table cell.

Buttons

Material Design buttons with multiple variants: filled, tonal, outlined, elevated, text, and floating action buttons.

• Button()

  Creates a button with click callback and style variants.

• ButtonSetCallback()

  Sets or changes the click callback for an existing button.

Cards

Material Design cards for content grouping. Card() pushes to the parent stack.

• Card()

  Creates a card container with optional panel mode and sizing.

• CardImage()

  Adds an image section to a card.

• CardContent()

  Creates the main content area of a card. Pushes to parent stack.

• CardTitle()

  Adds a title element inside a card.

• CardAction()

  Creates an action area for links and buttons. Pushes to parent stack.

Carousel

Image carousels with standard or full-width slider modes. Requires Init() after creation.

• Carousel()

  Creates a carousel container for rotating images.

• CarouselAddItem()

  Adds an image item to the carousel with optional link.

Tabs

Tabbed content navigation for organizing related content.

• Tab()

  Creates a tab container element.

• TabAddItem()

  Adds a tab item that links to a content div by ID.

Modals

Dialog windows and bottom sheets using the modern Popover API. Requires Init() after creation.

• Modal()

  Creates a modal dialog container.

• ModalHeader()

  Adds a header section to the modal.

• ModalContent()

  Creates the modal body content area. Pushes to parent stack.

• ModalFooter()

  Creates the modal footer for action buttons. Pushes to parent stack.

• ModalOpen()

  Opens a modal dialog using the Popover API.

• ModalClose()

  Closes an open modal dialog.

Toasts

Temporary notification messages that appear at the bottom of the screen.

• Toast()

  Displays a toast notification with customizable duration and color.

• ToastDismissAll()

  Dismisses all currently visible toast notifications.

Form Components

Input fields, checkboxes, radio buttons, switches, dropdowns, and sliders. Dropdown requires Init().

• TextInput()

  Creates a text input field with various type options (text, password, email, etc.).

• Textarea()

  Creates a multiline text area input.

• Checkbox()

  Creates a checkbox input with optional filled style.

• Radio()

  Creates a radio button. Use the same Name for grouped options.

• Switch()

  Creates a toggle switch with off/on labels.

• Range()

  Creates a range slider with min, max, and initial value.

• Dropdown()

  Creates a dropdown select element. Requires Init() after adding options.

• DropdownAddOption()

  Adds an option to a dropdown with text, value, and selected state.

• InputSetCallback()

  Registers a callback function for input value changes.