ArcaneJaspr Codex
Documentation
🔍
ArcaneTile
Interactive tile component for grid layouts
Live Demo
Tile Title Subtitle text

ArcaneTile#

A clickable tile component designed for grid layouts, suitable for navigation menus, feature grids, and dashboard widgets.

Basic Usage#

ArcaneTile(
  title: 'Settings',
  icon: span([text('⚙')]),
  onPressed: () => goToSettings(),
)

Properties#

PropertyTypeDefaultDescription
titleStringrequiredTile title
icon Component? null Leading icon
description String? null Description text
trailing Component? null Trailing widget
onPressed VoidCallback? null Click handler
isSelected bool false Selected state
isDisabled bool false Disabled state
size TileSize medium Tile size
styles ArcaneStyleData? null Additional styling

Sizes#

// Small
ArcaneTile(
  size: TileSize.small,
  title: 'Small Tile',
  icon: span([text('📁')]),
  onPressed: () {},
)

// Medium (default)
ArcaneTile(
  size: TileSize.medium,
  title: 'Medium Tile',
  icon: span([text('📁')]),
  onPressed: () {},
)

// Large
ArcaneTile(
  size: TileSize.large,
  title: 'Large Tile',
  icon: span([text('📁')]),
  description: 'With description',
  onPressed: () {},
)

With Description#

ArcaneTile(
  icon: span([text('📊')]),
  title: 'Analytics',
  description: 'View your statistics',
  onPressed: () => goToAnalytics(),
)

Selected State#

ArcaneTile(
  icon: span([text('🏠')]),
  title: 'Dashboard',
  isSelected: currentPage == 'dashboard',
  onPressed: () => goToDashboard(),
)

Examples#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.grid,
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: Gap.md,
  ),
  children: [
    ArcaneTile(
      icon: span([text('🏠')]),
      title: 'Dashboard',
      isSelected: page == 'dashboard',
      onPressed: () => navigate('dashboard'),
    ),
    ArcaneTile(
      icon: span([text('📁')]),
      title: 'Projects',
      isSelected: page == 'projects',
      onPressed: () => navigate('projects'),
    ),
    ArcaneTile(
      icon: span([text('👥')]),
      title: 'Team',
      isSelected: page == 'team',
      onPressed: () => navigate('team'),
    ),
    ArcaneTile(
      icon: span([text('⚙')]),
      title: 'Settings',
      isSelected: page == 'settings',
      onPressed: () => navigate('settings'),
    ),
  ],
)

Feature Grid#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.grid,
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: Gap.lg,
  ),
  children: [
    ArcaneTile(
      size: TileSize.large,
      icon: span([text('⚡')]),
      title: 'Fast Performance',
      description: 'Optimized for speed',
      onPressed: () => learnMore('performance'),
    ),
    ArcaneTile(
      size: TileSize.large,
      icon: span([text('🔒')]),
      title: 'Secure',
      description: 'Enterprise-grade security',
      onPressed: () => learnMore('security'),
    ),
    ArcaneTile(
      size: TileSize.large,
      icon: span([text('📱')]),
      title: 'Responsive',
      description: 'Works on all devices',
      onPressed: () => learnMore('responsive'),
    ),
  ],
)

Quick Actions#

ArcaneRow(
  gap: Gap.sm,
  children: [
    ArcaneTile(
      size: TileSize.small,
      icon: span([text('+')]),
      title: 'New',
      onPressed: createNew,
    ),
    ArcaneTile(
      size: TileSize.small,
      icon: span([text('📤')]),
      title: 'Export',
      onPressed: exportData,
    ),
    ArcaneTile(
      size: TileSize.small,
      icon: span([text('🔄')]),
      title: 'Sync',
      onPressed: syncData,
    ),
  ],
)

App Launcher#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.grid,
    gridTemplateColumns: 'repeat(4, 80px)',
    gap: Gap.md,
    justifyContent: JustifyContent.center,
  ),
  children: [
    for (var app in apps)
      ArcaneTile(
        size: TileSize.small,
        icon: ArcaneImage(src: app.icon, width: 32, height: 32),
        title: app.name,
        onPressed: () => launchApp(app),
      ),
  ],
)

Stat Tiles#

ArcaneRow(
  gap: Gap.lg,
  children: [
    ArcaneExpanded(
      child: ArcaneTile(
        size: TileSize.large,
        icon: span([text('💰')]),
        title: 'Revenue',
        description: '\$45,231',
        trailing: ArcaneBadge(label: '+12%', variant: BadgeVariant.success),
        onPressed: viewRevenueDetails,
      ),
    ),
    ArcaneExpanded(
      child: ArcaneTile(
        size: TileSize.large,
        icon: span([text('👥')]),
        title: 'Users',
        description: '2,350',
        trailing: ArcaneBadge(label: '+8%', variant: BadgeVariant.success),
        onPressed: viewUserDetails,
      ),
    ),
  ],
)