FlowUI - Counter Example

FlowUI Counter Example

This example demonstrates a simple counter application built with FlowUI. It showcases state management, event handling, and component composition.

Note: This example uses @notswssr/flowui directly from npm. In a real application, you might want to bundle your JavaScript with a tool like Webpack or Parcel.

import { 
  VStack, HStack, Text, Button, 
  State, mount, Color, Font 
} from '@notswssr/flowui';

function Counter() {
  // Create state for the counter
  const count = new State(0);
  
  // Build UI
  return VStack(
    Text("Counter")
      .font(Font.headline())
      .padding(".bottom", 20),
      
    HStack(
      Button("-")
        .onTap(() => count.value--)
        .padding(10),
        
      Text("0")
        .bind(count, (value, component) => {
          component.text(value.toString());
        })
        .padding(".horizontal", 20)
        .font(Font.title()),
        
      Button("+")
        .onTap(() => count.value++)
        .padding(10)
    )
    .padding(".bottom", 20),
    
    Text("Current count: 0")
      .bind(count, (value, component) => {
        component.text(`Current count: ${value}`);
      })
  )
  .padding(20)
  .backgroundColor(Color.gray.opacity(0.1))
  .cornerRadius(10);
}

// Mount the app to the DOM
mount(Counter(), "#app");

How It Works

This counter example demonstrates these key FlowUI concepts:

State Management: Use of State to create reactive variables

Component Composition: Building UI by composing VStack, HStack, Text, and Button components

Event Handling: Using onTap for button click events

Data Binding: Using bind to update UI when state changes

Style Modifiers: Applying padding, background color, corner radius, etc.