Nahir UI Documentation

Introduction to Nahir UI

Nahir UI is a component-based UI framework for the K2 programming language, designed to provide ultra-fast rendering and state management through ramdisk caching. With Nahir UI, you can build complex user interfaces that maintain K2's performance benefits.

Key Features

• Accelerated Rendering: Components render in microseconds
• Ramdisk Caching: Ultra-fast state management using K2's ramdisk cache
• Component System: Build UIs with reusable, composable components
• Responsive Design: Automatically adapts to any screen size
• Minimal Footprint: Entire framework is under 50KB

Installation

To use Nahir UI in your K2 project, you need to install the Nahir UI package:

# Install Nahir UI using the K2 package manager
k2 install nahir-ui

Then, import Nahir UI in your K2 code:

# Import Nahir UI
import NahirUI

# Create a simple UI
app = NahirUI.App.new()
button = NahirUI.Button.new({
  text: "Click Me",
  onClick: function() {
    print "Button clicked!"
  }
})

app.render(button)

Ramdisk Setup

Nahir UI uses K2's ramdisk cache system for ultra-fast component state management and rendering. To set up the ramdisk cache:

# Create the ramdisk mount unit file
sudo cp /home/jjshandy6161/Desktop/K2/usr-local-k2c.mount /etc/systemd/system/

# Enable and start the ramdisk
sudo systemctl enable usr-local-k2c.mount
sudo systemctl start usr-local-k2c.mount

# Verify the ramdisk is mounted
df -h /usr/local/k2c

The ramdisk will be automatically used by Nahir UI for caching component states and rendered templates.

Components

Nahir UI is built around the concept of components. A component is a reusable piece of UI that can be composed to build complex interfaces.

# Define a custom component
component UserCard {
  props = {
    name: "",
    avatar: "",
    role: ""
  }
  
  render {
    element = "div"
    className = "user-card"
    children = [
      {
        element: "img",
        src: props.avatar,
        className: "user-avatar"
      },
      {
        element: "div",
        className: "user-info",
        children: [
          {
            element: "h3",
            content: props.name
          },
          {
            element: "p",
            content: props.role
          }
        ]
      }
    ]
  }
}